<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: 'echart'
		},
		data: {
			type: Object,
			default: {
				title: "重油总量",
				name: "heavyOil",
				value: 85.36,
				unit: "L"
			}
		}
	});
	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',
				axisShadow: true,
				startAngle: 90,
				endAngle: -270,
				pointer: {
					show: false
				},
				progress: {
					show: true,
					overlap: false,
					roundCap: true,
					clip: false,
					itemStyle: {
						shadowColor: 'rgba(255, 162, 81, 0.8)',
						shadowBlur: 10,
						color: new echarts.graphic.LinearGradient(
							0, 0, 1, 0,
							[{
								offset: 0,
								color: '#ffa251'
							},
							{
								offset: 1,
								color: '#ff7c7c'
							}]
						)
					}
				},
				axisLine: {
					lineStyle: {
						width: 16,
						shadowColor: 'rgba(219, 229, 245, 0.8)',
						shadowBlur: 10,
						color: [[1, "#dde7f6"]]
					}
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false
				},
				title: {
					show: false
				},
				detail: {
					fontSize: (data.value.value+"").length>6?16:((data.value.value+"").length>4?20:26),
					offsetCenter: ['0%', '4%']
				},
				data: [data.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>