<!-- 粮情监管 - 粮情采集/粮情综合展示的详情 -->
<template>
	<a-drawer
		width="100%"
		placement="right"
		:closable="false"
		title="详情"
		:get-container="false"
		:style="drawerStyle"
		:visible="props.drawerData.showDetails"
	>
		<template #extra>
			<a-button shape="circle" @click="fullScreen">
				<fullscreen-outlined v-if="drawerStyle" />
				<fullscreen-exit-outlined v-else />
			</a-button>
			<a-button class="btn" shape="circle" danger @click="onClose">
				<template #icon><close-outlined /></template>
			</a-button>
		</template>
		<div class="tableBox">
			<h2>{{ props.drawerData.sendData.orgName }}粮情检测报表</h2>
			<table class="table">
				<tr>
					<th>仓房名称</th>
					<td>{{ props.drawerData.sendData.storehouseName }}仓</td>
					<th>粮油品种</th>
					<td>{{ props.drawerData.sendData.foodVarietyName }}</td>
					<th>储粮性质</th>
					<td>{{ props.drawerData.sendData.foodNature }}</td>
					<th>数量（t）</th>
					<td>{{ props.drawerData.sendData.kcsl }}</td>
				</tr>
				<tr>
					<th>检测时间</th>
					<td>{{ props.drawerData.sendData.gatherTime }}</td>
					<th>仓温（℃）</th>
					<td>{{ props.drawerData.sendData.inTemp }}</td>
					<th>仓湿（%RH）</th>
					<td>{{ props.drawerData.sendData.inH }}</td>
					<th>气温（℃）</th>
					<td>{{ props.drawerData.sendData.outTemp }}</td>
				</tr>
				<tr>
					<th>气湿（%RH）</th>
					<td>{{ props.drawerData.sendData.outH }}</td>
					<th>最高温（℃）</th>
					<td>{{ props.drawerData.sendData.tempMax }}</td>
					<th>最低温（℃）</th>
					<td>{{ props.drawerData.sendData.tempMin }}</td>
					<th>平均温（℃）</th>
					<td>{{ props.drawerData.sendData.tempAvg }}</td>
				</tr>
			</table>
			<table class="table" v-if="menuName == 'gather'">
				<tr>
					<template v-for="item in layerData" :key="item.id">
						<th>{{ item.lz }}层均温（℃）</th>
						<td>{{ item.lavg }}</td>
					</template>
				</tr>
			</table>
			<table class="table" v-if="menuName == 'gather'" v-html="tableHtml" />
		</div>
		<scatterModule v-if="showPointView" :pointList="pointList" :tableData="tableData" />
	</a-drawer>
</template>
<script setup>
	import { inject } from 'vue'
	import api from '@/api/RLGI/supervise.js'
	import scatterModule from '../grainCondition/scatter.vue'

	const tableHtml = ref('')
	const layerData = ref([])
	const pointList = ref([])
	const tableData = ref([])
	const menuName = inject('current')
	const showPointView = ref(false)
	const emit = defineEmits(['closeDrawer'])
	const drawerStyle = ref({ position: 'absolute' })
	const props = defineProps({
		drawerData: {
			type: Object,
			required: true
		}
	})

	onMounted(() => {
		getDateils()
		getColor()
		createWarehouseStructure()
	})
	// 获取层均温
	function getDateils() {
		api.getDetails({ id: props.drawerData.sendData.id }).then((res) => {
			layerData.value = res
		})
	}
	// 获取温度颜色
	function getColor() {
		pointList.value = props.drawerData.sendData.tempPoints
		showPointView.value = true
	}
	// 生成仓库点位结构
	function createWarehouseStructure() {
		tableData.value = []
		const list = JSON.parse(props.drawerData.sendData.tempPoints)
		const sortedData = list.sort((a, b) => {
			if (a.z !== b.z) return a.z - b.z
			if (a.x !== b.x) return a.x - b.x
			return a.y - b.y
		})

		for (let item of sortedData) {
			let floor = item.z
			if (!tableData.value[floor - 1]) {
				tableData.value[floor - 1] = []
			}
			let row = item.y
			if (!tableData.value[floor - 1][row - 1]) {
				tableData.value[floor - 1][row - 1] = []
			}
			tableData.value[floor - 1][row - 1].push(item)
		}

		//   const result = sortedData.reduce((acc, { temp, x, y, z }) => {
		//     if (!acc[z]) acc[z] = {};
		//     if (!acc[z][x]) acc[z][x] = {};
		//     acc[z][x][y] = temp;
		//     return acc;
		//   }, {});
		//   const arrayResult = Object.entries(result).map(([z, xs]) =>
		//     Object.entries(xs).map(([x, ys]) =>
		//       Object.entries(ys).map(([y, temp]) => ({ temp, x, y, z }))
		//     )
		//   );

		for (let layerIndex = 0; layerIndex < tableData.value.length; layerIndex++) {
			let layerHtml = `<tr><td class="line layer">${layerIndex + 1} 层</td>[[COLS]]</tr>`
			let temp = ''
			const rowList = tableData.value[layerIndex]
			for (let rowIndex = 0; rowIndex < rowList.length; rowIndex++) {
				const colList = rowList[rowIndex]
				temp += `<tr><td>${rowIndex + 1}</td>`
				const colLen = colList.length
				let colTemp = ''
				for (let i = 1; i <= colLen; i++) {
					colTemp += `<td class="line">${i}</td>`
				}
				layerHtml = layerHtml.replaceAll('[[COLS]]', colTemp)
				for (let colIndex = 0; colIndex < colList.length; colIndex++) {
					const col = colList[colIndex]
					temp += `<td>${col.temp}</td>`
				}
				temp += '</tr>'
			}
			tableHtml.value += layerHtml + temp
		}
	}

	// 全屏显示
	function fullScreen() {
		if (drawerStyle.value) {
			drawerStyle.value = ''
		} else {
			drawerStyle.value = { position: 'absolute' }
		}
	}
	// 关闭抽屉
	function onClose() {
		emit('closeDrawer')
	}
</script>
<style scoped lang="less">
	@import url(@/style/RLGI/grainCondition.less);
</style>
