<template>
	<view class="meeting-room-detail">
		<!-- 顶部轮播图 -->
		<u-swiper class="room-swiper" :list="list1" height="420" indicator indicatorMode="dot"
			indicatorActiveColor="#2979ff" bgColor="#f8faff">
		</u-swiper>

		<!-- 会议室基本信息卡片 -->
		<view class="info-card">
			<view class="room-info">
				<text class="room-name">{{detail.title}}</text>
				<view class="meta-info">
					<text class="room-capacity"> 可容纳 {{detail.maxNum}} 人</text>
				</view>
				<text class="room-desc" v-if="detail.description">{{detail.description}}</text>
			</view>
		</view>

		<!-- 预订信息卡片 -->
		<view class="booking-card">
			<view class="card-header">
				<text class="card-title">预订信息</text>
			</view>

			<!-- 日期选择 -->
			<view class="date-section">
				<view class="section-header">
					<u-icon name="calendar" size="38" color="#2979ff"></u-icon>
					<text class="section-title">选择日期</text>
				</view>
				<view class="date-display" @click="showCalendar = true">
					<text>{{ formattedSelectedDate }}</text>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>

			<!-- 时间选择 -->
			<view class="time-section">
				<view class="section-header">
					<u-icon name="clock" size="34" color="#2979ff"></u-icon>
					<text class="section-title">选择时间段</text>
				</view>
				<view class="time-picker">
					<view class="time-selector" @click="showStartTimePicker = true">
						<text class="time-label">开始</text>
						<view class="time-display">
							{{ selectedStartTime }}
						</view>
					</view>
					<view class="time-separator">—</view>
					<view class="time-selector" @click="showEndTimePicker = true">
						<text class="time-label">结束</text>
						<view class="time-display">
							{{ selectedEndTime }}
						</view>
					</view>
				</view>
			</view>

			<!-- 新增备注输入区域 -->
			<view class="remark-section">
				<view class="section-header">
					<u-icon name="edit-pen" size="34" color="#2979ff"></u-icon>
					<text class="section-title">备注信息</text>
				</view>
				<u--textarea
					v-model="remark"
					placeholder="请输入备注信息(选填)"
					count
					maxlength="200"
					height="120"
					border="none"
					:customStyle="{background: '#f8f9fa', borderRadius: '12rpx', padding: '20rpx'}"
				></u--textarea>
			</view>
		</view>

		<!-- 预定须知卡片 -->
		<view class="notice-card">
			<view class="card-header">
				<u-icon name="info-circle" size="34" color="#2979ff"></u-icon>
				<text class="card-title">预订须知</text>
			</view>
			<view class="notice-list">
				<view class="notice-item" v-for="(item, index) in noticeList" :key="index">
					<text class="notice-index">{{ index + 1 }}.</text>
					<text class="notice-content">{{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 底部固定操作栏 -->
		<view class="action-bar">
			<u-button type="primary" shape="circle" @click="handleBook">立即预订</u-button>
		</view>

		<!-- 日历组件 -->
		<u-calendar :key="calendarKey" :show="showCalendar" mode="single" :min-date="minDate" :max-date="maxDate"
			@confirm="handleDateConfirm" @close="showCalendar = false" :mask-close-able="true"></u-calendar>

		<!-- 时间选择器 -->
		<u-datetime-picker :show="showStartTimePicker" v-model="startTimePickerValue" mode="time" format="HH:mm"
			@confirm="handleStartTimeConfirm" @cancel="showStartTimePicker = false"></u-datetime-picker>

		<u-datetime-picker :show="showEndTimePicker" v-model="endTimePickerValue" mode="time" format="HH:mm"
			@confirm="handleEndTimeConfirm" @cancel="showEndTimePicker = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/request';
	import {
		IMAGE_BASE_URL,
		BASE_URL
	} from '@/utils/config';
	import {
		formatTime,
		formatRelativeTime
	} from '@/utils/timeFormat';
	export default {
		data() {
			const now = new Date();
			const year = now.getFullYear();
			const month = (now.getMonth() + 1).toString().padStart(2, '0');
			const day = now.getDate().toString().padStart(2, '0');

			// 计算默认开始/结束时间
			let startHours = now.getHours();
			let startMinutes = now.getMinutes() < 30 ? 30 : 0;
			if (now.getMinutes() >= 30) startHours += 1;
			if (startHours >= 24) startHours = 0;

			let endHours = startHours + 1;
			let endMinutes = startMinutes;
			if (endHours >= 24) endHours = 0;

			return {
				// 会议室图片数组
				list1: [],
				detail: {},

				// 日历控制（默认隐藏）
				showCalendar: false,
				calendarKey: 0,

				// 时间选择器控制
				showStartTimePicker: false,
				showEndTimePicker: false,

				// 使用字符串格式的时间
				startTimePickerValue: `${startHours.toString().padStart(2, '0')}:${startMinutes.toString().padStart(2, '0')}`,
				endTimePickerValue: `${endHours.toString().padStart(2, '0')}:${endMinutes.toString().padStart(2, '0')}`,

				// 日期相关
				selectedDate: `${year}-${month}-${day}`,
				minDate: `${year}-${month}-${day}`,
				maxDate: `${year + 1}-12-31`,

				// 时间相关
				selectedStartTime: `${startHours.toString().padStart(2, '0')}:${startMinutes.toString().padStart(2, '0')}`,
				selectedEndTime: `${endHours.toString().padStart(2, '0')}:${endMinutes.toString().padStart(2, '0')}`,
				startTimeValue: `${startHours.toString().padStart(2, '0')}:${startMinutes.toString().padStart(2, '0')}`,
				endTimeValue: `${endHours.toString().padStart(2, '0')}:${endMinutes.toString().padStart(2, '0')}`,

				// 新增备注字段
				remark: '',
				
				noticeList: [
					'每次预订时间单位为小时，最少0.5小时起预订。',
					'使用优惠券支付，取消预订后优惠券会自动退还。',
					'使用微信、支付宝支付，取消订单后需要转社区运营人员进行退款。',
					'系统不支持自动退款。',
					'场地搭建，则需在活动开始48小时前支付相应保证金，具体费用可与运营人员进行确认。'
				],
				Id: '',
			};
		},
		onLoad(options) {
			if (options && options.Id) {
				this.Id = options.Id;
				console.log("====", this.Id)
			}
		},
		computed: {
			formattedSelectedDate() {
				if (!this.selectedDate) return '请选择日期';

				const date = new Date(this.selectedDate);
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const weekday = weekdays[date.getDay()];

				return `${month}月${day}日 ${weekday}`;
			}
		},
		mounted() {
			this.getDetail();
		},
		methods: {
			// 获取详情页面
			async getDetail() {
				try {
					const res = await get(`/api/v1/apps/home/metting-room/${this.Id}`);
					if (!res || !res.success) {
						throw new Error('获取详情失败');
					}
					console.log("======res", res)
					// 如果有返回的图片数据，可以这样处理
					if (res.data.imgs && res.data.imgs.length > 0) {
						this.list1 = res.data.imgs.map(img => {
							return img.startsWith('http') ? img : IMAGE_BASE_URL + img;
						});
					}
					this.detail = {
						...res.data
					};
				} catch (err) {
					console.error('获取详情失败:', err);
				}
			},
			handleDateConfirm(e) {
				let selectedDate;

				// 处理不同格式的返回值
				if (Array.isArray(e)) {
					selectedDate = e[0];
				} else if (e.result && Array.isArray(e.result)) {
					selectedDate = e.result[0];
				} else if (typeof e === 'string') {
					selectedDate = e;
				} else {
					selectedDate = e.date;
				}

				this.selectedDate = selectedDate;
				this.showCalendar = false;

				// 强制更新视图
				this.$nextTick(() => {
					this.calendarKey += 1;
				});
			},

			handleStartTimeConfirm(e) {
				this.selectedStartTime = e.value;
				this.startTimePickerValue = e.value;
				this.showStartTimePicker = false;
				this.adjustEndTime();
			},

			handleEndTimeConfirm(e) {
				this.selectedEndTime = e.value;
				this.endTimePickerValue = e.value;
				this.showEndTimePicker = false;
				this.validateTime();
			},

			adjustEndTime() {
				const [startH, startM] = this.selectedStartTime.split(':').map(Number);
				let [endH, endM] = this.selectedEndTime.split(':').map(Number);

				const startTotal = startH * 60 + startM;
				let endTotal = endH * 60 + endM;

				if (endTotal <= startTotal) {
					endTotal = startTotal + 60;
					endH = Math.floor(endTotal / 60);
					endM = endTotal % 60;
					this.selectedEndTime = `${endH.toString().padStart(2, '0')}:${endM.toString().padStart(2, '0')}`;
					this.endTimeValue = `${endH}:${endM}`;
					this.endTimePickerValue = this.selectedEndTime;
				}
			},

			validateTime() {
				const [startH, startM] = this.selectedStartTime.split(':').map(Number);
				const [endH, endM] = this.selectedEndTime.split(':').map(Number);

				const duration = (endH * 60 + endM) - (startH * 60 + startM);
				if (duration < 30) {
					uni.showToast({
						title: '最少预订30分钟',
						icon: 'none'
					});
					this.adjustEndTime();
				}
			},

			handleBook() {
				this.validateTime();
				
				// 构建预订信息对象
				const bookingInfo = {
					startAt: new Date(`${this.selectedDate} ${this.selectedStartTime}`),
					endAt: new Date(`${this.selectedDate} ${this.selectedEndTime}`),
					remark: this.remark,
					roomId: this.Id
				};
				
				
				console.log('提交的预订信息:', bookingInfo);
				
				uni.showToast({
					title: `已预订 ${this.formattedSelectedDate} ${this.selectedStartTime}-${this.selectedEndTime}`,
					icon: 'none'
				});
				
				// 这里可以添加实际的API调用
				post('/api/v1/app_auth/metting-room/order/register',bookingInfo).then((res)=>{
					console.log("===res",res)
					if (!res || !res.success) {
						throw new Error('会议室预定失败');
					}
					uni.showToast({
					    title: '会议室预定成功!',
					    icon: 'success'
					});
					this.remark = null;
					setTimeout(()=>{
						uni.navigateTo({
						  url: `/pages/meetingList/index`,
						  success: () => {
						    console.log('导航成功，ID:', id);
						  },
						  fail: (err) => {
						    console.error('导航失败:', err);
						    uni.showToast({
						      title: '打开详情页失败',
						      icon: 'none'
						    });
						  }
						});
					},4000)
					
					
				})
				// this.submitBooking(bookingInfo);
			},
		
		}
	};
</script>

<style lang="scss" scoped>
	.meeting-room-detail {
		padding: 20rpx;
		padding-bottom: 140rpx; /* 增大底部空间 */
		background-color: #f5f7fa;
	}

	/* 轮播图优化 */
	.room-swiper {
		width: 100%;
		height: 420rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	/* 卡片通用样式 */
	.info-card,
	.booking-card,
	.notice-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 会议室信息卡片 */
	.room-info {
		.room-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
			display: block;
		}

		.meta-info {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-bottom: 16rpx;

			text {
				font-size: 26rpx;
				color: #666;
				display: flex;
				align-items: center;
			}
		}

		.room-desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}

	/* 卡片标题 */
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.card-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-left: 10rpx;
		}
	}

	/* 日期选择区域 */
	.date-section {
		margin-bottom: 32rpx;

		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
		}

		.section-title {
			font-size: 28rpx;
			color: #333;
			margin-left: 8rpx;
		}

		.date-display {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			background: #f8f9fa;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	/* 时间选择区域 */
	.time-section {
		margin-bottom: 32rpx;
		
		.time-picker {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}

		.time-selector {
			flex: 1;

			.time-label {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 8rpx;
				display: block;
			}

			.time-display {
				padding: 20rpx;
				background: #f8f9fa;
				border-radius: 12rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}
		}

		.time-separator {
			color: #999;
			font-size: 28rpx;
			padding-top: 28rpx;
		}
	}

	/* 新增备注区域 */
	.remark-section {
		margin-top: 24rpx;
		
		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
		}
		
		.section-title {
			font-size: 28rpx;
			color: #333;
			margin-left: 8rpx;
		}
	}

	/* 预订须知 */
	.notice-card {
		.notice-list {
			.notice-item {
				display: flex;
				margin-bottom: 16rpx;
				line-height: 1.6;

				.notice-index {
					color: #2979ff;
					font-weight: bold;
					margin-right: 8rpx;
				}

				.notice-content {
					font-size: 26rpx;
					color: #666;
					flex: 1;
				}
			}
		}
	}

	/* 底部操作栏 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);

		.u-button {
			height: 88rpx; /* 增大高度 */
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	/* 动画效果 */
	.time-display,
	.date-display {
		transition: all 0.2s;

		&:active {
			background: #eef2f7;
			transform: scale(0.98);
		}
	}
</style>