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

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

	let myChart = null;

	const init = () => {

		let data = [0, 0, 0, 0, 0, 0];
		let data1 = [0, 0, 0, 0,0, 0];
		let data2 = [0, 0, 0, 0,0, 0];
		let time = ['人员', '环保车', '饲料车', '物资', '送猪车']
		if (props.list.length > 0 ){
			data = [];
			data1 = [];
			data2 = [];
			props.list.forEach(item => {
				data.push(item.count);
				data1.push(item.passCount);
				data2.push(item.refuseCount)
				// time.push(item.time);
				// data.push(item.temp);
				// data1.push(item.hum);
			})
		}

		let options = {
			tooltip: {
				trigger: "axis",
			},
			color: ['#8091F0', '#90D1D6', '#76DB61'],
			legend: {
				data: ['提交申请', '审批通过', '审批拒绝'],
				left: 'center',
				top: 'bottom'
			},
			xAxis: {
				type: 'category',
				boundaryGap: true,
				data: time,
				axisLine: {
					show: true,
					lineStyle: {
						color: "#aaa",
					}
				},
				axisLabel: {
					color: '#aaa'
				}
			},
			yAxis: [
				{
					type: 'value',
					name: '单位:次',
					boundaryGap: [0, '100%'],
					axisLine: {       //y轴
						show: false
					},
					axisTick: {
						show: false,
					},
					splitLine:{
						show:false
					},
					axisLabel: {
						color: '#aaa',
						formatter: function (value, index) {
							return Math.round(value); // 将小数四舍五入为整数
						}
					}
				},
			],
			series: [
				{
					name: `提交申请`,
					type: "bar",
					// stack: 'Total',
					data: data,
					barWidth: 20,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' 次';
						}
					},
				},
				{
					name: '审批通过',
					type: 'bar',
					barWidth: 20,
					data: data1,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' 次';
						}
					},
				},
				{
					name: '审批拒绝',
					type: 'bar',
					barWidth: 20,
					data: data2,
					tooltip: {
						valueFormatter: function (value) {
							return value + ' 次';
						}
					},
				}
			],
		}

		myChart.setOption(options)
	}

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

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

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

	})
</script>

<style scoped>

</style>
