// 图表基础，负责建立，销毁图表，监听尺寸变化，监听图表事件
import echarts from 'echarts';
import {
  debounce
} from '@/common/util.js'

export default {
  props: {
    // 图表dom的id，注意同一个页面的图表使用不同的id区分，最好全局都是唯一的
    id: {
      type: String,
      required: true
    },
    // 数据体，只关心数据
    chartData: {
      type: Object | Array,
      required: true
    },
  },
  data() {
    return {
      chart: null, // 图表对象
      resizeHandler: null, // 监听窗口变化的监听器
      initMaxCount: 10, // 图表在初始化时会获取dom元素，如果没有获取到（可能是延迟加载），则会用settimeout延时初始化，这个数字为最多尝试初始化次数
    };
  },
  watch: {
    // 数据改变时改变图表
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  created() {
    this.beforeInit?.(echarts);
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.initListener()
    });
  },
  activated() {
    // 激活时,如果没有图表,则重新生成，因为有可能在mounted阶段还未生成图表时，就切换了页面，导致未捕获到元素，无法生成图表
    if (!this.chart) {
      this.$nextTick(() => {
        this.initChart();
      });
    }
    this.initListener()
  },
  deactivated() {
    this.destroyListener()
  },
  beforeDestroy() {
    this.destroyListener();
    this.destroyChart();
  },
  methods: {
    // 建立图表对象
    initChart() {
      let dom = document.getElementById(this.id);
      // if (dom) console.log(this.id, 'echart-width', dom.offsetWidth, 'echart-height', dom.offsetHeight);
      // else console.log(this.id, 'dom不存在');
      // 如果没有dom,则延时建立
      if (!dom || !dom.offsetWidth) {
        this.initMaxCount--;
        if (this.initMaxCount > 0) setTimeout(() => this.initChart(), 100);
        return;
      }
      this.chart = echarts.init(dom); // 初始化图表
      // 绑定监听事件，如果有的话
      if (this.eventListener) {
        for (let item of this.eventListener) {
          this.chart.on(item.event, item.handler);
        }
      }
      this.setOptions(this.chartData);
    },
    // 释放图表对象
    destroyChart() {
      if (!this.chart) return;
      this.chart.dispose();
      this.chart = null;
    },
    // 监听窗口尺寸变化
    initListener() {
      if (this.resizeHandler) return;
      // 防抖处理
      this.resizeHandler = debounce(() => {
        this.resize()
      }, 100);
      window.addEventListener('resize', this.resizeHandler);
    },
    // 移除监听器
    destroyListener() {
      if (!this.resizeHandler) return;
      window.removeEventListener('resize', this.resizeHandler);
      this.resizeHandler = null;
    },
    // echart的resize
    resize() {
      this.chart && this.chart._dom.offsetWidth && this.chart.resize();
    },
    // 清屏
    clear() {
      this.chart && this.chart.clear();
    }
  }
}
