<template>
<!-- 轮换计划下发 -->
<div class="planRelease pageContent">
<a-space class="search">
	轮换年度:<a-input v-model:value="SearchForm._轮换年度" />
	<div class="btnBox">
		<a-button type="primary" @click="onSearch"> 查询 </a-button>
		<a-button @click="onReset"> 重置 </a-button>
	</div>
</a-space>
<div class="list">
	<a-table :dataSource="tableData" :pagination="tablePage" :columns="tableColumns" @change="onChangePage">
		<template #bodyCell="{ column, record,index }">
			<template v-if="column.key === 'INDEX'">{{index+1}}</template>
			<template v-else-if="column.key === 'CZ'">
				<a-button class="view" @click="onViewRow(record)">查看</a-button>
			</template>
		</template>
	</a-table>
</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";


const router = useRouter();

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:'操作',width:200,key:'CZ'},
];
const tableData = ref([{'':'12456789'}]);
const tablePage = reactive({
	total:0,
	current:1,
	size:20,
});
function onSearch(){

}
function onReset(){
	SearchForm._库区名称 = '';
	tablePage.current = 1;
	onSearch();
}

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

function onViewRow(row){
	router.push({path:'/rotation/planReleaseDetail',query:{id:row.id}});
}
</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>