<template>
	<view class="meal-report-container">
		<!-- 日期和时间选择区域 -->
		<view class="date-time-wrap">
			<view class="picker-item">
				<text class="picker-label">餐别：</text>
				<uni-data-select v-model="queryParams.mealType" :localdata="range" @change="getList"></uni-data-select>
			</view>
			<!-- 报餐日期选择 -->
			<view class="picker-item">
				<text class="picker-label">报餐日期：</text>
				<uni-datetime-picker v-model="queryParams.reportDate" type="date" placeholder="选择日期" @change="onDateConfirm"
					class="picker-input"></uni-datetime-picker>
			</view>

			<!-- 自定义截止时间选择 -->
			<view class="picker-item">
				<text class="picker-label">截止时间：</text>
				<view class="custom-time-picker" @click="openTimePopup">
					<text class="time-text">{{ formattedDeadlineTime }}</text>
					<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 报餐统计卡片 -->
		<view class="statistics-card">
			<view class="card-title">报餐人数统计</view>
			<view class="stats-grid">
				<!-- 第一行 -->
				<view class="stats-item">
					<text class="item-label">堂食人数</text>
					<text class="item-value">{{ validDineIn + invalidDineIn }}</text>
				</view>
				<view class="stats-item">
					<text class="item-label">打包人数</text>
					<text class="item-value">{{ validTakeout + invalidTakeout }}</text>
				</view>
				<view class="stats-item">
					<text class="item-label">总人数</text>
					<text class="item-value">{{ validTotal + invalidTotal }}</text>
				</view>

				<!-- 第二行 -->
				<view class="stats-item">
					<text class="item-label">有效堂食人数</text>
					<text class="item-value">{{ validDineIn }}</text>
				</view>
				<view class="stats-item">
					<text class="item-label">有效打包人数</text>
					<text class="item-value">{{ validTakeout }}</text>
				</view>
				<view class="stats-item">
					<text class="item-label">有效总人数</text>
					<text class="item-value">{{ validTotal }}</text>
				</view>

				<!-- 第三行 -->
				<view class="stats-item">
					<text class="item-label">无效堂食人数</text>
					<text class="item-value">{{ invalidDineIn }}</text>
				</view>
				<view class="stats-item">
					<text class="item-label">无效打包人数</text>
					<text class="item-value">{{ invalidTakeout }}</text>
				</view>
				<view class="stats-item">
					<text class="item-label">无效总人数</text>
					<text class="item-value">{{ invalidTotal }}</text>
				</view>
			</view>
		</view>

		<!-- 自定义时分秒选择弹窗 -->
		<uni-popup ref="timePopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="time-popup-content">
				<!-- 弹窗标题 -->
				<view class="popup-header">
					<text class="popup-title">选择截止时间</text>
					<view class="popup-btns">
						<button class="cancel-btn" @click="closeTimePopup">取消</button>
						<button class="confirm-btn" @click="confirmTime">确认</button>
					</view>
				</view>

				<!-- 时分秒选择区域 -->
				<view class="time-select-wrap">
					<!-- 小时选择 -->
					<view class="time-unit">
						<text class="unit-label">时</text>
						<uni-number-box v-model="timeSelect.hour" :min="0" :max="23" :step="1"
							@change="handleTimeChange"></uni-number-box>
					</view>

					<!-- 分钟选择 -->
					<view class="time-unit">
						<text class="unit-label">分</text>
						<uni-number-box v-model="timeSelect.minute" :min="0" :max="59" :step="1"
							@change="handleTimeChange"></uni-number-box>
					</view>

					<!-- 秒选择 -->
					<view class="time-unit">
						<text class="unit-label">秒</text>
						<uni-number-box v-model="timeSelect.second" :min="0" :max="59" :step="1"
							@change="handleTimeChange"></uni-number-box>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listMealReport
	} from "@/api/wms/mealReport";
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	import {
		getConfigKey
	} from '@/api/system/config.js'

	export default {
		name: 'MealReportStatistics',
		data() {
			return {
				queryParams: {
					mealType: '',
					reportDate: '',
					pageSize: 9999,
					pageNum: 1
				},
				deadlineDate: '', // 截止日期
				deadlineTime: '12:00:00', // 截止时间（原始值）
				// 时分秒选择器临时变量
				timeSelect: {
					hour: 12,
					minute: 0,
					second: 0
				},
				list: [],
				loading: false,
				// 统计数据
				validDineIn: 0,
				validTakeout: 0,
				validTotal: 0,
				invalidDineIn: 0,
				invalidTakeout: 0,
				invalidTotal: 0,
				range: []
			}
		},
		computed: {
			// 格式化截止时间显示（补零）
			formattedDeadlineTime() {
				const [hour, minute, second] = this.deadlineTime.split(':');
				return `${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`;
			}
		},
		onLoad() {
			// 初始化今日日期
			this.initTodayDate();
			// 初始化截止日期为今日
			this.deadlineDate = this.queryParams.reportDate;
			// 获取餐别字典数据
			this.getRangeData();
			// 加载报餐数据
			this.getList();
			this.getDeadlineConfig();
		},
		methods: {
			/** 初始化今日日期为yyyy-MM-dd格式 */
			initTodayDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				this.queryParams.reportDate = `${year}-${month}-${day}`;
			},

			getDeadlineConfig() {
				getConfigKey('hrm.meal.deadline').then(response => {
					this.queryParams.deadlineTime = response.msg || '16:00:00'
				})
			},

			/** 获取餐别字典数据 */
			getRangeData() {
				getDicts('hrm_meal_type').then(res => {
					this.range = res.data.map(item => ({
						text: item.dictLabel,
						value: item.dictValue
					}));
				});
			},

			/** 查询部门报餐列表 */
			getList() {
				this.loading = true;
				listMealReport(this.queryParams).then(response => {
					this.list = response.rows || [];
					this.loading = false;
					this.calcTableSum();
				}).catch(error => {
					console.error('获取报餐数据失败：', error);
					this.loading = false;
				});
			},

			/** 核心逻辑：区分有效/无效报餐统计 */
			calcTableSum() {
				let validDine = 0,
					validTake = 0,
					validAll = 0;
				let invalidDine = 0,
					invalidTake = 0,
					invalidAll = 0;

				this.list.forEach(item => {
					// 处理空值，转为数字
					const dine = item.dineInPeople ? Number(item.dineInPeople) : 0;
					const take = item.takeoutPeople ? Number(item.takeoutPeople) : 0;
					const total = item.totalPeople ? Number(item.totalPeople) : 0;

					// 判断当前报餐是否有效
					if (this.isValidMealReport(item.createTime)) {
						validDine += dine;
						validTake += take;
						validAll += total;
					} else {
						invalidDine += dine;
						invalidTake += take;
						invalidAll += total;
					}
				});

				// 赋值到统计变量
				this.validDineIn = validDine;
				this.validTakeout = validTake;
				this.validTotal = validAll;
				this.invalidDineIn = invalidDine;
				this.invalidTakeout = invalidTake;
				this.invalidTotal = invalidAll;
			},

			/** 判断报餐是否有效：创建时间在截止时间之前则有效 */
			isValidMealReport(createTime) {
				if (!createTime) return false;

				// 拼接完整的截止时间字符串
				const deadlineDateTime = `${this.deadlineDate || this.queryParams.reportDate} ${this.deadlineTime}`;
				// 比较时间
				const createTimeObj = new Date(createTime);
				const deadlineTimeObj = new Date(deadlineDateTime);

				return createTimeObj <= deadlineTimeObj;
			},

			/** 报餐日期选择确认 */
			onDateConfirm(e) {
				this.queryParams.reportDate = e;
				// 如果截止日期未选择，同步为报餐日期
				if (!this.deadlineDate) {
					this.deadlineDate = e;
				}
				this.getList();
			},

			/** 截止日期选择确认 */
			onDeadlineDateConfirm(e) {
				this.deadlineDate = e;
				this.calcTableSum();
			},

			// ===== 自定义时间选择器逻辑 =====
			/** 打开时间选择弹窗 */
			openTimePopup() {
				// 解析当前时间到选择器
				const [hour, minute, second] = this.deadlineTime.split(':').map(Number);
				this.timeSelect = {
					hour,
					minute,
					second
				};
				// 打开弹窗
				this.$refs.timePopup.open('center');
			},

			/** 关闭时间选择弹窗 */
			closeTimePopup() {
				this.$refs.timePopup.close();
			},

			/** 处理时分秒数值变化 */
			handleTimeChange() {
				// 确保数值在合法范围内
				this.timeSelect.hour = Math.max(0, Math.min(23, this.timeSelect.hour));
				this.timeSelect.minute = Math.max(0, Math.min(59, this.timeSelect.minute));
				this.timeSelect.second = Math.max(0, Math.min(59, this.timeSelect.second));
			},

			/** 确认选择的时间 */
			confirmTime() {
				// 格式化时分秒（补零）
				const hour = String(this.timeSelect.hour).padStart(2, '0');
				const minute = String(this.timeSelect.minute).padStart(2, '0');
				const second = String(this.timeSelect.second).padStart(2, '0');
				// 更新截止时间
				this.deadlineTime = `${hour}:${minute}:${second}`;
				// 重新计算统计数据
				this.calcTableSum();
				// 关闭弹窗
				this.closeTimePopup();
			}
		}
	}
