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

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

	const props = defineProps({
		id: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	let myChart = null

	const init = () => {
		let data = []
		let data2 = []
		let data3 = []
		let time = []
		if (props.list.length > 0) {
			props.list.forEach(item => {
				data.push(item.count1)
				data2.push(item.count2)
				data3.push(item.count3)
				time.push(item.dateTime)
			})
		}
		let options = {
			legend: {
				data: ['隔离完成', '隔离中', '提前解除隔离'],
				top: '0'
			},
			color: ['#6E81EE', '#92D6DB', '#72EC44'],
			tooltip: {
				trigger: "axis",
			},
			grid: {
				left: '5%',
				top: '15%',
				right: '5%',
				bottom: '5%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: time,
			},
			yAxis: {
				type: 'value',
				name: '人'
			},
			series: [
				{
					name: `隔离完成`,
					type: "line",
					// stack: 'Total',
					data: data,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' 人';
						}
					},
				},
				{
					name: `隔离中`,
					type: "line",
					// stack: 'Total',
					data: data2,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' 人';
						}
					},
				},
				{
					name: `提前解除隔离`,
					type: "line",
					// stack: 'Total',
					data: data3,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' 人';
						}
					},
				},
			]
		}
		myChart.setOption(options);
	}

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

	watch(() => props.list, () => {
		myChart.clear()
		init()
	})
</script>

<style scoped>

</style>
