<template>
	<a-card :bordered="false">
		<div
			style="cursor: pointer; color: rgb(15, 123, 224)"
			@click="
				() => {
					router.back()
				}
			"
		>
			<left-outlined />返回
		</div>
		<br />
		<div class="planInfoDerail">
			<div class="form">
				<a-form-item class="form-item" label="库区名称" name="username" :label-col="{ span: 5 }">
					<a-input style="width: 250px" :disabled="true" v-model:value="formState.orgName" />
				</a-form-item>
				<a-form-item class="form-item" label="计划名称" name="username" :label-col="{ span: 5 }">
					<a-input style="width: 250px" :disabled="true" v-model:value="formState.planName" />
				</a-form-item>
			</div>
			<h3 class="detail_title"></h3>
			<a-table bordered :dataSource="tableData" :columns="tableColumns">
				<template #bodyCell="{ column, index }">
					<template v-if="column.dataIndex === 'Index'">
						{{ index >= tableData.length - 1 ? '合计' : index + 1 }}
					</template>
				</template>
			</a-table>
		</div>
	</a-card>
</template>
<script setup>
	import { useRouter, useRoute } from 'vue-router'
	import { listPaginationBAQDE } from '@/hook/listlistPagination.js'
	const router = useRouter()
	const route = useRoute()
	import business from '@/api/basic.info/rotationprogramApi.js'

	const tableColumns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{ title: '作业类型', dataIndex: 'zylx' },
		{ title: '仓房名称', align: 'center', dataIndex: 'basicStorehouseName' },
		{ title: '货位名称', align: 'center', dataIndex: 'warehouseName' },
		{ title: '品种', align: 'center', dataIndex: 'grainVarietyName' },
		{ title: '性质', align: 'center', dataIndex: 'grainNatureName' },
		{ title: '等级', align: 'center', dataIndex: 'grainGradeName' },
		{ title: '数量', align: 'center', dataIndex: 'sealingQuantity' }
		// { title: '入库年限', align: 'center', dataIndex: '_入库年限' }
	]
	const tableData = ref([])

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

	onMounted(() => {
		onSearch()
	})

	const onSearch = async (T) => {
		const res = await business.JHXXview({
			rpReportId: route.query.rpReportId,
			orgId: route.query.org_id,
			current: 1,
			size: 5,
			...T
		})
		const del = res.businessRpInboundList.concat(res.businessRpOutboundList)
		getData(del)
	}
	const { onReset, handlePageChange, pagination, Search, SearchFormDel } = listPaginationBAQDE(onSearch, {})

	async function getData(data) {
		await setTotalRow(data)
		tableData.value = data
	}
	const formState = reactive({
		orgName: route.query.orgName,
		planName: route.query.plan_name
	})

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

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

<style lang="less" scoped>
	.form {
		display: flex;
		.form-item {
			margin-right: 50px;
			margin-left: 200px;
		}
	}
</style>
