<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>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import XEUtils from 'xe-utils'
	const tableRef = ref()
	const nameOptions = ref([{ data: '' }])
	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: '合计'
	})

	const nameFilterMethod = ({ option, row, column }) => {}
	const confirmFilterEvent = (option) => {
		const $table = tableRef.value
		if ($table) {
			// 设置为选中状态
			option.checked = true
			// 修改条件之后，需要手动调用 updateData 处理表格数据
			$table.updateData()
		}
	}
</script>