</script>

<style scoped>
	/* 容器样式 */
	.meal-report-container {
		padding: 15px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 日期时间选择区域 */
	.date-time-wrap {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 20px;
		background-color: #fff;
		padding: 15px;
		border-radius: 8px;
	}

	.picker-item {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.picker-label {
		font-size: 14px;
		color: #333;
		min-width: 80px;
	}

	.picker-input {
		flex: 1;
	}

	/* 自定义时间选择器样式 */
	.custom-time-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 10px;
		border: 1px solid #eee;
		border-radius: 4px;
		background-color: #fff;
	}

	.time-text {
		font-size: 14px;
		color: #333;
	}

	/* 统计卡片样式 */
	.statistics-card {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		padding: 12px 15px;
		border-bottom: 1px solid #eee;
	}

	/* 网格布局：3列 */
	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border: 1px solid #eee;
		border-top: none;
	}

	/* 统计项样式 */
	.stats-item {
		padding: 12px 8px;
		text-align: center;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
		font-size: 14px;
	}

	/* 去掉最后一列右边框 */
	.stats-grid .stats-item:nth-child(3n) {
		border-right: none;
	}

	/* 去掉最后一行下边框 */
	.stats-grid .stats-item:last-child,
	.stats-grid .stats-item:nth-last-child(2),
	.stats-grid .stats-item:nth-last-child(3) {
		border-bottom: none;
	}

	/* 标签和值样式 */
	.item-label {
		display: block;
		color: #666;
		font-size: 12px;
		margin-bottom: 4px;
	}

	.item-value {
		display: block;
		color: #333;
		font-size: 15px;
		font-weight: 500;
	}

	/* 时间弹窗样式 */
	.time-popup-content {
		background-color: #fff;
		padding-bottom: 20px;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		border-bottom: 1px solid #eee;
	}

	.popup-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.popup-btns {
		display: flex;
		gap: 10px;
	}

	.cancel-btn,
	.confirm-btn {
		padding: 6px 12px;
		font-size: 14px;
		border-radius: 4px;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
		border: 1px solid #eee;
	}

	.confirm-btn {
		background-color: #007aff;
		color: #fff;
		border: none;
	}

	/* 时分秒选择区域 */
	.time-select-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 20px 15px;
	}

	.time-unit {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.unit-label {
		font-size: 12px;
		color: #999;
	}

	.colon {
		font-size: 20px;
		color: #333;
		margin: 0 5px;
	}

	/* 适配小屏手机 */
	@media (max-width: 375px) {
		.stats-item {
			padding: 10px 5px;
		}

		.item-label {
			font-size: 11px;
		}

		.item-value {
			font-size: 14px;
		}

		.time-select-wrap {
			gap: 5px;
			padding: 15px 10px;
		}
	}
</style>