<template>
  <div>
  <div class="label">客户满意度统计</div>
  <div id="con" ></div>
</div>
</template>

<script>
    import * as DataSql from '../../../../stores/DataSql'
    import co from 'co'

    export default {
    name: "contentmentstatistics",
    data() {
      return {
        xc: '',
        timer:'',
        // newyeardata: [],
        // oldyeardata: [],
        newyeardata :[{name:'1',value:12},{name:'2',value:12},{name:'3',value:12},{name:'4',value:12},{name:'5',value:12},{name:'6',value:12},{name:'7',value:12},{name:'8',value:12},{name:'9',value:12},{name:'10',value:12},{name:'11',value:12},{name:'12',value:12}],
        oldyeardata :[{name:'1',value:2},{name:'2',value:2},{name:'3',value:2},{name:'4',value:12},{name:'5',value:2},{name:'6',value:2},{name:'7',value:2},{name:'8',value:2},{name:'9',value:2},{name:'10',value:2},{name:'11',value:2},{name:'12',value:2}],
        // oldyeardata :[111,22,33,44,55,66,77,88,99,10,11,12],
          resdata:[],
          resdataold:[],
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
       async setBar() {
          this.$parent.loadnum++
          console.log(this.newyeardata)
          console.log(this.oldyeardata)
        var metaDate = []
        var s1=[]
        var s2=[]

        this.oldyeardata.forEach(function (s) {
          s1.push(s.value)
        })
        this.newyeardata.forEach(function (s) {
          s2.push(s.value)
        })
        metaDate.push(s1)
        metaDate.push(s2)
        console.log('组织后的数据=====================')
        console.log(metaDate)
        this.xc = await this.$echarts.init(document.getElementById('con'))
        var scale=this.$parent.$parent.scale
          console.log(this.$parent.$parent.scale,'as5484')
        var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];
        var legendData = ['话务满意度', '维修满意度'];
        var serieData = [];

        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 = ["#f7cb32", "#6fd9d0"];
        console.log(serieData,'saa')
        this.xc.setOption({
          title: {
            text: '',
            textAlign: 'left',
            textStyle: {color: "#FFFFFF", fontSize: 20 , fontWeight: "normal"}
          },
          legend: {
              // x:'4%',
              // y: '10%',
              // right:'2%',
              itemGap: 20,

              // padding: [0, 25, 0, 0],
            bottom:'1%',
            top:'4%',
            right:'5%',
            data: legendData,
            // y: 'top',
            // padding: [0, 25*scale, 0, 0],
            itemWidth: 14 ,
            itemHeight: 6 ,
            textStyle: {color: "#15dce2", fontSize: 12 },
          },
          color: colors,
          grid: {left: '5%', top: "20%", bottom: "12%", right: "5%", containLabel: true},
          tooltip: {
              show: true,
              alwaysShowContent:true,
              backgroundColor:'#01396d',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
              padding:10,
              textStyle:{
                  fontSize:16
              },
            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      2019',
              type: 'category',
              nameTextStyle: {
                fontSize: 12 ,
                color: '#15dce2',
                padding: [35, 0, 0, -45 ],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 }},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '百分比:%',
              nameTextStyle: {
                fontSize: 12 ,
                padding: [0, 10 , 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {textStyle: {color: '#15dce2', fontSize: 14 }},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 }},
            },
          ],
          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)
      },
        linesql(year, resultname) {
            // 拼接sql，请求后台
            let sqldata = DataSql.getData(this,  'getAgree',{f_agree_type:year}, resultname)
            co(sqldata)
        },
        datapress(data, parm) {
            console.log(data, parm, '维修话务同比')
            var year = '2019'

            var month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
            for (var i = 0; i < 12; i++) {
                let item = {}
                var l = 0
                for (var j = 0; j < data.length; j++) {
                    if (year + '-' + month[i] == data[j].name.trim()) {
                        l++
                        item.name = month[i]
                        item.value = data[j].value
                        this[parm].push(item)
                    }
                }
                if (l == 0) {
                    item.name = month[i]
                    item.value = 0
                    this[parm].push(item)
                }
            }
        },
        searchdata(){
            this.linesql('话务满意', "resdata")
            this.linesql('维修满意', "resdataold")
        },
        resize() {
            console.log('刷新话务统计')
            if(this.timer!=''){
                this.resdata.splice(0,this.resdata.length)
                this.resdataold.splice(0,this.resdataold.length)
                this.newyeardata.splice(0,this.newyeardata.length)
                this.oldyeardata.splice(0,this.oldyeardata.length)
                clearInterval(this.timer);
            }
            this.searchdata()

        },
    },
      watch: {
          'resdataold': {
              deep: true,
              handler(val) {
                  if(this.resdataold.length<1){
                      return
                  }
                  this.datapress(this.resdataold, "oldyeardata")
              }
          },
          'resdata': {
              deep: true,
              handler(val) {
                  if(this.resdata.length<1){
                      return
                  }
                  this.datapress(this.resdata, "newyeardata")
              }
          },
          // 监听用户数据并进行绘图
          'newyeardata': {
              deep: true,
              handler(val) {
                  if (this.newyeardata.length > 0 && this.oldyeardata.length > 0) {
                      this.setBar()
                      this.$parent.loaddata++
                  }
              }
          },
          // 监听用户数据并进行绘图
          'oldyeardata': {
              deep: true,
              handler(val) {
                  if (this.newyeardata.length > 0 && this.oldyeardata.length > 0) {
                      this.setBar()
                      this.$parent.loaddata++
                  }
              },
              immediate: true
          },
      },
    ready() {
        // this.searchdata()
      //   console.log('满意度')
      this.setBar()
    }
  }
</script>

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

  #contentmentstatistics {
    height: 91%;
    width: 99%;
    padding: 4% 2% 3% 2%;
  }

</style>
