import * as echarts from 'echarts'


/**
 * ECharts自适应容器大小Hook
 *
 * @param {Object} domRef - DOM元素引用对象，需包含value属性指向要挂载的DOM节点
 * @returns {Object} chart - 包含value属性的对象，value保存ECharts实例引用
 */
const useEchartsResize = (domRef) => {
	// 图表实例容器，用对象包装便于保持引用地址
	const chart = {value: null}

	// 窗口大小变化处理函数
	const resizeChart = () => {
		chart.value?.resize()
	}

	// 组件挂载后初始化逻辑
	onMounted(() => {
		if (!domRef.value) return
		// 初始化ECharts实例并注册resize监听
		chart.value = echarts.init(domRef.value)
		window.addEventListener('resize', resizeChart)
	})

	// 组件卸载前清理逻辑
	onBeforeUnmount(() => {
		// 移除监听并清理图表实例
		window.removeEventListener('resize', resizeChart)
		chart.value?.dispose()
		chart.value = null
	})

	return {chart}
}

export default useEchartsResize