<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: 'echart'
		},
		data: {
		  type: Object,
		  default: () => {
		    return {
				name: "",
				xAxis: [],
				data: [],
				unit: ""
		    }
		  }
		}
	});
	const { height, name, data } = toRefs(props);
	watch(data, (newValue) => {
			if(echartInstance != null){
				echartInstance.setOption(getOption(newValue));
			}
		},{
			deep: true
		},
	);
	const getOption = function(_data){
		let option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
				},
				textStyle:{
					fontSize: 11
				}
			},
			legend: {
				show: true,
				bottom: '1%',
				itemWidth: 22,
				itemHeight: 10,
				textStyle: {
					 color: _color,
					 fontSize: 11
				}
			},
			color: ['#0493ee', '#3ee5fd', '#ee6666', '#fac858', '#fc8452'],
			grid: {
				top: '6%',
				left: _data.name.length?'40':'2%',
				right: '2%',
				bottom: '16%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false, //X轴贴边false不贴边true
				axisLabel: {
					color: _color,
					fontSize: 11,
					showMaxLabel: true
				},
				data:  _data.xAxis
			},
			yAxis: {
				// name: "(" + _data.unit + ")",
				type: 'value',
				axisLabel: {
					fontSize: 11,
					color: _color,
					showMaxLabel: true
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: ['#fff']
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#c6c6c6'],
						type: "dashed"
					}
				}
			},
			series: _data.data
		};
		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>
