<!--通话统计曲线-->
<template>
  <div class="app-container">
    <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: 'CollectStatics',
  data() {
    return {
      listQuery: {
        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
        collReason: '', // 采集原因
        stId: '', // 采集站点
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        compare: false, // 是否进行对比
        startDate2: '', // 比较开始时间
        endDate2: '', // 比较结束时间
        analysisDate: 'hour' // 统计方式
      },
      chartShow: true,
      personTypeList: [],
      timeRange1: [],
      timeRange2: [],
      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
    }
  },
  computed: {
    labels() {
      const labels = {
        colCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集总量',
        colAlarmCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集报警量',
        colCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集总量',
        colAlarmCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集报警量'
      }
      return labels
    }
  },
  watch: {
    'listQuery.compare'(val) {
      if (val === true) {
        this.timeRange2 = []
      } else {
        this.fetchData()
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      // 刷新日期
      this.refreshDate()
      // 不需要对比
      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>
  .app-container{
    padding: 15px 10px 10px 10px;
    .chart-container{
      padding:0px;
      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;
      }
    }
  }
</style>