<template>
  <div class="box">
    <div class="boxTop">
      <img
        class="img"
        src="../images/d045d87176109fc1dfb3b09a583fea5.png"
        alt=""
        srcset=""
      />
      <span>灿能用户规模</span>
      <div class="total">
        总计:<span>{{ total }}</span>
      </div>
    </div>
    <div class="boxBot" ref="Echarts">
      <div
        id="echart"
        style="width: 100%; height: 100%"

        v-loading="isLoading"
      ></div>
    </div>
  </div>
</template>
<script>
import { getUserScale } from "@/api/center/DropEvent.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      zoom: undefined, //图表焦点校验
      h: undefined,
      isLoading: false,
      total: 0,
      myChart: null,
      time: null,
    };
  },
  created() {},

  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    this.$nextTick(() => {
      this.province();
      setInterval(() => {
        clearInterval(this.time);

        this.province();
      }, 60000 * 5);
    });
  },

  methods: {
    //echarts图
    async province() {
      let xData = [];
      let yData1 = [];
      let yData2 = [];
      await getUserScale({
        deptIndex: "1",
        searchBeginTime: "2022-01-01",
        searchEndTime: "2022-01-01",
      }).then((res) => {
        var maxNum = res.data[0].incrementNum;
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].incrementNum > maxNum) {
            maxNum = res.data[i].incrementNum;
          }
          this.total = maxNum;
        }
        res.data.forEach((item, i) => {
          if (i != 0) {
            item.timeId = item.timeId.slice(5);
          } else if (i == 0) {
            let month = item.timeId.slice(5);
            let year = item.timeId.slice(0, 4);
            item.timeId = month + "\n" + "(" + year + ")";
          }
          xData.push(item.timeId);
          yData1.push(item.monthIncrementNum);
          yData2.push(item.incrementNum);
        });
      });

      this.isLoading = true;

      // const data = await getUserScale();
      let _this = this;
      let echarts = require("echarts");
    let domID1 = document.getElementById("echart");
      setTimeout(() => {
        (domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
          (domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
      }, 0);
      if (_this.myChart != null) {
        _this.myChart.dispose();
      }
      _this.myChart = echarts.init(domID1);
      this.isLoading = false;
      let option = {
        //backgroundColor: '#ddd',
        grid: {
          top: "40px", // 等价于 y: '16%'
          left: "35px",
          right: "45px",
          bottom: "30px",
        },
        color: function (params) {
          let colorArr =
            params.value > 0 ? ["#BFE905", "#03EEFF"] : ["#03EEFF", "#BFE905"];
          return new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: colorArr[0], // 0% 处的颜色
              },
              {
                offset: 1,
                color: colorArr[1], // 100% 处的颜色
              },
            ],
            false
          );
        },
        legend: {
          top: "2%",
          //orient: 'vertical',
          textStyle: {
            color: "#00ffff",
          },
          data: ["累计增量", "当月增量"],
        },
        tooltip: {
          showContent: true,
          trigger: "axis",
          backgroundColor: "rgba(8,36,68,.7)",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          color: "#00ffff",
          textStyle: {
            color: "#00ffff",
          },
          formatter: function (params) {
            var str = "";
            let year = xData[0].slice(4, 8);
            let month = params[0].axisValue.slice(0, 2);
            str += year + "-" + month + "<br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName !== "") {
                str += params[i].seriesName + ":" + params[i].value + "<br/>";
              }
            }
            return str;
          },
        },
        xAxis: [
          {
            name: "时间",
            nameTextStyle: {
              color: "#07FCF0",
              // top:'5%',
              fontSize: 12,
            },
            type: "category",
            color: "#00ffff",
            data: xData,
            axisLabel: {
              margin: 4,
              color: "#00ffff",
              textStyle: {
                fontSize: 12,
              },
              // rotate: 30,
            },
            axisLine: {
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 5,
            min: 0,
            max: Math.max(...yData1) + ((Math.max(...yData1) % 5)==0?0:5-Math.max(...yData1) % 5),
            interval: (Math.max(...yData1) + ((Math.max(...yData1) % 5)==0?0:5-Math.max(...yData1) % 5)) / 5,
            name: "当月增量(个)",
            minInterval: 1,
            nameTextStyle: {
              color: "#07FCF0",
              fontSize: 10,
            },
            axisLabel: {
              color: "#00ffff",
              textStyle: {
                fontSize: 12,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#00ffff",
                type: "dashed",
              },
            },
          },
          {
            minInterval: 1,
            type: "value",
            name: "累计增量(个)",
            splitNumber: 5,
            min: 0,
            max: Math.max(...yData2) + ((Math.max(...yData2) % 5)==0?0:5-Math.max(...yData2) % 5),
            interval: (Math.max(...yData2) + ((Math.max(...yData2) % 5)==0?0:5-Math.max(...yData2) % 5))/ 5,
            nameTextStyle: {
              color: "#07FCF0",
              fontSize: 10,
            },
            axisLabel: {
              color: "#00ffff",                                                                                           
              textStyle: {
                fontSize: 12,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#00ffff",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: "当月增量",
            data: yData1,
            barWidth: "15px",
            // itemStyle: {
            //   normal: {
            //     color: function (params) {
            //       return new echarts.graphic.LinearGradient(
            //         0,
            //         0,
            //         0,
            //         1,
            //         [
            //           {
            //             offset: 0,
            //             color: "#BFE905", // 0% 处的颜色
            //           },
            //           {
            //             offset: 1,
            //             color: "#03EEFF", // 100% 处的颜色
            //           },
            //         ],
            //         false
            //       );
            //     },
            //     barBorderRadius: [30, 30, 15, 15],
            //   },
            // },
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#BFE905" }, //开始的颜色
                { offset: 1, color: "#03EEFF" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
              barBorderRadius: [30, 30, 15, 15],
            },
            barCategoryGap: "60%", //柱状图间距

            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#333",
                position: "top",
              },
            },
          },
          {
            data: yData2,
            type: "line",
            smooth: false,
            name: "累计增量",
            showSymbol: true,
            yAxisIndex: 1,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              color: "#05FFDF",
              width: 2,
              shadowColor: "rgba(0, 0, 0, 0.3)", //设置折线阴影
              //shadowBlur: 15,
              // shadowOffsetY: 20,
            },
          },
        ],
      };
      //   // _this.myChart.resize();
      //   let _this = this;
      //   _this.$erd.listenTo(_this.$refs.fg, (element) => {
      //     _this.$nextTick(() => {
      //       _this.myChart.resize();
      //     });
      //   });
      //   window.onresize = function () {
      //     _this.myChart.resize();
      //   };
      option && _this.myChart.setOption(option, true)
