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

<script setup name="chartLuggage">
	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 time = []
		if (props.list.length > 0) {
			props.list.forEach((item) => {
				data.push(item.count)
				time.push(item.dateTime)
			})
		}
		let options = {
			color: ['#6E81EE'],
			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 + ' 次'
						}
					}
				}

			]
		}
		myChart.setOption(options);
	}

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

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

<style scoped>

</style>
