<!-- 粮情监管 - 粮情采集/粮情综合展示 -->
<template>
	<div class="pageBox">
		<div class="searchBox">
			<a-form ref="formRef" :model="pagination">
				<a-form-item>
					<a-button @click="detection('')"><tool-outlined />粮温检测</a-button>
				</a-form-item>
				<a-form-item label="仓房名称" name="ckmc">
					<a-input v-model:value="pagination.storehouseName" placeholder="请输入仓房名称" />
				</a-form-item>
				<a-form-item label="检测时间" name="jcsj">
					<a-date-picker
						show-time
						v-model:value="pagination.gatherTime"
						valueFormat="YYYY-MM-DD HH:mm:ss"
						placeholder="请选择检测时间"
					/>
				</a-form-item>
				<a-form-item>
					<a-button type="primary" @click="getTableData">查询</a-button>
					<a-button @click="resetForm">清空</a-button>
				</a-form-item>
			</a-form>
		</div>
		<div class="tableBox">
			<a-table :dataSource="tableData" :columns="columns" :pagination="pagination" @change="handleTableChange">
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.key === 'index'">{{
						pagination.size * (pagination.current - 1) + index + 1
					}}</template>
					<template v-else-if="column.key === 'cz'">
						<a-button type="link" @click="detection(record.storehouseCode)">{{
							record.storehouseName + '仓检测'
						}}</a-button>
					</template>
					<template v-else-if="column.key === 'xq'">
						<a-button size="small" type="primary" ghost @click="lookDetails(record)">详情</a-button>
					</template>
					<template v-else>
						{{ record[column.key] }}
					</template>
				</template>
			</a-table>
		</div>
		<grainCondition v-if="drawerData.showDetails" :drawerData="drawerData" @closeDrawer="closeDrawer" />
	</div>
</template>
<script setup>
	import { inject } from 'vue'
	import { useRouter } from 'vue-router'
	import api from '@/api/RLGI/supervise.js'
	import { message } from 'ant-design-vue'
	import grainCondition from '../drawerModule/grainCondition.vue'

	const formRef = ref()
	const menuName = inject('current')
	const emit = defineEmits(['closeDrawer'])
	const orgId = useRouter().currentRoute.value.query.orgId

	// 传给详情模块的数据
	const drawerData = reactive({
		sendData: '',
		showDetails: false,
		activeModule: ''
	})
	const tableData = ref([])
	// 分页器的配置
	const pagination = ref({
		total: 0,
		current: 1,
		size: 10,
		endJysj: '',
		// orgId: orgId,
		showTotal: (total) => `共 ${total} 条数据`, // 展示总共有几条数据
		'show-quick-jumper': true
	})

	onMounted(() => {
		getTableData()
	})
	function getTableData() {
		tableData.value = []
		api.collectList(pagination.value).then((res) => {
			tableData.value = res.records
			pagination.value.size = res.size
			pagination.value.total = res.total
			pagination.value.current = res.current
		})
	}
	// 查看详情
	function lookDetails(data) {
		drawerData.sendData = data
		drawerData.showDetails = true
	}
	// 分页事件
	function handleTableChange(val) {
		pagination.value.current = val.current
		getTableData()
	}
	// 清空搜索条件
	function resetForm() {
		formRef.value.resetFields()
	}

	// 检测温度
	function detection(code) {
		let obj = {
			ilqYq: 0,
			orgId: orgId,
			storehouseCode: code
		}
		api.sendStoreDetection(obj).then((res) => {
			message.success('检测完成')
			getTableData()
		})
	}

	// 关闭抽屉
	function closeDrawer() {
		drawerData.showDetails = false
	}

	// 切换菜单关闭抽屉
	watch(menuName, (val) => {
		drawerData.showDetails = false
	}),
		{ immediate: true, deep: true }
	const columns = [
		{ key: 'index', width: 60, title: '序号', align: 'center' },
		{ key: 'storehouseName', width: 110, title: '仓房名称', align: 'center' },
		{ key: 'foodVarietyName', title: '品种', align: 'center' },
		{ key: 'foodNature', title: '性质', align: 'center' },
		{ key: 'gatherTime', width: 160, title: '检测时间', align: 'center' },
		{ key: 'inTemp', width: 110, title: '仓温（℃）', align: 'center' },
		{ key: 'inH', width: 120, title: '仓湿（%RH）', align: 'center' },
		{ key: 'tempMax', width: 130, title: '最高粮温（℃）', align: 'center' },
		{ key: 'tempMin', width: 130, title: '最低粮温（℃）', align: 'center' },
		{ key: 'tempAvg', width: 130, title: '平均粮温（℃）', align: 'center' },
		{ key: 'cz', width: 100, title: '操作', align: 'center' },
		{ key: 'xq', width: 100, title: '详情', align: 'center' }
	]
</script>
<style scoped lang="less">
	.pageBox {
		height: calc(100vh - 310px);
		// overflow: hidden;
		position: relative;
		.searchBox {
			margin: 10px 0;
			.ant-form {
				overflow: hidden;
				.ant-form-item {
					float: left;
					margin-right: 10px;
					.ant-form-item-label {
						width: 120px;
					}
					.ant-select {
						width: 220px;
					}
					.ant-picker {
						width: 180px;
					}
					.ant-btn {
						margin: 0 8px;
					}
				}
			}
		}
	}
	.tableBox {
		::v-deep(.ant-table) {
			.ant-table-content {
				overflow: auto;
				height: calc(100vh - 430px);
			}
		}
	}
</style>
