<template>
  <div :id="domId" ref="lineYStack"></div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  name: "LineYStack",
  props: {
    store: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      chartsInfo: {},
      seriesData: [],
      isDone: false
    };
  },
  mounted() {
    if (this.erd) {
      return;
    }
    const erd = elementResizeDetectorMaker();
    const that = this;
    this.erd = erd.listenTo(document.getElementById(this.domId), function(
      element
    ) {
      that.resizeCharts();
    });
  },
  unmounted() {
    if (this.erd) {
      this.erd.uninstall(document.getElementById(this.domId));
    }
  },
  computed: {
    domId() {
      return "line_y_stack_" + (Math.random() * 90000000000).toFixed(0);
    }
  },
  created() {
    this.$nextTick(() => {
      this.checkApply();
      window.addEventListener("scroll", this.checkApply, true);
      window.addEventListener("resize", this.resizeCharts, true);
    });
  },
  methods: {
    /**
     * @description 检测图表是否需要生成
     */
    checkApply() {
      if (!this.isDone && this.store.showCharts(this.$refs.lineYStack)) {
        this.isDone = true;
        this.initChartsInfo();
      }
    },
    /**
     * @description 初始化图表DOM信息
     */
    initChartsInfo() {
      this.chartsInfo = window.$charts.init(
        document.getElementById(this.domId)
      );
      this.dataFormat();
      this.initChartsDataInfo();
    },
    /**
     * @description 图表数据处理
     */
    dataFormat() {
      const flag = this.store.getXDataType === "object";
      if (flag) {
        this.store.getXData.map(item => {
          this.seriesData.push({
            name: item[this.store.getDataLabel],
            type: "line",
            areaStyle: {},
            stack: this.store.getStackLabel,
            data: item[this.store.getDataKey]
          });
        });
      }
    },
    /**
     * @description 初始化图表的数据信息
     */
    initChartsDataInfo() {
      const _this = this;
      _this.chartsInfo.setOption(
        {
          title: _this.store.getTitleInfo,
          tooltip: _this.store.getToolTip,
          legend: _this.store.getLegendConfig,
          grid: _this.store.getGridConfig,
          color: _this.store.getColorList,
          yAxis: _this.store.getAxisBoundaryGap,
          xAxis: _this.store.getAxisValue,
          series: _this.seriesData,
          animationEasing: "elasticOut",
          animationDelayUpdate: function(idx) {
            return idx * 5;
          }
        },
        true
      );
      // 点击事件处理
      _this.chartsInfo.on("click", params => {
        _this.$emit("change", {
          xIndex: [params.componentIndex],
          yIndex: [params.dataIndex],
          params: params,
          totalData: _this.seriesData
        });
      });
    },
    /**
     * @description 窗口尺寸变化，重绘图表
     */
    resizeCharts() {
      if (!this.isDone) {
        return;
      }
      this.chartsInfo.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.checkApply, false);
    window.removeEventListener("resize", this.resizeCharts, false);
  }
};
</script>

<style lang="scss"></style>
