<script setup name="scatterSingleChart">
import util from "@tools/util";
import chartTheme from './../rateAnalysis.json'
import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
import {useStore } from 'vuex'
import * as echarts from 'echarts'
const chartId = 'chart-' + util.newGUID(); //chartId
const chartIns = ref(null)  //chart 实例
const props = defineProps({
	xAxis: {
		type: Array,
		required: true,
		default: () => ([])
	},
	yAxis: {
		type: Array,
		required: true,
		default: () => ([])
	},
	series: {
		type: Array,
		required: false,
		default: () => ([])
	},
	height: {
		type: String,
		required: false,
		default: '500px'
	},
	title: {
		type: String,
		required: false,
		default: ''
	},
	subtext: {
		type: String,
		required: false,
		default: ''
	},
	width: {
		type: String,
		required: false,
		default: '500px'
	},
})

/**定义option */
const option = computed({
	get() {
		return {
			tooltip: {
				position: 'top',
				formatter: function (params) {
					if(params.componentType === 'markLine'){
						return params.name
					}else{
						return (
							'偏航：'+ params.value[0] +
							'度<br/ >风速：' +
							params.value[1] +
							'm/s'
						);
					}
				}
			},
			title: {
				text: props.title || '',
				subtext: props.subtext || '',
				top: 6,
				left: '5%',
			},
			grid: {
				top: 80,
				left: 40,
				right: 40,
				bottom: 40,
			},
			xAxis: props.xAxis || [],
			//  {
			// 	type: 'category',
			// 	data: props.xAxis || [],
			// 	boundaryGap: false,
			// 	splitLine: {
			// 		show: true
			// 	},
			// 	axisLine: {
			// 		show: false
			// 	}
			// },
			yAxis: props.yAxis || [],
			// {
			// 	type: 'category',
			// 	data: props.yAxis,
			// 	axisLine: {
			// 		show: false
			// 	}
			// },
			series: props.series || [] 
			// [
			// 	{
			// 		name: 'Punch Card',
			// 		type: 'scatter',
			// 		symbolSize: function (val) {
			// 			return val[2] * 2;
			// 		},
			// 		data: props.data,
			// 		animationDelay: function (idx) {
			// 			return idx * 5;
			// 		}
			// 	}
			// ]
		}
	},
	set(val) { }
})
watch(() => option, (newVal, oldVal) => {
	if (chartIns.value) {
		// console.log(newVal)
		const echartIns = toRaw(chartIns.value)
		echartIns.setOption(toRaw(newVal.value))
	}
}, { deep: true })
watch([() => props.width, () => props.height],(newVal, oldVal) => {
	if(chartIns.value){
		const echartIns = toRaw(chartIns.value)
		nextTick(() => echartIns.resize())
	}
})
const store = useStore()
const collapse = computed({
	get(){
		return store.state.collapse
	},
	set(val){}
})
watch(collapse, (val) => {
	if(chartIns.value){
		setTimeout(() => {
			chartIns.value?.resize()
		},300)
	}
})
onMounted(() => {
	nextTick(() => {
		echarts.registerTheme('chartTheme', chartTheme)
		const echartIns = echarts.init(document.getElementById(chartId), 'chartTheme')
		chartIns.value = echartIns
		echartIns.setOption(option.value)
		window.addEventListener('resize', () => {
			echartIns.resize()
		})
	})
})
</script>
<template>
	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
</template>