<template>
	<view class="calendar-page">
		<!-- 顶部栏：年月选择器和功能按钮 -->
		<view class="top-bar">
			<!-- 年月选择器 -->
			<view class="month-picker">
				<uni-datetime-picker type="date" v-model="currentMonth" :clear-icon="false" />
			</view>
			<!-- 功能按钮 -->
			<view class="action-buttons">
				<button class="action-btn">分享</button>
				<button class="action-btn">周/月报</button>
				<button class="action-btn" @click="ShowExplainPopup = true">说明</button>
			</view>
		</view>

		<!-- 日历网格 -->
		<view class="calendar-grid">
			<!-- 星期标题 日期网格最上层的 一二三四五六日-->
			<view class="week-header">
				<text v-for="(day, index) in weekDays" :key="index" class="week-day">{{
					day
				}}</text>
			</view>
			<!-- 日期网格 -->
			<view class="date-grid">
				<view v-for="(date, index) in dates" :key="index" class="date-cell" :class="{ today: date.today }"
					@tap="selectDate(date)">
					<!-- 日期数字或“今” -->
					<text v-if="!date.today" class="date-number">{{ date.day }}</text>
					<text v-else class="today-text">今</text>
					<text v-if="date.planName" class="plan-name">{{ date.planName }}</text>
				</view>
			</view>
		</view>

		<view class="gridCellContent" v-if="ShowGridCellPopup && selectedDate" @click.self="ShowGridCellPopup = false">
			<GridCellContentPopup :date="selectedDate" />
		</view>

		<!-- 日历说明弹窗 -->
		<view class="explain-popup-overlay" v-if="ShowExplainPopup" @click.self="ShowExplainPopup = false">
			<view class="explain-popup">
				<!-- 弹窗头部 -->
				<view class="explain-header">
					<text class="explain-title">日历说明</text>
					<view class="close-btn" @click="ShowExplainPopup = false">
						<text>×</text>
					</view>
				</view>

				<!-- 说明列表 -->
				<view class="explain-list">
					<view class="explain-item">
						<view class="color-block blue"></view>
						<text class="item-label">分钟</text>
						<text class="item-desc">在场馆的运动时长</text>
					</view>
					<view class="explain-item">
						<view class="color-block green"></view>
						<text class="item-label">容量</text>
						<text class="item-desc">力量训练的总重量</text>
					</view>
					<view class="explain-item">
						<view class="color-block yellow"></view>
						<text class="item-label">课程</text>
						<text class="item-desc">训记或已结课的线下课程</text>
					</view>
					<view class="explain-item">
						<view class="color-block gray"></view>
						<text class="item-label">课程</text>
						<text class="item-desc">训记排课或待上课的线下课程</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
import DailyTemplateApi from '@/sheep/api/calendar/date';
import GridCellContentPopup from '@/pages/xunji/components/rili-components/grid-cell-content-popup.vue'
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';

// ====== 响应式数据 ======
// 调用组件获得当前的日期（currentMonth）
const weekDays = ref(['一', '二', '三', '四', '五', '六', '日']);
const dates = ref([]);
const today = new Date();
// 控制说明弹窗出现于否
const ShowExplainPopup = ref(false)
// 弹窗内的一些状态
const selectedDate = ref('');      // 用于存储选中的日期
const ShowGridCellPopup = ref(false)

// 自动获取当前年月
const now = new Date();
const currentMonth = ref(
	`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
);

// ====== 工具函数 ======
const formatDateKey = (y, m, d) => {
	return `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
};