window.echartsArr.push(_this.myChart);

      setTimeout(function () {
        _this.myChart.resize();
        let app = {
          currentIndex: -1,
        };

        _this.time = setInterval(function () {
          var dataLen = option.series[0].data.length;

          // 取消之前高亮的图形
          _this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          app.currentIndex = (app.currentIndex + 1) % dataLen;
          // 高亮当前图形
          _this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          // 显示 tooltip
          _this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
        }, 2000);
      }, 0);
    },
  },
  beforeDestroy() {
    for (let i = 1; i < 10000; i++) {
      clearInterval(i);
    }
  },
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
  font-family: sszh;
  src: url("../fonts/sszh.ttf"); /* IE9+ */
}
.box {
  width: 100%;
  height: 100%;
  .boxTop {
    position: relative;
    display: flex;
    align-items: center;
    height: 8%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 0.85rem;
    line-height: 8%;
    letter-spacing: 1px;
    color: #07d8fd;
    cursor: pointer;
    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
    .img {
      height: 100%;
      padding: 0 1.5%;
      cursor: pointer;
    }
    .total {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 0.85rem;
      color: rgb(0, 255, 0);
      transform: translate(-50%, -50%);
      span {
        font-family: electricFont;
        font-size: 1.3rem;
        color: #07d8fd;
      }
    }
  }
  .boxBot {
    height: 90%;
    // background-color: rgb(41, 16, 16);
  }
}
</style>
