<template>
  <div class="box">
    <div class="boxTop">
      <img class="img" src="../images/GM.png" alt="" srcset="" />
      <span>数据规模</span>
      <div class="total">
        总计:<span>{{ total }}</span>
      </div>
    </div>
    <div class="boxBot" ref="Echarts">
      <div
        id="echart1"
        style="width: 100%; height: 100%"
        v-loading="isLoading"
      ></div>
    </div>
  </div>
</template>
<script>
import { getDataScale } 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() {
      this.isLoading = true;
      var xData = [];
      var yData = [];
      const data = [];
      await getDataScale({
        deptIndex: "1",
        searchBeginTime: "2022-01-01",
        searchEndTime: "2022-01-01",
      }).then((res) => {
        res.data.forEach((item, i) => {
          this.total = this.total + item.dataStatis;
          if (i != 0) {
            item.timeId = item.timeId.slice(5);
          }
          xData.push(item.timeId);
          yData.push(item.dataStatis);
        });
      });
      let _this = this;
      let echarts = require("echarts");
      if (_this.myChart != null) {
        _this.myChart.dispose();
      }
      let domID1 = document.getElementById("echart1");
      setTimeout(() => {
        (domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
          (domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
      }, 0);
      _this.myChart = echarts.init(domID1);
      this.isLoading = false;
      let option = {
        //backgroundColor:'#12193a',
        color: ["#f0c725", "#16f892"],
        title: {
          left: "center",
          text: "南京灿能数据规模变化",
          textStyle: {
            color: "#FFFFFF",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["语文"],
          x: "center",
          top: "25",
          textStyle: {
            color: "#c1cadf",
            fontSize: 10,
          },
        },
        grid: {
          left: "1%",
          right: "6.5%",
          top: "16%",
          bottom: "0%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          x: "right",
          y: "center",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisLine: {
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisLabel: {
              show: true,
              color: "#00ffff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            //name: 'GB',
            nameTextStyle: {
              color: "#00ffff",
              align: "right",
              lineHeight: 10,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#00ffff",
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "单位:GB",
            nameTextStyle: {
              color: "#00ffff",
              fontSize: 12,
              align: "right",
              lineHeight: 10,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "数据量",
            type: "line",
            smooth: true,
            symbolSize: 8,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(240,199,37,0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(15,253,195,0.5)",
                },
              ]),
            },
            data: yData,
            barWidth: "30%",
            lineStyle: { normal: { color: "#f0c725" } },
            itemStyle: {
              color: "#07d8fd",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#07d8fd",
                fontSize: 12,
              },
            },
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 150,
                },
              ],
              label: {
                color: "#07d8fd",
              },
            },
          },
        ],
      };
      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;
          //console.log(app.currentIndex);
          // 高亮当前图形
          _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>
