<template>
	<div>
		<div v-if="data.name.length" class="text-bold text-center text-el-primary text-sm">
		  {{data.name}}
		</div>
		<div :class="name" :style="'height:'+height" style="min-width: 200px;margin: auto;" />
	</div>
</template>

<script setup>
	import * as echarts from 'echarts';
	const store = useStore();
	const { proxy } = getCurrentInstance();
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted, onBeforeUnmount } from 'vue';
	var eChart = null;
	const props = defineProps({
		height: {
			type: String,
			default: '100%'
		},
		name: {
			type: String,
			default: 'echart'
		},
		data: {
		  type: Object,
		  default: () => {
		    return {
				name: "",
				xAxis: [],
				value: [],
				unit: "%"
		    }
		  }
		}
	});
	const { height, name, data } = toRefs(props);
	watch(data, (newValue) => {
			if(eChart != null){
				eChart.setOption(getOption(newValue));
			}
		},{
			deep: true
		},
	);
	const getOption = function(_data){
		let option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
				},
				textStyle:{
					fontSize: 16
				}
			},
			grid: {
				top: '14%',
				left: '1%',
				right: '2%',
				bottom: '1%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				axisLabel: {
					color: (store.state.settings.sideTheme.indexOf("dark") != -1)?"#fff":"#000",
					fontSize: 12,
					showMaxLabel: true
				},
				data:  _data.xAxis
			},
			yAxis: {
				name: "(" + _data.unit + ")",
				type: 'value',
				axisLabel: {
					fontSize: 12,
					color:"#5f6ee1",
					showMaxLabel: true
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: ['#5f6ee1']
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#29437c']
					}
				}
			},
			series: [{
				name: _data.name,
				data: _data.value,
				type: 'line',
				markPoint: {
					data: [{
						name:"最大值",
						type: "max"
					}]
				}
			}]
		};
		return option;
	};
	watch(() => store.state.settings.sideTheme, (newValue) => {
		let _ais = (newValue.indexOf("dark") != -1)?"#fff":"#000";
		eChart.setOption({
			xAxis:{ axisLabel: {color: _ais}},
			yAxis:{ axisLabel: {color: _ais}},
		});
	});
	onMounted(() => {
		nextTick(()=>{
			eChart = echarts.init(document.getElementsByClassName(name.value)[0]);
			eChart.setOption(getOption(data.value));
			eChart.resize();
			window.addEventListener("resize",function(){
				eChart.resize();
			})
		})
	})
	onBeforeUnmount(() => {
		window.removeEventListener("resize",function(){
		})
	})
</script>

<style lang='scss' scoped>
</style>
