<template>
	<div>
		<div :class="name" :style="{ 'height': height }" />
	</div>
</template>

<script setup>
	import * as echarts from "echarts";
	import useResize from "@/hooks/useResize";
	const {
		proxy
	} = getCurrentInstance();
	var echartInstance = null;
	var _color = "#72819f";
	const props = defineProps({
		height: {
			type: String,
			default: '100%'
		},
		name: {
			type: String,
			default: 'gaugeEchart'
		},
		data: {
			type: Object,
			default: () => {
				return {
					name: "",
					value: 0,
					min: 0,
					max: 100,
					unit: "KN*m"
				}
			}
		}
	});
	const {
		height,
		name,
		data
	} = toRefs(props);
	watch(data, (newValue) => {
		if (echartInstance != null) {
			echartInstance.setOption(getOption(newValue));
		}
	}, {
		deep: true
	}, );
	const getOption = function(_data) {
		let option = {
			title: {
				show: false,
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				right: 'right',
				top: 'center',
				itemWidth: 16,
				itemHeight: 10,
				textStyle: {
					fontSize: 11,
					color: _color
						
				}
			},
			color: ["#009dff", "#22e4ff", "#3bffd0", "#04e38a", "#9dff86", "#fee588", "#fea844", "#fe7044", "#fe4444", "#ff7c8c"],
			series: [{
				name: 'Access From',
				type: 'pie',
				radius: '65%',
				center: ["45%", "45%"],
				data: data.value,
				label: {
					formatter: '{d}%',
					color: _color
				}
			}]
		};
		return option;
	};
	onMounted(() => {
		nextTick(() => {
			echartInstance = echarts.init(document.getElementsByClassName(name.value)[0]);
			echartInstance.setOption(getOption(data.value));
			echartInstance.resize();
		})
	})

	function resize() {
		echartInstance.resize();
	}
	// 暴露函数 （供hook调用）
	defineExpose({
		resize,
	});
	useResize();
</script>

<style lang='scss' scoped>
</style>