<template>
  <div>
    <div class="label">用户数量增长情况</div>
    <div id="userincrease" class="d1"></div>
  </div>
</template>

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

  export default {
    name: "user-increase",
    props: {
      listenheight: String,
      f_filiale: String,
    },
    data() {
      return {
        xc: '',
        totaluser: [], //总用户数据
        civiluse: [],  //民用用户数据
        nociviluse: [], //非民用用户数据
        resdata: [],
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('userincrease'))
        var scale=this.$parent.$parent.$parent.scale
        var xAxisData = [];
        let data0 = []
        let data1 = []
        let data2 = []
        for (var i = this.totaluser.length - 2; i > -1; i--) {
          xAxisData.push(this.totaluser[i].name)
          data0.push(this.totaluser[i].value)
          data1.push(this.civiluse[i].value)
          data2.push(this.nociviluse[i].value)
        }
        xAxisData.push('')
        var serieData = [];
        var metaDate = []
        metaDate.push(data0)
        metaDate.push(data1)
        metaDate.push(data2)
        var legendData = ['总用户', '民用用户', '非民用用户'];
        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:0,
                  // shadowOffsetY: 15 * scale,
                }
              }
            },
            data: metaDate[v]
          }
          serieData.push(serie)
        }
        var colors = ["#6fd9d0", "#f7cb32", "#6e93e0"];

        this.xc.setOption({
          title: {
            text: '',
            textAlign: 'left',
            textStyle: {color: "#FFFFFF", fontSize: 20 * scale, fontWeight: "normal"}
          },
          legend: {
            itemGap: 20,
            width: '90%',
            show: true,
            right:'2%',
            data: legendData,
            y: '8%',
            padding: [0, 25, 0, 0],
            itemWidth: 14 ,
            itemHeight: 6 ,
            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 },
          },
          color: colors,
          grid: {left: '5%', top: "22%", bottom: "2%", 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:18*scale
              },
            formatter: function (params) {
              if (params[0].data == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <span style='color:#e1e52a;font-weight: bolder'>" + item.value + "</span></br>";
              });
              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '年</div><br/>' + result
            },
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;',
            axisPointer: {lineStyle: {width: 0}},
          },
          xAxis: [
            {
              name: '      年',
              type: 'category',
              nameTextStyle: {
                fontSize: 12 * scale,
                color: '#15dce2',
                padding: [28*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}, formatter: function (params) {
                  if (params > 999) {
                    return params / 10000 + "万"
                  }
                  // else if(params>999){
                  //    return params/10000+"万"
                  //  }
                  else
                    return params
                }
              },
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
        let idx = -1;
        var dataLen=serieData.length
        var oroptionmapjsonr_charts1=this.xc
        this.timer= setInterval(()=>{
          idx = (idx+ 1) % dataLen;
          oroptionmapjsonr_charts1.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: idx
          });

        }, 3000)

      },
      //请求后台数据
      searchdata() {
        var self = this
        let sqldata = DataSql.getData(this,'userincrease',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
        co(sqldata)
      },
      resize() {
        // this.$parent.$parent.changeresize(this.xc)
      }
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          var s=0
          if(this.resdata.length>5){
            s=6
          }else {
            s=this.resdata.length
          }
          for (var i = 0; i < s; i++) {
            let item0 = {}
            let item1 = {}
            let item2 = {}
            item0.name = this.resdata[i].year
            item0.value = this.resdata[i].totalnum
            this.totaluser.push(item0)
            item1.name = this.resdata[i].year
            item1.value = this.resdata[i].civiluse
            this.civiluse.push(item1)
            item2.name = this.resdata[i].year
            item2.value = this.resdata[i].nociviluse
            this.nociviluse.push(item2)
          }
        }
      },
      // 监听用户数据并进行绘图
      'totaluser': {
        deep: true,
        handler(val) {
          var increase = 0
          var year = Util.toStandardDateString().toString().substring(0, 4)
          var l = 0
          for (var i = 0; i < this.totaluser.length; i++) {
            if (this.totaluser[i].name != year) {
              increase = increase + this.totaluser[i].value
              l++
            }
            if (l == 5) {
              break
            }
          }

          var s = increase / 5
          var index = s.toString().indexOf('.')
          if (index != -1) {
            s = s.toString().substring(0, index)
          }

          this.$parent.increaseuser = parseInt(s)
          this.setBar()
          this.$parent.loaddata++
        }
      },
      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      },
    },
    ready() {
      // 拼接sql，请求后台
      this.searchdata()
    },
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 1.85rem;
    color: #fff;
    width: 100%;
    height: 9%;
  }

  .callstatic {
    /*padding: 0% 1%;*/
  }

  .d1 {

  }

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