<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="keyword" placeholder="请输入坐席工号" class="filter-item"/>
      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
    </div>
    <el-table v-loading="loading" :data="dataLists" border stripe>
      <el-table-column type="index" label="编号" align="center" fixed width="80"/>
      <el-table-column prop="agent_id" label="坐席" align="center" min-width=""/>
      <el-table-column prop="extid" label="分机号" align="center"/>
      <el-table-column prop="agent_ip" label="IP地址" align="center"/>
      <el-table-column label="坐席组" align="center">
        <template slot-scope="scope">
          {{ groupFilter(scope.row.group_id) }}
        </template>
      </el-table-column>
      <el-table-column label="坐席类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.agent_type === 0 ? '普通坐席' : '班长坐席' }}
        </template>
      </el-table-column>
      <el-table-column label="签入时间" align="center" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.time_login | timestampToTime }}
        </template>
      </el-table-column>
      <el-table-column label="签出时间" align="center" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.time_logout | timestampToTime }}
        </template>
      </el-table-column>
      <el-table-column prop="logout_host" label="签出的主控坐席" align="center" min-width="85"/>
      <el-table-column prop="login_times" label="签入时长" align="center"/>
      <el-table-column prop="free_times" label="空闲时长" align="center"/>
      <el-table-column prop="repose_times" label="置忙时长" align="center"/>
      <el-table-column prop="talk_times" label="通话时长" align="center"/>
      <el-table-column prop="repose_num" label="置忙次数" align="center"/>
      <el-table-column prop="answer_num" label="应答次数" align="center"/>
      <el-table-column label="签出方式" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.logout_type === 0 ? 'success' : 'danger'"
            size="mini"
            disable-transitions>
            {{ scope.row.logout_type | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageParams.total > 0"
      :total="pageParams.total"
      :pageindex.sync="pageParams.pageindex"
      :pagesize.sync="pageParams.pagesize"
      class="pagination"
      @pagination="getList" />

  </div>
</template>

<script>

import { getCallStateList } from '@/api/trafficData/trafficData'
import { getSeatGroup } from '@/api/commonAPI'
import { timestampToTime } from '@/utils'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装

export default {
  name: 'SeatsState',
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '被动签出',
        0: '主动签出'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      loading: false,
      keyword: '',
      seatGroups: [],
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      dataLists: [] // 列表数据
    }
  },
  computed: {
    groupFilter() {
      return function(id) {
        for (let i = 0; i < this.seatGroups.length; i++) {
          if (this.seatGroups[i].id === id) {
            return this.seatGroups[i].name
          }
        }
      }
    }
  },
  created() {
    this.getSeatGroupList()
      .then(() => {
        this.getList()
        document.onkeyup = (e) => {
          if (e.keyCode === 13) {
            this.getList()
          }
        }
      })
  },
  methods: {
    getList() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams.pageindex, // 第几页
          pagesize: this.pageParams.pagesize, // 每页几条信息
          keyword: this.keyword //	否	string	模糊查询（呼叫号码）
        }
        getCallStateList(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.data.total
            this.dataLists = response.data.rows
          }
        })
        resolve()
      })
    },
    btn_search() {
      this.getList()
    },
    getSeatGroupList() {
      return new Promise(resolve => {
        getSeatGroup().then(response => {
          if (response.state.toLowerCase() === 'success') {
            const res = response.data
            if (res && res.length > 0) {
              for (let i = 0; i < res.length; i++) {
                this.seatGroups.push({
                  id: res[i].id,
                  name: res[i].zxzname
                })
              }
            }
          }
        })
        resolve()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
