// 防抖函数：避免频繁触发 resize
function debounce(fn, delay = 100) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

export default {
  data() {
    return {
      // 存储ResizeObserver实例
      resizeObserver: null,
      // 标记是否已初始化监听
      isResizeListening: false
    };
  },
  methods: {
    /**
     * 初始化尺寸监听
     * @param {HTMLElement} container - 图表容器DOM（默认取this.$refs.chartContainer）
     */
    initResizeListener(container) {
      // 防止重复初始化
      if (this.isResizeListening) return;

      // 默认使用组件内的chartContainer作为监听目标
      const target = container || this.$refs.chartContainer;
      if (!target) {
        console.warn('未找到图表容器，无法初始化尺寸监听');
        return;
      }

      // 创建ResizeObserver实例
      this.resizeObserver = new ResizeObserver(
        debounce(entries => {
          // 触发图表重绘
          this.handleContainerResize(entries);
        })
      );

      // 开始监听容器尺寸变化
      this.resizeObserver.observe(target);
      this.isResizeListening = true;
    },

    /**
     * 处理容器尺寸变化
     * @param {ResizeObserverEntry[]} entries - ResizeObserver回调参数
     */
    handleContainerResize(entries) {
      // 确保图表实例存在
      if (this.chart && this.chart.resize) {
        // 调用ECharts的resize方法重绘图表
        this.chart.resize();
      }
    },

    /**
     * 销毁尺寸监听
     */
    destroyResizeListener() {
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();
        this.resizeObserver = null;
      }
      this.isResizeListening = false;
    }
  },
  // 组件挂载后初始化监听
  mounted() {
    // 延迟初始化，确保DOM已渲染完成
    this.$nextTick(() => {
      this.initResizeListener();
    });
  },
  // 组件销毁前清理监听
  beforeDestroy() {
    this.destroyResizeListener();
  }
};