<!--呼入呼出统计-->
<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="10秒接通" align="center">
            <el-table-column
              v-for="column in one"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>
          <el-table-column label="20秒接通" align="center">
            <el-table-column
              v-for="column in two"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>
          <el-table-column label="30秒接通" align="center">
            <el-table-column
              v-for="column in three"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>
          <el-table-column label="30秒以上接通" align="center">
            <el-table-column
              v-for="column in four"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { callSuccessStatistics } from '@/api/statistics'
export default {
  name: 'WaitStatics',
  props: {
    query: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data: function() {
    return {
      one: [
        { text: '数量', value: 'onethl' },
        { text: '百分比', value: 'onebfb' }
      ],
      two: [
        { text: '数量', value: 'twothl' },
        { text: '百分比', value: 'twobfb' }
      ],
      three: [
        { text: '数量', value: 'threethl' },
        { text: '百分比', value: 'threebfb' }
      ],
      four: [
        { text: '数量', value: 'fourthl' },
        { text: '百分比', value: 'fourbfb' }
      ],
      data: [
        {
          onethl: '0',
          onebfb: '100%',
          twothl: '0',
          twobfb: '100%',
          threethl: '0',
          threebfb: '100%',
          fourthl: '0',
          fourbfb: '100%'
        }
      ]
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      callSuccessStatistics(this.query).then(response => {
        this.listLoading = false
        const data = response.data
        for (const item of data) {
          if (item.type === '10秒接通') {
            this.data[0].onethl = item.num
            this.data[0].onebfb = item.rate
          } else if (item.type === '20秒接通') {
            this.data[0].twothl = item.num
            this.data[0].twobfb = item.rate
          } else if (item.type === '30秒接通') {
            this.data[0].threethl = item.num
            this.data[0].threebfb = item.rate
          } else if (item.type === '30秒以上接通') {
            this.data[0].fourthl = item.num
            this.data[0].fourbfb = item.rate
          }
        }
      })
    }
  }
}
</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>