<template>
	<view class="container">

		<!-- 信息栏 -->
		<view class="info-bar">
			<view class="info-title">住房档案变更（房屋坐落变更）</view>
			<view class="info-dept">公积金管理中心</view>
		</view>

		<!-- 日历 -->
		<view class="calendar-wrap">
			<view class="calendar-header">
				<text class="week-item" v-for="week in weekList" :key="week">{{ week }}</text>
			</view>

			<view class="date-row" v-for="(row, index) in calendarList" :key="index">
				<view class="date-item" :class="{
            active: item && item.active,
            has: item && item.isAvailable,
            disabled: !item || !item.isAvailable
          }" v-for="(item, idx) in row" :key="idx" @click="selectDate(item)">

					<text class="date-num">{{ item ? getDay(item.date) : '无' }}</text>
					<text class="date-status" v-if="item">{{ item.isAvailable ? '有' : '无' }}</text>
				</view>
			</view>
		</view>

		<!-- 时段 -->
		<view class="time-list">
			<view class="time-item" :class="{ selected: item.selected, disabled: item.remainingCount <= 0 }"
				v-for="item in currentTimeSlots" :key="item.time" @click="selectTime(item)">
				<view>{{ item.time }}</view>
				<view>可预约 {{ item.remainingCount }}</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer-bar">
			<view class="selected-info">已选：{{ selectedDate }} {{ selectedTime }}</view>
			<view class="btn-box">
				<button class="btn-gray" @click="handleGoBack">返回</button>
				<button class="btn-blue" @click="handleNext">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		availableDate
	} from '@/api/reserve.js'

	export default {
		data() {
			return {
				weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
				dateList: [],
				calendarList: [],
				currentTimeSlots: [],
				selectedDate: "",
				selectedTime: "",
				itemData: {}
			};
		},
		onLoad(options) {
			this.itemData = JSON.parse(decodeURIComponent(options.data))
			this.fetchData()
		},
		methods: {
			fetchData() {
				availableDate({
					itemId: this.itemData.id
				}).then(res => {
					if (res.code === 200) {
						this.dateList = res.data
						this.initCalendar()
						// 兼容无数据/首条不可选情况
						const firstAva = this.dateList.find(item => item.isAvailable)
						firstAva && this.selectDate(firstAva)
					}
				})
			},

			// 核心重写：100%贴合需求 - 按weekDayName对列+跨周换行+今日为起点前后空
			initCalendar() {
				// 初始化两行（最多跨周展示两行，满足业务场景）
				const row1 = Array(7).fill(null) // 第一行（今日所在周）
				const row2 = Array(7).fill(null) // 第二行（跨周后的下一周）
				// 星期转列索引映射（固定匹配表头）
				const weekToCol = {
					"星期一": 0,
					"星期二": 1,
					"星期三": 2,
					"星期四": 3,
					"星期五": 4,
					"星期六": 5,
					"星期日": 6
				}
				// 今日是列表第一条，获取今日所在星期列，作为展示起点
				const today = this.dateList[0]
				if (!today) {
					this.calendarList = [row1, row2]
					return
				}
				const todayCol = weekToCol[today.weekDayName]
				// 遍历所有日期，按规则分配到对应行/列
				this.dateList.forEach(item => {
					const col = weekToCol[item.weekDayName]
					if (col === undefined) return
					// 规则：今日所在列及右侧 → 第一行；今日所在列左侧（跨周）→ 第二行
					if (col >= todayCol) {
						row1[col] = item
					} else {
						row2[col] = item
					}
				})
				// 最终日历列表（仅保留有数据的行，无数据则不展示）
				this.calendarList = [row1]
				if (row2.some(item => item)) {
					this.calendarList.push(row2)
				}
			},

			getDay(date) {
				if (!date) return "";
				return date.split("-")[2];
			},

			formatDate(date) {
				const arr = date.split("-");
				return arr[0] + "-" + arr[1] + "-" + arr[2];
			},

			selectDate(item) {
				if (!item || !item.isAvailable) return;
				this.selectedTime = ''
				this.dateList.forEach(i => (i.active = false));
				item.active = true;
				this.selectedDate = this.formatDate(item.date);
				this.currentTimeSlots = (item.timeSlots || []).map(t => {
					return {
						...t,
						selected: false
					};
				});
				if (this.currentTimeSlots.length > 0) {
					this.selectTime(this.currentTimeSlots[0]);
				}
			},

			selectTime(item) {
				if (item.remainingCount <= 0) return;
				this.currentTimeSlots.forEach(t => (t.selected = false));
				item.selected = true;
				this.selectedTime = item.time;
			},

			handleGoBack() {
				uni.navigateBack();
			},

			handleNext() {
				if (!this.selectedDate || !this.selectedTime) {
					uni.showToast({
						title: "请选择完整",
						icon: "none"
					});
					return;
				}

				const data = JSON.stringify(this.itemData)
				const time = this.selectedDate + " " + this.selectedTime
				uni.navigateTo({
					url: `/pages/reserve/confirm?data=${encodeURIComponent(data)}&time=${time}`
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		background: #f5f7fa;
		min-height: 100vh;
	}

	.info-bar {
		background: linear-gradient(90deg, rgba(49, 134, 255, 1), #53a8ff);
		padding: 30rpx;
		color: #fff;
	}

	.info-title {
		font-size: 34rpx;
		margin-bottom: 10rpx;
	}

	.info-dept {
		font-size: 28rpx;
	}

	.calendar-wrap {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		border: 2rpx solid rgba(49, 134, 255, 1);
	}

	.calendar-header {
		display: flex;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.week-item {
		flex: 1;
		font-size: 30rpx;
		font-weight: 500;
	}

	.date-row {
		display: flex;
		margin-bottom: 20rpx;
	}

	.date-item {
		flex: 1;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.date-item.has {
		color: rgba(49, 134, 255, 1);
	}

	.date-item.active {
		background: rgba(49, 134, 255, 1);
		color: #fff;
	}

	.date-item.disabled {
		color: #ccc;
	}

	.date-num {
		font-size: 32rpx;
	}

	.date-status {
		font-size: 24rpx;
	}

	.time-list {
		padding: 20rpx;
	}

	.time-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.time-item.selected {
		background: #e8f3ff;
		border: 2rpx solid rgba(49, 134, 255, 1);
	}

	.time-item.disabled {
		color: #ccc;
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding: 20rpx 30rpx 40rpx;
		margin-top: 20rpx;
	}

	.selected-info {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.btn-box {
		display: flex;
		gap: 30rpx;
	}

	.btn-gray {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(242, 247, 255, 1);
		color: rgba(49, 134, 255, 1);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(208, 227, 255, 1);
	}

	.btn-blue {
		flex: 2;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(49, 134, 255, 1);
		color: #ffffff;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(208, 227, 255, 1);
	}
</style>