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

<script setup name="chartLine">
	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 => {
				time.push(item.dateTime)
				data.push(item.commitCount)
				data2.push(item.passCount)
				data3.push(item.refuseCount)
			})
		}
		let options = {
			legend: {
				data: ['提交申请', '审批通过', '审批拒绝'],
				top: '0'
			},
			tooltip: {
				trigger: "axis",
			},
			grid: {
				left: '10%',
				top: '10%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: time,
				axisLabel: {
					rotate: 10 // 旋转 x 轴标签，以避免重叠
				}
			},
			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-line' + props.id))
		init()
		window.addEventListener('resize', () => {
			myChart.resize()
		})
	})

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

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

<style scoped>

</style>
