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

<script setup name="chartPcr">
	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.allCount);
				data2.push(item.passCount);
				data3.push(item.refuseCount);
				time.push(item.dateTime)
			})
		}
		let options = {
			legend: {
				data: ['全部', '合格', '异常'],
				top: '0'
			},
			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-pcr' + props.id))
		init()
		window.addEventListener('resize', () => {
			myChart.resize()
		})
	})

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

<style scoped>

</style>
