<!--通话统计曲线-->
<template>
  <div class="statistic-div box" title="按小时话务量统计">
    <div v-show="chartShow" class="chart-container">
      <div class="chart-body">
        <ve-line ref="linechart" :loading="loading" :title="title" :data="chartData" :settings="chartSettings" :extend="extend"/>
      </div>
    </div>
  </div>
</template>

<script>

import { callStatisticsByHour } from '@/api/statistics'

export default {
  name: 'CallLine',
  props: {
    query: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      chartShow: true,
      personTypeList: [],
      startDateDisabled: {
        disabledDate: ''
      }, // 限制可选范围
      endDateDisabled: {
        disabledDate: ''
      }, // 限制可选范围
      chartData: {
        columns: ['hour', 'totalCall'],
        rows: []
      }, // 表格数据
      chartSettings: {
        labelMap: {
          'totalCall': '总话务量',
          'successCall': '成功接通话务量',
          'hour': '时间'
        },
        metrics: ['totalCall', 'successCall'],
        dimension: ['hour']
      },
      extend: {
        series: {
          smooth: false
        },
        yAxis: {
          minInterval: 1
        }
      },
      title: {
        text: '',
        show: false
      },
      rerenderFlag: false, // 需要重绘的标志
      loading: true
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      this.loading = true
      callStatisticsByHour(this.query).then(response => {
        if (response.code === 200) {
          response.data = [
            { totalCall: 0, successCall: 0, hour: '00:00:00' },
            { totalCall: 10, successCall: 8, hour: '01:00:00' },
            { totalCall: 20, successCall: 13, hour: '02:00:00' },
            { totalCall: 0, successCall: 0, hour: '03:00:00' },
            { totalCall: 0, successCall: 0, hour: '04:00:00' },
            { totalCall: 0, successCall: 0, hour: '05:00:00' }
          ]
          this.chartData.rows = response.data
          this.judgeMaxValue(response.data)
          if (this.rerenderFlag) {
            this.$refs['linechart'].echarts.resize()
          }
          console.log('refreshChart')
          this.loading = false
        }
      })
    },
    // 判断曲线的最大值
    judgeMaxValue(data) {
      let maxValue = -1
      // 非对比数据
      maxValue = Math.max.apply(Math, data.map(function(item) { return item.totalCall }))
      if (maxValue < 10) {
        this.extend.yAxis = { max: 10 }
      } else {
        this.extend.yAxis = {}
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $themeColor: aliceblue;
  .statistic-div{
    width:100%;
    .chart-container{
    padding-top:10px;
    /*border: 1px solid #d3dce6;*/
    .chart-tools{
      background-color: #f2f2f2;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 5px;
      .chart-tool-button{
        padding: 5px;
        line-height: 16px;
        margin-top:5px;
        font-size:13px;
      }
      .form-item{
        width:200px;
        float:left;
        margin-right: 10px;
        margin-top:10px;
        margin-bottom:10px;
      }
      .chart-tool-button:hover{
        background-color: #8cc5ff;
        cursor: pointer;
        color:white
      }
      .chart-tool-button:active{
        background-color: #8cc5ff;
        color:white
      }
      .editor--datetimerange.el-input__inner{
        width: 300px;
      }
    }
    .chart-title{
      text-align: center;
      font-size:19px;
      font-weight:600;
      margin-top: 20px
    }
    .chart-btns{
      padding-right:50px;
      text-align: right;
    }
    .chart-body{
      padding:15px 50px;
      height:400px;
    }
  }
    .statistic-table-div{
      padding:30px 70px 60px;
    }
    .introduce{
      color:dimgrey;
      margin: 0px 20px;
      .el-image{
        margin: 30px 10px;
      }
    }
  }
  .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;
  }
</style>