<!-- 粮情检查档案 -->
<template>
	<div>
		<a-space class="header">
			<div class="input-box">
				<div class="silt-title">
					<span style="width: 62px; display: block">{{ '仓房名称' }}</span>
					<a-input style="width: 220px" v-model:value="informationData.storehouseName" placeholder="请输入" />
				</div>
				<div class="input-box-sle">
					<span class="title-box">{{ '报告类型' }}</span>
					<a-select class="select-box" v-model:value="informationData.reportType" style="width: 220px" placeholder="请选择">
						<a-select-option v-for="item in reportTypeList" :key="item.value" :value="item.value">
							{{ item.label }}
						</a-select-option>
					</a-select>
				</div>
				<div class="input-box-sle">
					<span class="title-box">{{ '检查日期' }}</span>
					<a-date-picker :disabled="showLock" v-model:value="informationData['reportDate']" value-format="YYYY-MM-DD" />
				</div>
			</div>
			<div class="btnBox">
				<a-button style="margin-right: 16px" @click="searchData">查询</a-button>
				<a-button style="margin-right: 16px" @click="reset">重置</a-button>
				<a-button type="primary" @click="addData">新增</a-button>
			</div>
		</a-space>
		<a-table :dataSource="dataSource" :row-key="(record) => record.key" :pagination="informationData"
			@change="onChangePage" :columns="columns">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<span>
						<a-button class="check" @click="check(record)">查看</a-button>
						<a-button class="edit" @click="edit(record)">编辑</a-button>
						<a-popconfirm title="确定删除此条数据？" @confirm="deleteData(record)">
							<a-button class="delete">删除</a-button>
						</a-popconfirm>
					</span>
				</template>
			</template>
		</a-table>
		<!-- 查看--编辑--新增等操作 -->
		<ArchivesForm :dataObj="dataObj" @isVisible="isVisible" />
	</div>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import ArchivesForm from './ArchivesForm.vue'
