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

<script>
export default {
  props: {
    dataset: {
      type: Object,
      default: () => {}
    },
    endValue: {
      type: Number,
      default: 10
    },
    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;
      // 获取或者初始化 ECharts 实例
      this.myChart = this.$echarts.getInstanceByDom(dom);
      if (!this.myChart) {
        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:4px'><span style='margin-right:20px'>${
              params[0].seriesName
            }</span>${params[0].value.value}</div>`;
          }
        },
        // dataZoom: [
        //   {
        //     type: "inside",
        //     show: false,
        //     startValue: 0,
        //     endValue: this.endValue - 1,
        //   },
        // ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: '#5A5C60',
            formatter: (name) => {
              let formatterName = name.split('-');
              return `${formatterName[1]}-${formatterName[2]}`;
            }
          },
          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,
          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;
      //   }
      //   this.myChart.setOption(option);
      // }, 2000);

      // // 绑定鼠标移入事件
      // this.myChart.on("mousemove", () => {
      //   console.log(111);
      //   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;
      //     }
      //     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>
