<template>
	<!-- 轮换计划下发 -->
	<div class="planRelease pageContent">
		<div class="silt-title">
			<span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">
				计划文号</span
			>
			<a-input style="width: 220px" v-model:value="SearchFormDel.planNumber" placeholder="请输入" />

			<span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">
				轮换年度</span
			>
			<a-date-picker style="width: 220px" v-model:value="SearchFormDel.rotationYear" picker="year" valueFormat="YYYY" />
			<div class="btnBox">
				<a-button class="del" type="primary" @click="Search"> 查询 </a-button>
				<a-button class="del" @click="onReset"> 重置 </a-button>
				<a-button class="del" type="primary" @click="options"> 编制 </a-button>
			</div>
		</div>
		<div class="list">
			<a-table :dataSource="tableData" :pagination="pagination" :columns="tableColumns">
				<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="onView('view', record)">查看</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</div>
	<a-modal v-model:visible="AddEditDialog.open" :title="AddEditDialog.title" @ok="onDialogOk" width="800px">
		<div class="acc_del">
			<a-form-item class="form-item acc_del" label="选择轮换下发年度" :label-col="{ span: 10 }">
				<a-date-picker style="width: 250px" v-model:value="rotationYear" picker="year" valueFormat="YYYY" />
			</a-form-item>
		</div>
	</a-modal>
</template>
<script setup>
	import { useRouter } from 'vue-router'
	import business from '@/api/basic.info/rotationprogramApi.js'
	import { listPagination } from '@/hook/listlistPagination.js'
	const router = useRouter()

	const rotationYear = ref('')
	const AddEditDialog = ref({
		open: false,
		title: '轮换下发年度'
	})
	const onDialogOk = () => {
		AddEditDialog.value.open = false
		router.push(`/rotation/planReleaseDetail?add=1&rotationYear=${+rotationYear.value}`)
	}
	const options = () => {
		rotationYear.value = ''
		AddEditDialog.value.open = true
	}

	const tableColumns = [
		{ title: '序号', width: 100, align: 'center', key: 'INDEX' },
		{ title: '计划文号', align: 'center', dataIndex: 'planNumber' },
		{ title: '轮换年度', align: 'center', dataIndex: 'rotationYear' },
		{ title: '轮换开始时间', align: 'center', dataIndex: 'startDate' },
		{ title: '轮换结束时间', align: 'center', dataIndex: 'endDate' },
		// { title: '编制时间', align: 'center', dataIndex: '_已轮入数量' },
		{ title: '操作', width: 200, key: 'CZ' }
	]
	const { tableData, onSearch, handlePageChange, pagination, Search, onReset, SearchFormDel } = listPagination(
		{ planNumber: '', rotationYear: '' },
		business.XFlist,
		{},
		{},
		'shut'
	)
	tableData.value = [{ name: '' }]

	const onView = (record, row) => {
		switch (record) {
			case 'add':
				router.push('/rotation/planReleaseDetail?add=1')
				break
			case 'del':
				break
			case 'view':
				router.push(`/rotation/planReleaseDetail?code=${true}&id=${row.id}&rpReportId=${row.rpReportId}`)
				break
			case 'edit':
				router.push(`/business/personnelDel?code=1&id=${row.id}`)
				break
			default:
				// router.push('/business/personnelDel')
				break
		}
	}
</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 {
			display: flex;
		}
	}
	.silt-title {
		display: flex;
		padding: 30px 0;
		.btnBox {
			margin-right: 30px;
			margin-left: 30px;
			.del {
				margin-right: 30px;
			}
		}
	}
</style>
