<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        cache-key="CallLog"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar></template>
        <!-- 操作列 -->
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import search from './components/search.vue';
  import { pageLog } from '@/api/call';

  export default {
    name: 'CallLog',
    components: {
      search
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            prop: 'id',
            label: 'ID',
            width: 110,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'orderId',
            label: '业务订单号',
            align: 'center',
            width: 250
          },
          {
            prop: 'customerPhoneNo',
            label: '客户联系方式',
            align: 'center',
            width: 150
          },
          {
            prop: 'agentPhoneNo',
            label: '坐席分机号',
            align: 'center',
            width: 150
          },
          {
            prop: 'agentId',
            label: '工号',
            align: 'center',
            width: 150
          },
          {
            prop: 'agentUm',
            label: '姓名',
            align: 'center',
            width: 150
          },
          {
            prop: 'customerDispNo',
            label: '呼客户外显号码',
            align: 'center',
            width: 150
          },
          {
            prop: 'agentDispNo',
            label: '呼坐席外显号码',
            align: 'center',
            width: 150
          },
          {
            prop: 'voiceId',
            label: '录音流水号',
            align: 'center',
            width: 150
          },
          {
            prop: 'ringDuration',
            label: '振铃时长(秒)',
            align: 'center',
            width: 110
          },
          {
            prop: 'telDuration',
            label: '通话时长(秒)',
            align: 'center',
            width: 110
          },
          {
            prop: 'startTime',
            label: '通话开始时间',
            align: 'center',
            width: 150
          },
          {
            prop: 'endTime',
            label: '通话结束时间',
            align: 'center',
            width: 150
          },
          {
            prop: 'finishTypeCn',
            label: '结束类型',
            align: 'center',
            width: 110
          },
          {
            prop: 'callTypeCn',
            label: '呼叫类型',
            align: 'center',
            width: 110
          },
          {
            prop: 'hangupTypeCn',
            label: '挂断类型',
            align: 'center',
            width: 110
          },
          {
            prop: 'reqId',
            label: '请求id',
            align: 'center',
            width: 180
          }
        ],
        // 表格选中数据
        selection: []
      };
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return pageLog({ ...where, ...order, page, limit });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      }
    }
  };
</script>
