<template>
  <div class="app-container">
    <div v-show="dataLists.length" class="filter-container">
      <el-select v-model="bookType" class="filter-item" filterable clearable placeholder="请选择导出类型">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"/>
      </el-select>
      <el-input v-model="filename" placeholder="请输入文件名称(默认telWSLogs)" class="filter-item" prefix-icon="el-icon-document" style="width: 340px;"/>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-upload2" @click="handleDownload">导出</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 label="是否成功" align="center" min-width="80">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.Result | resultTypeFilter"
            size="mini"
            disable-transitions>
            {{ scope.row.Result | resultTextFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operationType" label="方式" align="center" min-width=""/>
      <el-table-column prop="Type" label="类型" align="center" min-width=""/>
      <el-table-column prop="timeStamp" label="时间" align="center" min-width="140">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.timeStamp | timestampToTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="AgentID" label="坐席工号" align="center" min-width=""/>
      <el-table-column prop="AgentExten" label="分机号" align="center" min-width=""/>
      <el-table-column prop="State" label="坐席/线路状态" align="center" min-width=""/>
      <el-table-column prop="Error" label="错误代码" align="center" min-width=""/>
      <el-table-column label="坐席组" align="center" min-width="">
        <template slot-scope="scope">
          {{ groupFilter(scope.row.AgentGroup) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="AgentGroup" label="坐席组Id" align="center" min-width=""></el-table-column> -->
      <el-table-column prop="DisposeTime" label="话后处理时长" align="center" min-width=""/>
      <el-table-column prop="wsUrl" label="连接地址" align="center" min-width="100"/>
    </el-table>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { getSeatGroup } from '@/api/commonAPI'
import { timestampToTime } from '@/utils'

export default {
  name: 'TelWSLogs',
  filters: {
    resultTextFilter(status) {
      const statusMap = {
        true: '成功',
        false: '失败',
        undefined: '----'
      }
      return statusMap[status]
    },
    resultTypeFilter(status) {
      const statusMap = {
        true: 'success',
        false: 'danger',
        undefined: ''
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      loading: false,
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx',
      options: ['xlsx', 'csv', 'txt'],
      seatGroups: [],
      dataLists: [] // 列表数据
    }
  },
  computed: {
    ...mapGetters([
      'username', // 用户名
      'usercode', // 工号
      'seatflag', // 坐席标识
      'extension', // 分机号
      'telMessageData' // telWebsocket 数据
    ]),
    groupFilter() {
      return function(id) {
        for (let i = 0; i < this.seatGroups.length; i++) {
          if (this.seatGroups[i].id === id) {
            return this.seatGroups[i].name
          }
        }
      }
    }
  },
  watch: {
    // 如果 `telMessageData` 发生改变，这个函数就会运行
    telMessageData: function(newData, oldData) {
      newData.timeStamp = new Date().getTime()
      this.dataLists.unshift(newData)
    }
  },
  created() {
    this.getSeatGroupList()
      .then(() => {

      })
  },
  methods: {
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['是否成功', '方式', '类型', '时间', '坐席工号', '分机号', '坐席/线路状态', '错误代码', '坐席组', '话后处理时长', '连接地址']
        const filterVal = ['Result', 'operationType', 'Type', 'timeStamp', 'AgentID', 'AgentExten', 'State', 'Error', 'AgentGroup', 'DisposeTime', 'wsUrl']
        const list = this.dataLists
        const data = this.formatJson(filterVal, list)
        this.filename = this.filename === '' ? 'telWSLogs' : this.filename

        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: this.filename, // 非必填
          autoWidth: this.autoWidth, // 非必填
          bookType: this.bookType// 非必填
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timeStamp') {
          return timestampToTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    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>
