<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: {
				xAxis: [],
				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: {
			 tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      type: 'shadow'
			    }
			  },
			  legend: {},
			  grid: {
				top: "1%",
			    left: '1%',
			    right: '1%',
			    bottom: '1%',
			    containLabel: true
			  },
			  xAxis: {
			    type: 'value',
				axisLabel: {
					fontSize: 8
				},
				splitLine: {show: false}
			  },
			  dataZoom: {
			        // 开启数据平移
			      type: 'slider',
			      show: data.value.data.length>6?true:false,
			      width: 4,
				  height: "90%",
			      right: 0,
			      showDetail: false,
			      showDataShadow: false,
			      fillerColor: '#20a884',
			  	  backgroundColor: "#cacaca",
			      borderColor: 'transparent',
			      zoomLock: true,
			      brushSelect: false,
			      handleStyle: {
			          opacity: 0,
			      },
			      lineStyle: {
			          opacity: 0,
			      },
			      textStyle: {
			          fontSize: 0,
			      }
			  },
			  yAxis: {
			    type: 'category',
			    data: data.value.xAxis,
				axisTick: { show: false },
				axisLabel: {
					fontSize: 10,
					color: "#000"
				},
			  },
			  series: [{
					name: '',
					type: 'bar',
					barWidth: '50%',
					itemStyle: {
						normal: {
							color: data.value.barCol?data.value.barCol:'#5470C6' 
						}
					},
					data: data.value.data
			    }]
		}
	});

	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>