<template>
	<!-- 各库计划执行进度 -->
	<div class="planControlProgress pageContent">
		<a-space class="search">
			轮换年度:<a-input v-model:value="SearchForm._轮换年度" /> 企业名称:<a-input
				v-model:value="SearchForm._企业名称"
			/>
			库点名称:<a-input v-model:value="SearchForm._库点名称" />
			<div class="btnBox">
				<a-button type="primary" @click="onSearch"> 查询 </a-button>
				<a-button @click="onReset"> 重置 </a-button>
				<a-button @click="onXlsx"> 导出 </a-button>
			</div>
		</a-space>
		<div class="list">
			<a-table :dataSource="tableData" :pagination="tablePage" :columns="tableColumns" @change="onChangePage">
				<template #bodyCell="{ column, index }">
					<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script setup name="planControlProgress">
	const SearchForm = reactive({
		_轮换年度: '',
		_企业名称: '',
		_库点名称: ''
	})
	const tableColumns = [
		{ title: '序号', width: 100, align: 'center', key: 'INDEX' },
		{ title: '轮换年度', align: 'center', dataIndex: '_轮换年度' },
		{ title: '企业名称', align: 'center', dataIndex: '_企业名称' },
		{ title: '库点名称', align: 'center', dataIndex: '_库点名称' },
		{ title: '轮出总数量', align: 'center', dataIndex: '_轮出总数量' },
		{ title: '已轮出数量', align: 'center', dataIndex: '_已轮出数量' },
		{ title: '轮入总数量', align: 'center', dataIndex: '_轮入总数量' },
		{ title: '已轮入数量', align: 'center', dataIndex: '_已轮入数量' }
	]
	const tableData = ref([{ '': '12456789' }])
	const tablePage = reactive({
		total: 0,
		current: 1,
		size: 20
	})

	function onSearch() {}
	function onReset() {
		SearchForm._库区名称 = ''
		SearchForm._品种 = ''
		SearchForm._性质 = ''
		tablePage.current = 1
		onSearch()
	}

	function onChangePage(ev) {
		console.log(ev)
		Object.assign(tablePage, ev)
		onSearch()
	}

	function onXlsx() {}
</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: 10px 20px;
		.search {
			padding: 10px 0;
			.btnBox {
				display: flex;
				> * {
					margin-right: 10px;
				}
			}
		}
	}
</style>
