<template>
	<a-card :bordered="false">
		<div
			style="cursor: pointer"
			@click="
				() => {
					router.back()
				}
			"
		>
			<left-outlined />返回
		</div>
		<br />
		<div>
			<h3 style="text-align: center">{{ route.query.rotationYear }}年度省级政府储备粮轮换计划表</h3>
			<br />
			<br />
			<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 v-if="tableColumns[0]" bordered :pagination="pagination" :dataSource="tableData" :columns="tableColumns">
			</a-table>
		</div>
	</a-card>
</template>

<script setup>
	import business from '@/api/basic.info/rotationprogramApi.js'
	import { reactive, ref, watch } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { listPaginationBAQDE } from '@/hook/listlistPagination.js'
	import XEUtils from 'xe-utils'
	const router = useRouter()
	const route = useRoute()
	let tableColumns = ref([])
	const tableData = ref([])

	function processData(data) {
		const tableColumns = [
			// 处理 unitInfo 和 orgInfo
			{
				title: data.unitInfo.title,
				align: data.unitInfo.align,
				dataIndex: data.unitInfo.dataIndex
			},
			{
				title: data.orgInfo.title,
				align: data.orgInfo.align,
				dataIndex: data.orgInfo.dataIndex
			},
			// 处理 grainMap
			...Object.keys(data.grainMap).map((grainName) => ({
				title: grainName,
				align: data.grainMap[grainName].align,
				children: data.grainMap[grainName].columns.map(({ title, align, dataIndex }) => ({
					title,
					align,
					dataIndex
				}))
			}))
		]

		return tableColumns
	}

	function getData(data) {
		setTotalRow(data)
		tableData.value = data
	}

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

	const acc = ref({})
	const listTable = async (v) => {
		const res = await business.zDview(v)
		for (const key in res) {
			if (key != 'businessRpReports') {
				acc.value = res
			}
		}
		const tableColumnsDEL = processData(acc.value)
		tableColumns.value = tableColumnsDEL
		console.log('33', tableColumns.value)
		getData(res.businessRpReports)
	}

	const { onReset, handlePageChange, pagination, Search, SearchFormDel } = listPaginationBAQDE(listTable, {})
	watch(
		() => route,
		(newVal) => {
			if (newVal.path == '/rotation/rotationSchedule') {
				listTable({ rotationYear: route.query.rotationYear })
			}
		},
		{ immediate: true, deep: true }
	)
</script>