const columns = computed(() => [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		customRender: ({ text, record, index }) => {
			return `${index + 1}`
		}
	},
	{
		title: '编号',
		dataIndex: 'archiveNumber',
		align: 'center',
		key: 'archiveNumber'
	},
	{
		title: '报告类型',
		dataIndex: 'reportTypeName',
		align: 'center',
		key: 'reportTypeName'
	},
	{
		title: '库区名称',
		dataIndex: 'orgName',
		align: 'center',
		key: 'orgName'
	},
	{
		title: '仓房名称',
		dataIndex: 'storehouseName',
		align: 'center',
		key: 'storehouseName'
	},
	{
		title: '最高温',
		dataIndex: 'maximumTemperature',
		align: 'center',
		key: 'maximumTemperature'
	},
	{
		title: '最低温',
		dataIndex: 'minimumTemperature',
		align: 'center',
		key: 'minimumTemperature'
	},
	{
		title: '平均温',
		dataIndex: 'averageTemperature',
		align: 'center',
		key: 'averageTemperature'
	},
	{
		title: '报告日期',
		dataIndex: 'reportDate',
		align: 'center',
		key: 'reportDate'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		key: 'action',
		width: '280px'
	}
])
const dataSource = ref([{}])
const reportTypeList = ref([
	{ value: 1, label: '日报' },
	{ value: 2, label: '周报' },
	{ value: 3, label: '月报' },
	{ value: 4, label: '季报' },
	{ value: 5, label: '年报' },
])
const dataObj = ref({
	visible: false,
	titleText: '',
	showLock: false,
	isType: '',
	id: '',
})
const informationData = ref({
	reportType: undefined,
	reportDate: null,
	storehouseName: '',
	current: 1,
	size: 10
})
// 表格分页
const onChangePage = (ev) => {
	informationData.value = { ...ev }
	if (isShowName.value == '1') {
		informationData.value.reportType = undefined
		informationData.value.reportDate = null
		informationData.value.storehouseName = ''
	}

	onSearch()
}
// 列表分页
const onSearch = () => {
	const fd = { ...informationData.value }
	reserveDataApi.getArchivePage(fd).then((res) => {
		dataSource.value = []
		dataSource.value = res.records
		// dataSource.value.forEach(i => {
		// 	switch (i.reportType) {
		// 		case 1:
		// 			i.reportType = '日报'
		// 			break
		// 		case 2:
		// 			i.reportType = '周报'
		// 			break
		// 		case 3:
		// 			i.reportType = '月报'
		// 			break
		// 		case 4:
		// 			i.reportType = '季报'
		// 			break
		// 		case 5:
		// 			i.reportType = '年报'
		// 			break
		// 		default: ''
		// 			break
		// 	}
		// })
		informationData.value.total = res.total
	})
}
const isShowName = ref('1')
// 查询
const searchData = () => {
	informationData.value.current = 1
	if (informationData.value.total > 10) {
		isShowName.value = '2'
	} else {
		isShowName.value = '1'
	}
	onSearch()
}
// 重置
const reset = () => {
	dataObj.value.isType = ''
	informationData.value = {
		reportType: undefined,
		reportDate: null,
		storehouseName: '',
		current: 1,
		size: 10
	}
	onSearch()
}
// 新增
const addData = () => {
	dataObj.value.isType = '1'
	dataObj.value.titleText = '新增粮情检查档案'
	dataObj.value.visible = true
	dataObj.value.showLock = false
}
// 查看
const check = (row) => {
	dataObj.value.id = row.id
	dataObj.value.status = row.status
	dataObj.value.isType = '3'
	dataObj.value.titleText = '查看粮情检查档案'
	dataObj.value.visible = true
	dataObj.value.showLock = true
}
// 编辑
const edit = (row) => {
	dataObj.value.id = row.id
	dataObj.value.status = row.status
	dataObj.value.isType = '2'
	dataObj.value.titleText = '编辑粮情检查档案'
	dataObj.value.visible = true
	dataObj.value.showLock = false
}
// 删除
const deleteData = (row) => {
	reserveDataApi.getArchiveDelete([{ id: row.id }]).then((res) => {
		onSearch()
	})
}
// 子组件传递
const isVisible = (val) => {
	dataObj.value.visible = false
	dataObj.value.showLock = false
	dataObj.value.titleText = ''
	informationData.value.reportType = undefined
	informationData.value.reportDate = null
	informationData.value.storehouseName = ''
	onSearch()
}

onMounted(() => {
	onSearch()
})
</script>
<style scoped>
.header {
	display: flex;
	padding: 20px;
	width: 100%;
}

.input-box {
	display: flex;
	width: 100%;
}

.input-box-sle {
	width: 56%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 24px;
}

.title-box {
	width: 68px;
}

.inputBoxContent {
	width: 400px;
}

.silt-title {
	width: 280px;
	display: flex;
	align-items: center;
	margin-right: 32px;
}

.btnBox {
	display: flex;
}

.ant-input-group-addon {
	border: 0;
}

.ant-input,
.ant-btn {
	border-radius: 5px;
}

.ant-pagination {
	margin-top: 12px;
	float: right;
	margin-right: 16px;
}

.add-btn {
	background-color: rgba(112, 125, 233);
}

.check {
	background-color: rgba(112, 125, 233);
	color: #fff;
	margin-left: 8px;
}

.edit {
	background-color: rgba(222, 186, 80);
	color: #fff;
	margin-left: 8px;
}

.flow {
	background-color: #22ce8d;
	color: #fff;
	margin-left: 8px;
}

.delete {
	background-color: rgba(255, 70, 70);
	color: #fff;
	margin-left: 8px;
}

.audit {
	background-color: rgba(83, 184, 36);
	color: #fff;
	margin-left: 8px;
}

.ant-table-thead>tr>th {
	text-align: center;
}

.ant-table-tbody>tr>td {
	text-align: center;
}

.ant-select-selector {
	display: none !important;
}

::v-deep .ant-pagination-options {
	display: none !important;
}
</style>
