<template>
  <div class="h-full w-full" ref="MyEchart"></div>
</template>

<script>
export default {
  props: {
    dataset: {
      type: Object,
      default: () => {},
    },
    endValue: {
      type: Number,
      default: 6,
    },
    color: {
      type: String,
      default: "#0857E8",
    },
  },
  data() {
    return {
      myChart: null,
      timer: null,
    };
  },
  watch: {
    dataset: {
      handler(newVal) {
        this.$nextTick(() => {
          this.initChart(newVal);
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    // 适配
    adapterEcharts() {
      this.myChart && this.myChart.resize();
    },
    initChart(dataset) {
      let data = dataset.source || [];
      let dom = this.$refs.MyEchart;
      this.myChart = this.$echarts.init(dom);
      let option = {
        grid: {
          top: "15%",
          left: "15%",
          right: "5%",
          bottom: "12%",
        },
        // 鼠标移入信息查看
        tooltip: {
          trigger: "axis",
          borderWidth: 0,
          formatter: (params) => {
            return `${
              params[0].value.name
            }<br/><div style='margin-top:4px;padding:4px 8px;background:${this.hexToRgba(
              this.color,
              0.1
            )};color:${this.color}';border-radius:10px>
            <span style='margin-right:10px'>${params[0].seriesName}</span>
            ${params[0].value.value}</div>`;
          },
        },
        dataZoom: [
          {
            // 开启数据平移
            type: "inside",
            show: true,
            startValue: 0,
            endValue: this.endValue - 1,
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#5A5C60",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E0E0E0",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E0E0E0",
            },
          },
          axisPointer: {
            lineStyle: {
              color: this.hexToRgba(this.color, 1),
            },
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 3, // 配置 Y 轴数值间隔
          axisLabel: {
            color: "#666",
          },
          nameTextStyle: {
            color: "#5A5C60",
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E0E0E0",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "数据量",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbolSize: 8,
            lineStyle: {
              color: this.hexToRgba(this.color, 1),
            },
            itemStyle: {
              color: this.hexToRgba(this.color, 1),
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.hexToRgba(this.color, 0.4),
                  },
                  {
                    offset: 0.6,
                    color: this.hexToRgba(this.color, 0.1),
                  },
                  {
                    offset: 1,
                    color: "#0000",
                  },
                ],
              },
            },
          },
        ],
        dataset,
      };
      this.myChart.setOption(option);
      // 适配
      window.addEventListener("resize", this.adapterEcharts);
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (option.dataZoom[0].endValue >= data.length - 1) {
          option.dataZoom[0].endValue = this.endValue - 1;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue += 1;
          option.dataZoom[0].startValue += 1;
        }
        option && this.myChart.setOption(option);
      }, 2000);
      //鼠标移入组件时停止轮播
      this.myChart.on("mousemove", () => {
        clearInterval(this.timer); //清除循环
      });
      //鼠标移出组件时恢复轮播
      this.myChart.on("mouseout", () => {
        clearInterval(this.timer); //清除循环
        this.timer = setInterval(() => {
          if (option.dataZoom[0].endValue >= data.length - 1) {
            option.dataZoom[0].endValue = this.endValue - 1;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue += 1;
            option.dataZoom[0].startValue += 1;
          }
          option && this.myChart.setOption(option);
        }, 2000);
      });
    },
    hexToRgba(hex, opacity) {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.adapterEcharts);
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped></style>
