<!--呼入呼出统计-->
<template>
  <div>
    <div class="statistic-div box">
      <div>
        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border>
          <el-table-column label="呼入统计" align="center">
            <el-table-column
              v-for="column in inColumns"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>
          <el-table-column label="呼出统计" align="center">
            <el-table-column
              v-for="column in outColumns"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>
          <el-table-column
            v-for="column in allColumns"
            :key="column.text"
            :prop="column.value"
            :label="column.text"
            class-name="darker-head"
            align="center"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { callInOutStatistics } from '@/api/statistics'
export default {
  name: 'CallStatics',
  props: {
    query: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      listLoading: true,
      inColumns: [
        { text: '呼入成功', value: 'inSuccessNum' },
        { text: '客户放弃', value: 'giveupNum' },
        { text: '座席忙碌', value: 'busyNum' },
        { text: '座席未接', value: 'notCallNum' },
        { text: '呼损率', value: 'lossRate' },
        { text: '平均通话时长', value: 'inAverageTime' },
        { text: '呼入接通率', value: 'inSuccessRate' }
      ],
      outColumns: [
        { text: '呼出成功', value: 'outSuccessNum' },
        { text: '呼出失败', value: 'outFailedNum' },
        { text: '平均通话时长', value: 'outAverageTime' },
        { text: '呼出接通率', value: 'outSuccessRate' }
      ],
      allColumns: [
        { text: '转移通话', value: 'transferNum' },
        { text: '总体接通率', value: 'successRate' }
      ],
      size: 'small',
      data: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData()
    },
    fetchData() {
      // this.listLoading = true
      callInOutStatistics(this.query).then(response => {
        this.data = [response.data]
        this.listLoading = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $themeColor: aliceblue;
  .statistic-div{
    width:100%
  }

  .head-class{.box{
    position:relative;
    margin-top: 20px;
    border:2px solid $themeColor;
    padding: 0 10px;
    .table{
      margin: 20px 0px;
      box-sizing: border-box;
      border-color: #C3DFF4 !important;
    }
  }
    .box::before{
      content:attr(title);
      position:absolute;
      left:20px;
      color: #15428b;
      font-weight: bold;
      transform:translateY(-50%);
      -webkit-transform:translate(0,-50%);
      padding:0 10px;
      background-color:#fff;
      font-size:14px;
    }
    th{
      background-color: #66b1ff;
    }
  }
</style>