<template>
	<div :style="{ height,width }"></div>
</template>


<script setup>
	import * as echarts from "echarts";
	import useResize from "@/hooks/useResize"; // hook
	const {
		proxy
	} = getCurrentInstance(); // 获取实例中的proxy

	let echart;
	let echartInstance;

	const props = defineProps({
		// 数据
		option: {
			type: Object,
			default: () => ({
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}]
			})
		},
		// 高度
		height: {
			type: [Number, String],
			default: "300px",
		},
		// 宽度
		width: {
			type: [Number, String],
			default: "100%",
		},
	});

	const {
		option,
		height,
		width,
	} = toRefs(props);


	// 观察 option ，重新绘制
	watch(option, (newValue) => {
		console.log(newValue)
		// resize();
		echartInstance.setOption(newValue, true);
		resize();
	}, {
		deep: true
	});


	watch(height, (newValue) => {
		console.log(newValue)
		resize();
	});


	watch(() => proxy.$store.state.settings.sideTheme, (newValue) => {
		// let _ais = (newValue.indexOf("dark") != -1) ? "#fff" : "#000";
		// 	echartInstance.setOption({
		// 		xAxis: {
		// 			axisLabel: {
		// 				color: _ais
		// 			}
		// 		},
		// 		legend: {
		// 			textStyle: {
		// 				color: _ais
		// 			}
		// 		}

		// 	});
	});

	onMounted(() => {
		console.log(option.value)
		nextTick(() => {
			echartInstance = echarts.init(proxy.$el);
			echartInstance.setOption(option.value, true);
		})
	});

	function resize() {
		echartInstance.resize();
	}

	// 暴露函数 （供hook调用）
	defineExpose({
		resize,
	});

	useResize();
</script>