<template>
  <div>
  <div class="label">每月话务统计</div>
  <div id="servicestatistics" class="d1"></div>
</div>
</template>

<script>
  import * as DataSql from "../../../stores/DataSql";
  import co from "co";
  import {setBar} from "../../../stores/DrillECharts";
  import JinChengOperSummary from "../../SellReport/JinChengOperSummary";

  export default {
    name: "servicestatistics",
    data() {
      return {
        xc: '',
        timer: '',
        metaDate: [[],[],[]],
        metaDate2: [],
        metaDate3: [],
        servicestatistics1: '',
        servicestatistics2: '',
        servicestatistics3: '',
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
    setBar() {
         console.log('拿到的数据--------------------')
         console.log(this.metaDate)
        this.xc = this.$echarts.init(document.getElementById('servicestatistics'))
        var scale = this.$parent.$parent.$parent.scale
        var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];
        var legendData = ['月累计投诉', '月累计咨询', '月累计维修'];
        var serieData = [];
        var metaDate = this.metaDate
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[v],
            type: 'line',
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                  shadowBlur: 10,
                  shadowOffsetY: 15,
                }
              }
            },
            data: metaDate[v]
          }
          serieData.push(serie)
        }
        var colors = ["#6fd9d0", "#6e93e0", "#f7cb32", "#2EF7F3", "#FFFFFF"];

        this.xc.setOption({
          title: {
            text: '',
            textAlign: 'left',
            textStyle: {color: "#FFFFFF", fontSize: 20 * scale, fontWeight: "normal"}
          },
          legend: {
            itemGap: 20,
            width: '90%',
            show: true,
            right: '5%',
            bottom: '1%',
            data: legendData,
            y: 'top',
            // padding: [0, 25*scale, 0, 0],
            itemWidth: 14,
            itemHeight: 6,
            textStyle: {width: '20%', color: "#15dce2", fontSize: 12},
          },
          color: colors,
          grid: {left: '5%', top: "17%", bottom: "3%", right: "5%", width: '90%', containLabel: true},
          tooltip: {
            alwaysShowContent: true,
            backgroundColor: 'rgba(2, 59, 63, 0.45)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth: 0,
            hideDelay: 100,
            padding: 10 * scale,
            textStyle: {
              fontSize: 16 * scale
            },
            formatter: function (params) {
              if (params[0].data == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
              });
              return "<div style='text-align: center;height: 1px;font-weight: normal'>" + params[0].axisValue + '月</div><br/>' + result
            },
            trigger: 'axis',
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: '      月份\n(2018-2019)',
              type: 'category',
              nameTextStyle: {
                fontSize: 12 * scale,
                color: '#15dce2',
                padding: [38 * scale, 0, 0, -80 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '数量',
              nameTextStyle: {
                fontSize: 12 * scale,
                padding: [0, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {textStyle: {color: '#15dce2', fontSize: 14 * scale}},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
        let idx = -1;
        var dataLen = metaDate[0].length
        var oroptionmapjsonr_charts1 = this.xc
        this.timer = setInterval(() => {
          idx = (idx + 1) % dataLen;
          oroptionmapjsonr_charts1.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: idx
          });

        }, 3000)
      },
      selfAdaption() {
        let _this = this
        setTimeout(() => {
          window.addEventListener('resize', function () {
            _this.xc.resize()
          })
        }, 10)
      },
     async searchdata(year) {
        console.log("-------------------------传进来的年份为")
        console.log(year)
        var startDate = year + '-01-01'
        var endDate = year + 1 + '-01-01'
        let servicestatistics1 = await DataSql.getData(this, 'servicestatistics1', {
          startDate: startDate,
          endDate: endDate
        }, 'servicestatistics1')
        co(servicestatistics1)
       console.log(this.servicestatistics1)
        let servicestatistics2 = await DataSql.getData(this, 'servicestatistics2', {
          startDate: startDate,
          endDate: endDate
        }, 'servicestatistics2')
        co(servicestatistics2)
       console.log(this.servicestatistics2)
        let servicestatistics3 =await DataSql.getData(this, 'servicestatistics3', {
          startDate: startDate,
          endDate: endDate
        }, 'servicestatistics3')
        co(servicestatistics3)
       console.log(this.servicestatistics3)

      },
    },
    mounted() {
      // this.selfAdaption()
    },
    ready() {
      var date = new Date();
      this.searchdata(date.getFullYear())

    },

    watch: {
      'servicestatistics1': {
        deep: true,
        handler(val) {
          console.log('-----------------------------累计话务量')
          console.log('累计话务量', this.servicestatistics1)
          if (this.servicestatistics1.length === 0) {
            for (let i = 0; i < 12; i++) {
              this.metaDate[0][i] = 0
            }
          } else {
            for (let i = 0; i < this.servicestatistics1.length; i++) {
              this.metaDate[0][i] = this.servicestatistics1[i].count
            }
            for (let i = this.servicestatistics1.length; i < 12; i++) {
              this.metaDate[0][i] = 0
            }
          }
          this.setBar()
        }
      },
      'servicestatistics2': {
          deep: true,
          handler(val) {

            console.log('-----------------------------月累计咨询量')
            console.log('月累计咨询量', this.servicestatistics2)
            console.log('月累计咨询量长度', this.servicestatistics2.length)
            if (this.servicestatistics2.length === 0) {
              for (let i = 0; i < 12; i++) {
                this.metaDate[1][i] = 0
              }
            } else {
              for (let i = 0; i < this.servicestatistics2.length; i++) {
                this.metaDate[1][i] = this.servicestatistics2[i].count
              }
              for (let i = this.servicestatistics2.length; i < 12; i++) {
                this.metaDate[1][i] = 0
              }
            }
            this.setBar()

          }
        },
      'servicestatistics3': {
          deep: true,
          handler(val) {
            console.log('-----------------------------派单数')
            console.log('派单数', this.servicestatistics3)
            console.log('派单数长度', this.servicestatistics3.length)
            if (this.servicestatistics3.length === 0) {
              for (let i = 0; i < 12; i++) {
                this.metaDate[2][i] = 0
              }
            } else {
              for (let i = 0; i < this.servicestatistics3.length; i++) {
                this.metaDate[2][i] = this.servicestatistics3[i].count
              }
              for (let i = this.servicestatistics3.length; i < 12; i++) {
                this.metaDate[2][i] = 0
              }
            }
            this.setBar()
          },
        }
      },

  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    height: 8%;
  }

  #servicestatistics {
    height: 88%;
    width: 99%;
    padding: 1% 2% 3% 2%;
  }
</style>
