<!--呼入呼出统计-->
<template>
  <div>
    <div class="statistic-div box" title="实时呼入/呼出统计">
      <div>
        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
          <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
            class-name="darker-head"
            v-for="column in allColumns"
            :key="column.text"
            :prop="column.value"
            :label="column.text"
            align="center"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CallStatics',
  data: function() {
    return {
      inColumns: [
        { text: '呼入成功', value: 'insuccess' },
        { text: '客户放弃', value: 'giveup' },
        { text: '座席忙碌', value: 'busy' },
        { text: '座席未接', value: 'zxwj' },
        { text: '呼损率', value: 'hsl' },
        { text: '平均通话时长', value: 'pjthsc' },
        { text: '呼入接通率', value: 'hrjtl' }
      ],
      outColumns: [
        { text: '呼出成功', value: 'outsuccess' },
        { text: '呼出失败', value: 'outfail' },
        { text: '平均通话时长', value: 'outtime' },
        { text: '呼出接通率', value: 'outjtl' }
      ],
      allColumns: [
        { text: '转移通话', value: 'transfer' },
        { text: '总体接通率', value: 'alljtl' }
      ],
      data:[
        {
          insuccess: '0',
          giveup: '0',
          busy: '0',
          zxwj: '0',
          hsl: '0',
          pjthsc: '0',
          hrjtl: '0',
          outsuccess: '0',
          outfail: '0',
          outtime: '0',
          outjtl: '0',
          transfer: '0',
          alljtl: '0'
        }
      ]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $themeColor: aliceblue;
  .statistic-div{
    width:100%
  }
  .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;
  }
  .head-class{
    th{
      background-color: #66b1ff;
    }
  }
</style>