<template>
  <div id="active" ref="active_wrap"></div>
</template>
<script>
  // import moment from "moment";
  export default {
    data() {
      return {
        options: null,
        dateStrs: [],
        dataValue: [],
        curIndex:0
      }
    },
    props: ["form"],

    created() {
      this.getUserData();
    },
    mounted() {},

    watch: {
      'options': {
        handler(newval, oldval) {
          if (newval !== oldval) {
            this.$nextTick(() => {
              this.echartsBarInit();
            })
          }
        },
        deep: true,
      }
    },

    methods: {

      partenSureHandler(activeUser) {
        this.$emit('sureHandler', activeUser)
      },
      clearUserData() {
        this.dateStrs = []
        this.dataValue = []
      },
      async getUserData() {
        // let starttime = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD");// 昨天
        // let endtime = moment(moment().add(+5, 'days').startOf("day").valueOf()).format("YYYY-MM-DD");// 从今天开始往后推5天
        // console.log(this.params)
        // if(this.params.startDate == null){
        //     this.params.startDate = starttime
        // }
        // if(this.params.endDate == null){
        //     this.params.endDate = endtime
        // }
        let _this = this;
        let params = {
          params: {
            startDate: this.form.startDate,
            endDate: this.form.endDate,
            year: this.form.recentYear
          }
        };
        const res = await this.$get(this.$guiApi.guideHome.statistics, params);
        if (res.code == 0) {
          _this.dateStrs = [];
          _this.dataValue = [];
          let datas = res.data.list;
          datas.forEach((val, index) => {
            _this.dateStrs.push(val.dateStr);
            _this.dataValue.push(val);
          });
          let date = new Date;
          let month = date.getMonth()+1;
          month = (month<10 ? "0"+month:month); 
          let curDate = date.getFullYear() + '-' + month;
          // console.log('dateStrs',_this.dateStrs)
          // console.log('curDate',curDate)
          _this.dateStrs.forEach((item,index)=>{
            if(item == curDate && index>=7){
              _this.curIndex = index;
            }
          })
          this.partenSureHandler(res.data.activeUser);
          this.setPotion();
        }
      },

      echartsBarInit() {
        let myChart = this.$echarts.init(this.$refs.active_wrap);
        myChart.setOption(this.options)
      },

      setPotion() {
        let option = {
          dataZoom: [{
            type: 'inside',
            throttle: '50',
            minValueSpan: 6,
            start: 1,
            end: 50,
            zoomLock: true,
          }],
          tooltip: {
            trigger: 'axis',
            backgroundColor: '#000',
            textStyle: {
              align: 'center'
            },
            formatter: function (params, ticket, callback) {
              var text = params[0].data.dateStr + '<br> 活跃总人数：' + params[0].data.value + '（人）<br> 旧活跃人数：' + params[
                0].data.old + '（人）<br> 新活跃人数：' + params[0].data.new + '（人）'
              return text;
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 25,
              lineStyle: {
                color: '#000',
              },
              textStyle: {
                color: '#000',
              },
            },
            axisTick: {
              show: true,
              color: '#fff',
              lineStyle: {
                color: '#fff',
              }
            },
            splitLine: {
              show: false,
              interval: 0,
              lineStyle: {
                type: 'dashed',
                color: '#00ff00',
                width: 2
              }
            },
            boundaryGap: false,
            data: this.dateStrs
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#000',
              }
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: '#000',
              margin: 55,
              left: -8,
              textStyle: {
                align: 'left'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              interval: 1,
              lineStyle: {
                //  type: 'dashed'
              }
            },
            boundaryGap: true,
            splitNumber: 6
          },
          series: [{
            type: 'line',
            data: this.dataValue,
            lineStyle: {
              // color: '#377CFF',
              color: '#678BFF',
              shadowColor: 'rgba(200, 159, 43, 0.5)',
              shadowBlur: 10,
              shadowOffsetX:10,
              shadowOffsetY:20,
              width: 4
            },
            itemStyle: {
              normal: {
                color: "#377CFF", //拐点颜色
                width: 5,
                borderColor: '#377CFF',
                borderWidth: 0
              },
              emphasis: { // 鼠标经过时：
                color: "#377CFF", //拐点颜色
                width: 10,
                borderColor: '#377CFF',
                borderWidth: 10
              },
            },
            symbol: 'circle', //拐点样式
            symbolSize: 3 //拐点大小
          }],
          dataZoom:[{
            type: 'inside',//允许滑动
            show:true,      
            // startValue:0,//开头显示的值
            startValue:this.curIndex==0?0:this.curIndex - 6,
            endValue:this.curIndex==0?6:this.curIndex,//尾部显示的值
            // endValue:6,//尾部显示的值
            zoomLock:true,  //禁止缩放
            filterMode: 'empty'
          }]
        };
        this.options = option;
      }

    }
  }

</script>
<style lang='scss' scoped>
  #active {
    height: 100%;
  }

</style>
