<!--通话统计曲线-->
<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 { collectStatics, collectStaticsContrast, exportCollectStatics, exportCollectStaticsContrast } from '@/api/statistics'

export default {
  name: 'CallLine',
  data() {
    return {
      listQuery: {
        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
        collReason: '', // 采集原因
        stId: '', // 采集站点
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        compare: false, // 是否进行对比
        startDate2: '', // 比较开始时间
        endDate2: '', // 比较结束时间
        analysisDate: 'hour' // 统计方式
      },
      chartShow: true,
      personTypeList: [],
      startDateDisabled: {
        disabledDate: ''
      }, // 限制可选范围
      endDateDisabled: {
        disabledDate: ''
      }, // 限制可选范围
      chartData: {
        columns: ['colDate', 'colCount'],
        rows: []
      }, // 表格数据
      chartSettings: {
        labelMap: {
          'colCount': '总话务量',
          'colAlarmCount': '成功接通话务量',
          'colDate': '时间'
        },
        metrics: ['colCount', 'colAlarmCount'],
        dimension: ['colDate']
      },
      extend: {
        series: {
          smooth: false
        },
        yAxis: {
          minInterval: 1
        }
      },
      title: {
        text: '',
        show: false
      },
      rerenderFlag: false, // 需要重绘的标志
      loading: true
    }
  },
  watch: {
    'listQuery.compare'(val) {
      if (val === true) {
        this.timeRange2 = []
      } else {
        this.fetchData()
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      // 不需要对比
      const params = {
        analysisType: this.listQuery.analysisType,
        startDate: this.listQuery.startDate,
        endDate: this.listQuery.endDate,
        collReason: this.listQuery.collReason, // 采集原因
        analysisDate: this.listQuery.analysisDate,
        stId: this.listQuery.stId // 采集站点
      }
      this.loading = true
      this.chartData.rows = [
        { colCount: 0, colAlarmCount: 0, colDate: '00:00:00' },
        { colCount: 10, colAlarmCount: 8, colDate: '01:00:00' },
        { colCount: 20, colAlarmCount: 13, colDate: '02:00:00' },
        { colCount: 0, colAlarmCount: 0, colDate: '03:00:00' },
        { colCount: 0, colAlarmCount: 0, colDate: '04:00:00' },
        { colCount: 0, colAlarmCount: 0, colDate: '05:00:00' }
      ]
      // collectStatics(params).then(response => {
      //   if (response.code === 200) {
      //     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
      // 非对比数据
      if (!this.listQuery.compare) {
        maxValue = Math.max.apply(Math, data.map(function(item) { return item.colCount }))
      } else { // 对比数据
        const maxValue1 = Math.max.apply(Math, data.map(function(item) { return item.colCount1 }))
        const maxValue2 = Math.max.apply(Math, data.map(function(item) { return item.colCount2 }))
        maxValue = maxValue1 > maxValue2 ? maxValue1 : maxValue2
      }
      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>