<template>
	<div :id="'chart-warn' + id" style="width: 100%; height: 100%"></div>
</template>

<script setup name="chartWarn">
	import * as echarts from 'echarts'

	const props = defineProps({
		id: {
			type: Number,
			default: 0
		},
		data: {
			type: Object,
			default: () => {
				return {
					name: '',
					unit: '',
					color: '#5E9FFE',
					list: []
				}
			}
		}
	})

	let myChart = null

	const init = () => {
		let start = 0
		let end = 0
		let time = []
		let data = []
		if (props.data.list.length > 0) {
			end = props.data.list.length - 1
			props.data.list.forEach((item) => {
				time.push(item.time)
				data.push(item.value)
			})
		}
		let options = {
			title: {
				text: props.data.name,
				left: 'center',
				top: '5%'
			},
			tooltip: {
				trigger: "axis"
			},
			grid: {
				containLabel: true
			},
			dataZoom: [
				{
					type: "inside",
					startValue: start,
					endValue: end,
					show: true,
					zoomLock: true
				},
				{
					start: 0,
					end: 10,
					handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
					handleSize: '80%',
					handleStyle: {
						color: '#fff',
						shadowBlur: 3,
						shadowColor: 'rgba(0, 0, 0, 0.6)',
						shadowOffsetX: 2,
						shadowOffsetY: 2
					}
				}
			],
			xAxis: {
				type: 'category',
				boundaryGap: true,
				data: time,
				axisLine: {
					show: true,
					lineStyle: {
						color: "#aaa"
					}
				},
				axisLabel: {
					color: '#aaa'
				},
				splitLine: {
					show: false
				}
			},
			yAxis: [
				{
					type: 'value',
					name: `单位:${props.data.unit}`,
					boundaryGap: [0, 0.1],
					axisLine: {       //y轴
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					}
				}
			],
			series: [
				{
					name: `${props.data.name}`,
					type: 'bar',
					smooth: true,
					barWidth: 20,
					data: data,
					tooltip: {
						valueFormatter: function (value) {
							return value + `${props.data.unit}`
						}
					},
					itemStyle: {
						color: props.data.color
					}
				}
			]
		}
		myChart.setOption(options)
	}

	onMounted(() => {
		myChart = echarts.init(document.getElementById('chart-warn' + props.id))
		init()
		window.addEventListener('resize', () => {
			myChart.resize()
		})
	})

	watch(() => props.data.list, () => {
		myChart.clear()
		init()
	}, { deep: true })

	onBeforeUnmount(() => {
		window.removeEventListener('resize', () => {
			myChart.resize()
		})

	})
</script>

<style scoped>

</style>
