<template>
	<div ref="echart" :class="name" :style="{ height: height, width: width }"></div>
</template>

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

	let echart;
	let echartInstance;

	const props = defineProps({
		// 数据
		data: {
			type: Object,
			default: {
				name: "",
				data: []
			}
		},
		// 高度
		height: {
			type: [Number, String],
			default: "300px",
		},
		// 宽度
		width: {
			type: [Number, String],
			default: "100%",
		},
		name: {
			type: String,
			default: 'echart'
		}
	});

	const {
		data,
		name,
		height,
		width
	} = toRefs(props);
	const data1 = reactive({
		option: {
			title: {
				text: data.value.name,
				left: 'left',
				textStyle: {
					"fontSize": 12
				}
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				// orient: 'vertical',
				// left: 'right',
				bottom: data.value.size?'-5px':'6%',
				itemHeight: 10,
				itemWidth: 10,
				textStyle: {
					"fontSize": 10
				}
			},
			series: [{
				name: '船舶信息',
				type: 'pie',
				radius: data.value.size?data.value.size:(data.value.sign == 'ring'?['30%', '50%']:'50%'),
				data: data.value.data,
				center: ['50%', '50%'],
				itemStyle: {
					normal: {
						label: {
							show: true,
							formatter: '{d}%',
							fontSize: 10
						}
					}
				},
				emphasis: {
					show: false,
					itemStyle: {
						shadowBlur: 6,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		}
	});

	const { option } = toRefs(data1);

	// 观察 data ，重新绘制
	watch(data, (newValue) => {
		option.value.series[0].data = newValue;
	}, {
		deep: true
	});
	watch(option, (newValue) => {
		echartInstance.setOption(newValue, true);
	}, {
		deep: true
	});
	// watch(() => store.state.settings.sideTheme, (newValue) => {
	// 	let _ais = (newValue.indexOf("dark") != -1) ? "#fff" : "#000";
	// 	echartInstance.setOption({
	// 		xAxis: { 
	// 			axisLabel: {
	// 				color: _ais
	// 			}
	// 		},
	// 		legend: {
	// 			textStyle: {
	// 				color: _ais
	// 			}
	// 		}

	// 	});
	// });
	onMounted(() => {
		// echart = proxy.$refs.echart;
		// echartInstance = echarts.init(echart, "macarons");
		// echartInstance.setOption(option.value, true);
		nextTick(() => {
			echartInstance = echarts.init(document.getElementsByClassName(name.value)[0]);
			echartInstance.setOption(option.value, true);
		})
	});

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

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

	useResize();
</script>