<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: {
		max: 3000,
		value: 0,
		name: "name",
		show: false,
		unit: ""
	},
  },
  // 高度
  height: {
    type: [Number, String],
    default: "300px",
  },
  // 宽度
  width: {
    type: [Number, String],
    default: "100%",
  },
  name:  {
  		type: String,
  		default: 'echart'
  	},
});

const { data, name } = toRefs(props);
const data1 = reactive({
	option: {
		tooltip: {
			formatter: '{a} <br/>{b} '+': {c}'+data.value.unit
		},
		series: [{
			type: 'gauge',
			radius: '95%',
			center: ["50%","60%"],
			startAngle: 190,
			endAngle: -10,
			min: 0,
			max: data.value.max || 240,
			splitNumber: 8,
			itemStyle: {
				color: '#58D9F9',
				shadowColor: 'rgba(0,138,255,0.45)'
			},
			progress: {
				show: true,
				roundCap: true,
				width: 6
			},
			pointer: {
				icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
				length: '50%',
				width: 8,
				offsetCenter: [0, '5%']
			},
			splitLine: {
				length: 6,
				distance: 2,
				lineStyle: {
					width: 1
				}
			},
			axisLine: {
				distance: 2,
				lineStyle: {
					width: 6
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				distance: 8,
				color: "#000",
				fontSize: 8
			},
			title: {
				show: false
			},
			detail: {
				backgroundColor: '#fff',
				borderColor: '#999',
				borderWidth: 1,
				width: '60%',
				lineHeight: 10,
				height: 8,
				borderRadius: 2,
				offsetCenter: [0, '35%'],
				valueAnimation: true,
				formatter: function (value) {
					return '{value|' + value.toFixed(0) + '}{unit|'+data.value.unit+'}';
				},
				rich: {
					value: {
						fontSize: 16,
						fontWeight: 'bolder',
						color: '#777'
					},
					unit: {
						fontSize: 10,
						color: '#999',
					}
				}
			},
			data: [{
				value: data.value.value,
				name: data.value.name
			}],
		}]
	}
});

const { option } = toRefs(data1);

// 观察 data ，重新绘制
watch(data, (newValue) => {
    // option.value.yAxis.data = newValue;
    option.value.series[0].data[0].value = newValue.value;
  },{ 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({
		series:[{
			axisLabel: {color: _ais},
			splitLine: { lineStyle: {color: _ais}},
			axisTick: { lineStyle: {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>