<!--呼入呼出统计-->
<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 five"
              :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 five"
              :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 five"
              :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 five"
              :key="column.text"
              :prop="column.value"
              :label="column.text"
              align="center"/>
          </el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SatisfiedStatics',
  data: function() {
    return {
      five: [
        { text: '通话量', value: 'fivethl' },
        { text: '百分比', value: 'fivebfb' }
      ],
      four: [
        { text: '通话量', value: 'fourthl' },
        { text: '百分比', value: 'fourbfb' }
      ],
      three: [
        { text: '通话量', value: 'threethl' },
        { text: '百分比', value: 'threebfb' }
      ],
      two: [
        { text: '通话量', value: 'twothl' },
        { text: '百分比', value: 'twobfb' }
      ],
      data:[
        {
          fivethl: '0',
          fivebfb: '100%',
          fourthl: '0',
          fourbfb: '100%',
          threethl: '0',
          threebfb: '100%',
          twothl: '0',
          twobfb: '100%'
        }
      ]
    }
  }
}
</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>
<style rel="stylesheet/scss" lang="scss">
  $themeColor: #96C7ED;
  $boderColor: #c3dff4;
  $leafColor: #dcecf9;
  .head-class{
    color: #000000;
    font-weight: normal !important;
    th{
      background-color: $themeColor !important;
      font-weight: normal !important;
      border-color: $boderColor !important;
    }
    th.is-leaf{
      background-color: $leafColor !important;
    }
    th.darker-head{
      background-color: $themeColor !important;
    }
  }
  .statistic-class{
    td{
      border-color: $boderColor !important;
    }
  }
</style>