<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;
	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 = {
			series: [{
				type: 'gauge',
				// splitNumber: 12,
				min: data.value.min,
				max: data.value.max,
				radius: '95%',
				progress: {
					show: true,
					width: 8,
					color: "#fff"
				},
				itemStyle: {
				    color: '#009dff',
				},
				pointer: {
					length: '45%',
					width: 3,
				},
				axisLine: {
					lineStyle: {
						width: 8
					}
				},
				axisTick: {
					distance: 1,
					lineStyle: {
						width: 1,
						color: '#999'
					}
				},
				splitLine: {
					length: 10,
					distance: 1,
					lineStyle: {
						width: 1,
						color: '#999'
					}
				},
				axisLabel: {
					distance: 8,
					color: '#fff',
					fontSize: 8
				},
				title: {
					show: false
				},
				detail: {
					valueAnimation: true,
					fontSize: 20,
					offsetCenter: [0, '92%'],
					color: 'inherit',
					formatter: function (value) {
						return '{value|' + data.value.value + '}{unit|' + data.value.unit + '}';
					},
					rich: {
						value: {
							fontSize: 20,
							fontWeight: 'bolder',
							color: '#04e088'
						},
						unit: {
							fontSize: 12,
							color: '#04e088',
							padding: [0, 0, 0, 5]
						}
					}
				},
				data: [{
					value: data.value.value
				}]
			}]
		};
		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>