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

<script setup name="chartTemp">
	import * as echarts from 'echarts'
	const props = defineProps({
		id: {
			type: Number,
			default: 0
		},
		data: {
			type: Object,
			default: () => {
				return {
					location: '',
					list: []
				}
			}
		}
	})

	let myChart = null

	const init = () => {
		let start = 0
		let end = 0
		let time = []
		let data = []
		let data1 = []
		if (props.data.list.length > 0) {
			end = props.data.list.length - 1
			props.data.list.forEach(item => {
				time.push(item.time)
				data.push(item.temp)
				data1.push(item.hum)
			})
		}
		let options = {
			title: {
				text: props.data.location
			},
			tooltip: {
				trigger: "axis",
			},
			grid: {
				containLabel: true
			},
			color: ['#6BBEAE', '#1890FF'],
			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: '温度:℃',
					boundaryGap: [0, 0.1],
					axisLine: {       //y轴
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					}
				},
				{
					type: 'value',
					name: '湿度:RH',
					boundaryGap: [0, 0.1],
					axisLine: { //y轴
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					}
				}
			],
			series: [
				{
					name: '温度',
					type: 'line',
					smooth: true,
					data: data,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' ℃'
						}
					}
				},
				{
					name: '湿度',
					type: 'line',
					smooth: true,
					yAxisIndex: 1,
					data: data1,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' RH'
						}
					}
				}
			]
		}
		myChart.setOption(options)
	}

	onMounted(() => {
		myChart = echarts.init(document.getElementById('chart-temp' + 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>
