<template>
	<!-- 计划信息查询 -->
	<div class="planInfo pageContent">
		<a-space class="search">
			库区名称:<a-input style="width: 220px" v-model:value="SearchFormDel.orgName" />
			<div class="btnBox">
				<a-button type="primary" @click="Search"> 查询 </a-button>
				<a-button @click="onReset"> 重置 </a-button>
			</div>
		</a-space>
		<div class="list">
			<a-table :dataSource="tableData" :pagination="pagination" :columns="tableColumns">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'CZ'">
						<a-button class="view" @click="onViewRow(record)">查看</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script setup>
	import business from '@/api/basic.info/rotationprogramApi.js'
	import { listPagination } from '@/hook/listlistPagination.js'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const tableColumns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{ title: '年度', dataIndex: 'rotation_year' },
		{ title: '库区名称', align: 'center', dataIndex: 'orgName' },
		{ title: '轮出数量', align: 'center', dataIndex: 'outbound_quantity' },
		{ title: '轮入数量', align: 'center', dataIndex: 'inbound_quantity' },
		{ title: '操作', width: 200, key: 'CZ' }
	]

	const { tableData, onSearch, handlePageChange, pagination, Search, onReset, SearchFormDel } = listPagination(
		{ orgName: '' },
		business.JHXXlist,
		{},
		{},
		'shut'
	)
	function onViewRow(row) {
		router.push(
			`/rotation/planInfoDetail?rpReportId=${row.id}&org_id=${row.org_id}&orgName=${row.orgName}&plan_name=${row.orgName}`
		)
	}
</script>
<style lang="less" scoped>
	.view {
		background-color: rgba(112, 125, 233);
		color: #fff;
	}
	.edit {
		background-color: rgba(210, 176, 61);
		color: #fff;
	}
	.remove {
		background-color: rgba(255, 70, 70);
		color: #fff;
	}
	.add {
		background-color: rgba(83, 184, 36);
		color: #fff;
	}
	.pageContent {
		background: #fff;
		padding: 30px 20px;
		.search {
			padding: 30px 30px;
			.btnBox {
				display: flex;
				margin-left: 60px;
				> * {
					margin-right: 40px;
				}
			}
		}
	}
</style>
