<template>
	<div>
		<br />
		<h3 style="text-align: center">2024年度省级政府储备粮轮换计划表</h3>
		<br />
		<!-- <vxe-table border ref="tableRef" height="400" :filter-config="{ showIcon: false }" :data="tableData">
			<vxe-column field="dateacc" align="center" title="单位名称"></vxe-column>
			<vxe-column field="sex" align="center" title="存储库点"></vxe-column>
			<vxe-colgroup align="center" title="小麦">
				<vxe-column align="center" field="date" title="轮出数量">
					<template #default="{ row }">
						{{ row.date }}
					</template>
				</vxe-column>
				<vxe-column align="center" field="sex" title="轮入数量"></vxe-column>
			</vxe-colgroup>
			<vxe-colgroup align="center" title="小麦粉">
				<vxe-column align="center" field="date" title="轮出数量"></vxe-column>
				<vxe-column align="center" field="sex" title="轮入数量"></vxe-column>
			</vxe-colgroup>
			<vxe-colgroup align="center" title="青稞">
				<vxe-column align="center" field="date" title="轮出数量"></vxe-column>
				<vxe-column align="center" field="sex" title="轮入数量"></vxe-column>
			</vxe-colgroup>
			<vxe-colgroup align="center" title="大米">
				<vxe-column align="center" field="date" title="轮出数量"></vxe-column>
				<vxe-column align="center" field="sex" title="轮入数量"></vxe-column>
			</vxe-colgroup>
			<vxe-colgroup align="center" title="稻谷">
				<vxe-column align="center" field="date" title="轮出数量"></vxe-column>
				<vxe-column align="center" field="sex" title="轮入数量"></vxe-column>
			</vxe-colgroup>
		</vxe-table> -->
		<a-table bordered :dataSource="tableData" :columns="tableColumns"> </a-table>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import XEUtils from 'xe-utils'
	const tableRef = ref()
	const nameOptions = ref([{ data: '' }])

	const tableColumns = [
		{ title: '单位名称', align: 'center', dataIndex: '_单位名称' },
		{ title: '存储库点', align: 'center', dataIndex: '_存储库点' },
		{
			title: '小麦',
			align: 'center',
			children: [
				{ title: '轮出数量', align: 'center', dataIndex: '_轮出数量1' },
				{ title: '轮入数量', align: 'center', dataIndex: '_轮入数量1' }
			]
		},
		{
			title: '小麦粉',
			align: 'center',
			children: [
				{ title: '轮出数量', align: 'center', dataIndex: '_轮出数量2' },
				{ title: '轮入数量', align: 'center', dataIndex: '_轮入数量2' }
			]
		},
		{
			title: '青稞',
			align: 'center',
			children: [
				{ title: '轮出数量', align: 'center', dataIndex: '_轮出数量3' },
				{ title: '轮入数量', align: 'center', dataIndex: '_轮入数量3' }
			]
		},
		{
			title: '大米',
			align: 'center',
			children: [
				{ title: '轮出数量', align: 'center', dataIndex: '_轮出数量4' },
				{ title: '轮入数量', align: 'center', dataIndex: '_轮入数量4' }
			]
		},
		{
			title: '稻谷',
			align: 'center',
			children: [
				{ title: '轮出数量', align: 'center', dataIndex: '_轮出数量5' },
				{ title: '轮入数量', align: 'center', dataIndex: '_轮入数量5' }
			]
		}
	]
	const tableData = ref([])

	onMounted(() => {
		getData()
	})

	function getData() {
		let data = [
			{
				_单位名称: '单位1',
				_存储库点: '库点1',
				_轮出数量1: 100,
				_轮入数量1: 80,
				_轮出数量2: 200,
				_轮入数量2: 150,
				_轮出数量3: 300,
				_轮入数量3: 250,
				_轮出数量4: 400,
				_轮入数量4: 350,
				_轮出数量5: 500,
				_轮入数量5: 450
			},
			{
				_单位名称: '单位2',
				_存储库点: '库点2',
				_轮出数量1: 120,
				_轮入数量1: 90,
				_轮出数量2: 220,
				_轮入数量2: 160,
				_轮出数量3: 320,
				_轮入数量3: 270,
				_轮出数量4: 420,
				_轮入数量4: 370,
				_轮出数量5: 520,
				_轮入数量5: 470
			}
		]
		setTotalRow(data)
		tableData.value = data
	}

	function setTotalRow(data) {
		let totalRow = {}
		let rowKeys = Object.keys(data[0])
		rowKeys.forEach((v) => {
			if (v === '_单位名称') {
				totalRow[v] = '合计'
			} else {
				totalRow[v] = data.reduce((acc, cur) => {
					return acc + (cur[v] || 0)
				}, 0)
				if (isNaN(totalRow[v])) {
					totalRow[v] = '-'
				}
			}
		})
		data.unshift(totalRow)
	}

	// const tableData = ref([
	// 	{
	// 		id: 10001,
	// 		name: 'Test10',
	// 		role: 'Develop',
	// 		sex: '0',
	// 		date: '2021-11-14',
	// 		dateacc: '3232',
	// 		age: 28,
	// 		amount: 888,
	// 		address: 'test abc'
	// 	},
	// 	{
	// 		id: 10002,
	// 		name: 'Test12',
	// 		role: 'Test',
	// 		dateacc: '3232',
	// 		sex: '1',
	// 		date: '2021-01-20',
	// 		age: 22,
	// 		amount: 666,
	// 		address: 'Guangzhou'
	// 	},
	// 	{
	// 		id: 10003,
	// 		dateacc: '3232',
	// 		name: 'Test34',
	// 		role: 'PM',
	// 		sex: '1',
	// 		date: '2020-09-17',
	// 		age: 32,
	// 		amount: 89,
	// 		address: 'Shanghai'
	// 	},
	// 	{
	// 		id: 10004,
	// 		name: 'Test24',
	// 		role: 'Designer',
	// 		sex: '0',
	// 		date: '2020-10-25',
	// 		age: 23,
	// 		dateacc: '3232',
	// 		amount: 1000,
	// 		address: 'test abc'
	// 	}
	// ])

	// tableData.value.unshift({
	// 	id: 100011,
	// 	name: '',
	// 	role: '',
	// 	sex: '',
	// 	date: '',
	// 	dateacc: '合计'
	// })
</script>