// 将 [2026,1,23] 转为 '2026-01-23'
const arrayToDateStr = (arr) => {
	if (!Array.isArray(arr) || arr.length !== 3) return null;
	const [y, m, d] = arr;
	return `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
};

// ====== 生成日历数据 ======
const generateCalendar = (year, month) => {
	const firstDay = new Date(year, month - 1, 1);
	const lastDay = new Date(year, month, 0).getDate();
	let startWeekDay = firstDay.getDay(); // 0=周日
	const adjustedStart = startWeekDay === 0 ? 6 : startWeekDay - 1; // 周一为第0列

	const calendarDates = [];

	// 上月填充
	const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
	for (let i = adjustedStart; i > 0; i--) {
		const day = prevMonthLastDay - i + 1;
		const y = month === 1 ? year - 1 : year;
		const m = month === 1 ? 12 : month - 1;
		calendarDates.push({
			day,
			today: false,
			planName: '',
			dateKey: formatDateKey(y, m, day),
		});
	}

	// 本月
	for (let d = 1; d <= lastDay; d++) {
		const isToday =
			year === today.getFullYear() &&
			month === today.getMonth() + 1 &&
			d === today.getDate();
		calendarDates.push({
			day: d,
			today: isToday,
			planName: '',
			dateKey: formatDateKey(year, month, d),
		});
	}

	// 下月填充（凑满 6*7=42 格）
	const remaining = 42 - calendarDates.length;
	for (let d = 1; d <= remaining; d++) {
		const y = month === 12 ? year + 1 : year;
		const m = month === 12 ? 1 : month + 1;
		calendarDates.push({
			day: d,
			today: false,
			planName: '',
			dateKey: formatDateKey(y, m, d),
		});
	}

	return calendarDates;
};

// ====== 加载计划数据 ======
const loadPlans = async (year, month) => {
	try {
		const res = await DailyTemplateApi.getCalendarPlans(year, month);
		const plans = res.data || [];
		// 打印
		console.log('加载日历计划数据', plans)
		// 构建映射：'2026-01-23' -> '经典'
		const planMap = {};
		plans.forEach((plan) => {
			if (plan.name) {
				let dateStr;
				if (Array.isArray(plan.trainDate)) {
					dateStr = arrayToDateStr(plan.trainDate);
				} else if (typeof plan.trainDate === 'string') {
					dateStr = plan.trainDate;
				}
				if (dateStr) {
					planMap[dateStr] = plan.name;
				}
			}
		});

		// 附加 planName
		const newDates = generateCalendar(year, month).map((date) => ({
			...date,
			planName: planMap[date.dateKey] || '',
		}));

		dates.value = newDates;
		console.log('===========dates', dates)
	} catch (err) {
		console.error('加载日历失败:', err);
		// 失败时仍显示空日历
		const [y, m] = [
			parseInt(currentMonth.value.split('-')[0]),
			parseInt(currentMonth.value.split('-')[1]),
		];
		dates.value = generateCalendar(y, m);
	}
};
// 加载数据的方法
const loaddailytemplate = async (dateStr) => {
	if (!dateStr) return;
	console.log('加载具体日期数据：', dateStr);
	try {
		const res = await dailytemplateApi.getdailytemplate(String(dateStr));
		resdailyData.value = res.data || {};
	} catch (error) {
		console.error('加载失败:', error);
		resdailyData.value = {};
	}
};

// ====== 监听月份变化 ======
watch(
	currentMonth,
	(newVal) => {
		const [year, month] = newVal.split('-').map(Number);
		loadPlans(year, month);
		console.log('现在日月变化', currentMonth);
	},
	{ immediate: true },
);

// const selectDate = (date) => {
// 	uni.navigateTo({
// 		url: `/pages4/pages/xunji/xunji-rili-tianjia?date=${date.dateKey}`,
// 	});
// };

const selectDate = (date) => {
	console.log('【父组件】点击了日期：', date.dateKey);
	selectedDate.value = date.dateKey;
	ShowGridCellPopup.value = true;
	console.log('【父组件】ShowGridCellPopup 变为：', ShowGridCellPopup.value);
};

</script>

<style lang="scss" scoped>
.calendar-page {
	height: 100%;
	padding: 20rpx;
	background-color: white;
	box-sizing: border-box;

	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.month-picker {
			height: 40rpx;
			//border: 1px solid #666;
			border-radius: 50rpx;
			overflow: hidden;
			padding: 0 20rpx;

			:deep(.uni-date-x--border) {
				border: none !important;
			}

			:deep(.uni-date__x-input) {
				height: 40rpx;
				line-height: 40rpx;
			}

			// 微信小程序端样式适配
			// #ifdef MP-WEIXIN
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 200rpx;
			box-sizing: border-box;

			:deep(.uni-date-x) {
				height: 100%;
				min-height: 40rpx;
				border-radius: 50rpx;
				background-color: transparent;
				padding: 0;
				margin: 0;
				border: none !important;
				border-width: 0 !important;
				border-style: none !important;
			}

			:deep(.uni-date-editor--x) {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none !important;
				border-width: 0 !important;
				border-style: none !important;
			}

			:deep(.uni-date-editor--x.uni-date-x--border) {
				border: none !important;
				border-width: 0 !important;
				border-style: none !important;
				border-color: transparent !important;
			}

			:deep(.uni-date-x--border) {
				border: none !important;
				border-width: 0 !important;
				border-style: none !important;
				border-color: transparent !important;
			}

			:deep(.uni-date__x-input) {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #333;
				padding: 0;
				text-align: center;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			:deep(.icon-calendar) {
				display: none !important;
			}

			// #endif
		}
	}

	.action-buttons {
		display: flex;
		justify-content: flex-start;
		gap: 10rpx;

		:deep(uni-button),
		:deep(wx-button) {
			padding: 10rpx 20rpx;
			margin: 0;
			line-height: 1;
			border-radius: 20rpx;
			border: 1px solid #666;
			font-size: 20rpx;
		}
	}

	.calendar-grid {
		padding-bottom: 120rpx;
		// #ifdef MP-WEIXIN
		padding-bottom: 140rpx;
		// #endif

		.week-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.week-day {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #666;
			}
		}

		.date-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 10rpx;
		}

		.date-cell {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			border: 1px solid #eee;
			border-radius: 8rpx;
			font-size: 30rpx;
			color: #333;
			background-color: #f9fafc;
			padding-top: 10rpx;
			height: 240rpx;
			// #ifdef MP-WEIXIN
			height: 200rpx;
			// #endif
		}

		.date-cell.today {
			background-color: #fff2cc;
		}

		.today-text {
			color: #ff6b00;
			font-weight: bold;
		}

		/* ✅ 新增：待办事项样式（与你的设计风格一致） */
		.plan-name {
			margin-top: 10rpx;
			font-size: 22rpx;
			color: #ff6b35;
			background: rgba(255, 107, 53, 0.1);
			padding: 4rpx 10rpx;
			border-radius: 20rpx;
			max-width: 90%;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

/* 日历说明弹窗样式 */
.explain-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 999;

	.explain-popup {
		width: 100%;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;
		box-sizing: border-box;

		.explain-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.explain-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.close-btn {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
					color: #666666;
					line-height: 1;
				}
			}
		}

		.explain-list {
			.explain-item {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;

				.color-block {
					width: 40rpx;
					height: 40rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;

					&.blue {
						background-color: #a8d8ff;
					}

					&.green {
						background-color: #b8ff66;
					}

					&.yellow {
						background-color: #ffdd44;
					}

					&.gray {
						background-color: #f0f0f0;
						border: 1rpx solid #eee;
					}
				}

				.item-label {
					font-size: 28rpx;
					color: #333333;
					width: 80rpx;
					margin-right: 20rpx;
				}

				.item-desc {
					font-size: 28rpx;
					color: #666666;
					flex: 1;
				}
			}
		}
	}
}

.gridCellContent {
	position: fixed;
	/* 替换 height: 100% 为四边定位，确保占满全屏 */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	/* 提高层级，避免被其他 fixed 元素遮挡 */
	display: flex;
	align-items: flex-end;
	// 解决子组件弹窗的边距
	padding: 0 !important;
	margin: 0 !important;
	width: 100vw !important;
	box-sizing: border-box;
}
</style>

<!-- 微信小程序端全局样式 -->
<!-- #ifdef MP-WEIXIN -->
<style lang="scss">
.month-picker {

	.uni-date-editor--x.uni-date-x--border,
	.uni-date-x--border {
		border: none !important;
		border-width: 0 !important;
		border-style: none !important;
		border-color: transparent !important;
	}

	.uni-date-x {
		border: none !important;
		border-width: 0 !important;
		border-style: none !important;
	}

	.uni-date-editor--x {
		border: none !important;
		border-width: 0 !important;
		border-style: none !important;
	}
}
</style>
<!-- #endif -->