<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="date-section">
				<view class="section-header">
					<u-icon name="tags" size="38" color="#2979ff"></u-icon>
					<text class="section-title">事由主题</text>
				</view>
				<view>
					<radio-group @change="thingCheckboxChange">
						<label v-for="item in thingThemes">
							<radio :value="item.value" style="transform:scale(0.7)"
								:checked="item.value === applyTheme" />
							<text style="font-size: 12px;color: #333333;">{{item.name}}</text>
						</label>
					</radio-group>
				</view>
			</view>

			<view class="date-section">
				<view class="section-header">
					<u-icon name="man-add" size="38" color="#2979ff"></u-icon>
					<text class="section-title">申请人类型</text>
				</view>
				<view class="date-display">
					<view class="">{{applyName}}</view>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</view>
				<view v-show="applyName=='单位申请'">
					<view style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入单位全称" border="null" v-model="companyName"></u--input>
					</view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入负责人姓名" border="null" v-model="concatName"></u--input>
					</view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入负责人电话" border="null" type='tel' v-model="concatPhone"></u--input>
					</view>
				</view>

				<view v-show="applyName=='个人申请'">
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入姓名" border="null" v-model="userName"></u--input>
					</view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入手机号" border="null" type="tel" v-model="userPhone"></u--input>
					</view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入身份证号" border="null" type="idcard" v-model="userCardId"></u--input>
					</view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入申请人地址" border="null" v-model="userAddress"></u--input>
					</view>
				</view>
			</view>

			<view class="date-section">
				<view class="section-header">
					<u-icon name="pushpin" size="38" color="#2979ff"></u-icon>
					<text class="section-title">申请场次及人数(选填)</text>
				</view>

				<view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入场次" border="null" v-model="num"></u--input>
					</view>
					<view class="" style="margin-top: 10px;background-color: #f8f9fa;">
						<u--input placeholder="请输入人数" border="null" v-model="counter"></u--input>
					</view>
				</view>
			</view>
			<!-- 时间选择 -->
			<view class="time-section">
				<view class="section-header">
					<u-icon name="clock" size="30" color="#2979ff"></u-icon>
					<text class="section-title">借用时间</text>
				</view>
				<view class="time-picker" v-if="!isSelfStudy">
					<view class="time-selector" @click="borrowTimeShow = true">
						<text class="time-label">日期</text>
						<view class="time-display">{{ borrowTimeData }}
						</view>
					</view>
				</view>
				<view class="time-picker" v-if="!isSelfStudy">
					<view class="time-selector" @click="noIsSelfStudy = true;pickerType=1">
						<text class="time-label">开始</text>
						<view class="time-display">
							{{ startTime }}
						</view>
					</view>
					<view class="time-separator">—</view>
					<view class="time-selector" @click="noIsSelfStudy = true;pickerType=2">
						<text class="time-label">结束</text>
						<view class="time-display">
							{{ endTime }}
						</view>
					</view>
				</view>
				<view class="time-picker" v-if="isSelfStudy">
					<view class="time-selector" @click="showStartTimePicker = true">
						<text class="time-label">开始</text>
						<view class="time-display">
							{{ startTime }}
						</view>
					</view>
					<view class="time-separator">—</view>
					<view class="time-selector" @click="showEndTimePicker = true">
						<text class="time-label">结束</text>
						<view class="time-display">
							{{ endTime }}
						</view>
					</view>
				</view>
			</view>
			<!-- 			<view class="date-section">
				<view class="section-header">
					<u-icon name="list-dot" size="38" color="#2979ff"></u-icon>
					<text class="section-title">使用情况</text>
				</view>
				<view>
					<checkbox-group @change="usagesCheckboxChange" v-model="usage">
						<label v-for="item in usages">
							<checkbox :value="item.value" style="transform:scale(0.7)" /><text
								style="font-size: 12px;color: #333333;">{{item.name}}</text>
						</label>
					</checkbox-group>
				</view>
			</view> -->
			<view class="date-section">
				<view class="section-header">
					<u-icon name="list-dot" size="38" color="#2979ff"></u-icon>
					<text class="section-title">申请理由</text>
				</view>
				<view>
					<u--input placeholder="请输入申请理由" border="null" v-model="reason"></u--input>
				</view>
			</view>
			<!-- 			<view class="date-section" v-show="applyName=='个人申请'">
				<view class="section-header">
					<u-icon name="plus-circle" size="38" color="#2979ff"></u-icon>
					<text class="section-title">签字</text>
				</view>
				<view class="upload-item" v-if="signUrl">
				  <image :src="signUrl"  mode="aspectFill" @click="previewSign()"></image>
				  <view class="delete-btn" @click="handleDeleteSign()">
				    <u-icon name="close" color="#fff" size="24"></u-icon>
				  </view>
				</view>
				<view class="upload-btn" @click="signShow=true" v-if="!signUrl">
				  <u-icon name="plus" size="40" color="#c0c4cc"></u-icon>
				</view>
			</view> -->
			<view class="date-section" v-show="applyName=='单位申请'">
				<view class="section-header">
					<u-icon name="plus-circle" size="38" color="#2979ff"></u-icon>
					<text class="section-title">上传印章</text>
				</view>
				<!-- 上传照片/视频 - 完全重写的上传组件 -->
				<gx-upload @upload-success="handleUploadSuccess" />
			</view>
			<view>
				<u-button type="primary" shape="circle" @click="handleBook()">立即预订</u-button>
			</view>
		</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-picker :show="noIsSelfStudy" :columns="startTimeColumns" @confirm="borrowTimeConfirm"
			@cancel="noIsSelfStudy=false"></u-picker>
		<u-datetime-picker :show="borrowTimeShow" v-model="borrowTime" mode="date" :min-date="Date.now()"
			@confirm="handleborrowTimeConfirm" @cancel="borrowTimeShow = false"></u-datetime-picker>
			<u-datetime-picker :show="showStartTimePicker" 
				                   v-model="startTimePickerValue" 
								   :min-date="Date.now()"
					               :mode="mode" 
								   @confirm="handleStartTimeConfirm"
								   @cancel="showStartTimePicker = false"
					               ref="startTimePicker"></u-datetime-picker>
		<u-datetime-picker :show="showEndTimePicker" v-model="endTimePickerValue" :min-date="Date.now()" :mode="mode"
			@confirm="handleEndTimeConfirm" @cancel="showEndTimePicker = false" ref="endTimePicker">
		</u-datetime-picker>
		<u-picker :show="showApplyType" :columns="applyTypeColumns" @confirm="applyConfirm"
			@cancel="showApplyType=false"></u-picker>
		<u-popup :show="readShow" mode="center" :round="10">
			<instructionVue @change='readChange' />
			<u-button type="primary" text="我已知晓" :disabled="hasReaded" @click="postApply"></u-button>
		</u-popup>
		<!-- 	<u-popup :show="signShow" mode="center" :round="10">
			<gxsign />
		</u-popup> -->
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/request';
	import {
		IMAGE_BASE_URL,
		BASE_URL
	} from '@/utils/config';
	import {
		formatTime,
		formatRelativeTime
	} from '@/utils/timeFormat';
	import {
		applyType,
		usages,
		thingThemes
	} from '@/utils/dict.js'
	import gxsign from '../../components/sign/sign.vue';
	import gxUpload from '../../components/gx-upload.vue';
	// import processImage from '../../components/process-image.vue'
	import instructionVue from '../../components/instruction.vue';

	export default {
		components: {
			// processImage,
			instructionVue,
			gxUpload,
			gxsign
		},
		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 {
				noIsSelfStudy: false,
				pickerType: 1,
				borrowTimeData: '',
				borrowTimeShow: false,
				borrowTime: Number(new Date()),
				companyName: '',
				startTimeColumns: [
					['08', '09', '10', '11', '13', '14', '15', '16', '17'],
					['00', '30']
				],
				readShow: false,
				hasReaded: true,
				signUrl: '',
				signShow: false,
				applyRules: {
					userPhone: {
						name: '申请人手机号',
						reg: /^1[3-9]\d{9}$/,
						errMsg: '请输入正确的手机号码格式'
					},
					userName: {
						name: '申请人姓名',
						reg: /^.+$/,
						errMsg: '申请人姓名不能为空'
					},
					userCardId: {
						name: '申请人身份证号',
						reg: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						errMsg: '身份证格式不正确'
					},
					userAddress: {
						name: '申请人地址',
						reg: /^.+$/,
						errMsg: '申请人地址不能为空'
					},
					concatName: {
						name: '负责人姓名',
						reg: /^.+$/,
						errMsg: '负责人姓名不能为空'
					},
					concatPhone: {
						name: '负责人电话',
						reg: /^1[3-9]\d{9}$/,
						errMsg: '请输入正确的手机号码格式'
					},
					companyName: {
						name: '公司名称',
						reg: /^.+$/,
						errMsg: '公司名称不能为空'
					},
					startTime: {
						name: '开始时间',
						reg: /^.+$/,
						errMsg: '开始时间不能为空'
					},
					endTime: {
						name: '结束时间',
						reg: /^.+$/,
						errMsg: '结束时间不能空'
					}
				},
				// userName: '谢雨晴',
				// userPhone: "15189809052",
				// userCardId: '32068319950902002X',
				// userAddress: '江苏省南通市紫琅科技城3号楼',
				// startTime: `2025-08-11 09:00`,  // 默认开始时间
				//   endTime: `2025-08-11 10:00`,    // 默认结束时间
				startTime: '', // 默认开始时间
				endTime: '', // 默认结束时间
				userName: '',
				userPhone: "",
				userCardId: '',
				userAddress: '',
				counter: '1',
				num: '1',
				// 会议室图片数组
				applyTheme: 1,
				applyArea: 1,
				thingThemes: thingThemes.getAll(),
				usage: [],
				usages: usages.getAll(),
				list1: [],
				detail: {},
				signatureShow: false,
				isSelfStudy: true, //dateTime,yearmonth
				mode: 'date',
				precision: null,
				concatPhone: '',
				reason: '',
				applySign: '', //签名地址
				// 日历控制（默认隐藏）
				showCalendar: false,
				calendarKey: 0,
				showApplyType: false,
				applyTypeColumns: [
					['个人申请', '单位申请']
				],
				applyType: 1, //企业1 个人2

				concatName: '', //联系人姓名
				concatPhone: '', //联系人电话
				// 时间选择器控制
				showStartTimePicker: false,
				showEndTimePicker: false,
				stampUrl: '',
				// 使用字符串格式的时间
				startTimePickerValue: `${year}-${month}-${day}`,
				endTimePickerValue: ``,
				applyInfo: {},
				// 日期相关
				selectedDate: `${year}-${month}-${day}`,
				minDate: `${year}-${month}-${day}`,
				maxDate: `${year + 1}-12-31`,



				startTimeValue: `09:00`,
				endTimeValue: `10:00`,
				startTimePickerValue: `2025-08-11 09:00`,
				endTimePickerValue: `2025-08-11 10:00`,
				// 新增备注字段
				remark: '',

				noticeList: [
					'',
					'使用优惠券支付，取消预订后优惠券会自动退还。',
					'使用微信、支付宝支付，取消订单后需要转社区运营人员进行退款。',
					'系统不支持自动退款。',
					'场地搭建，则需在活动开始48小时前支付相应保证金，具体费用可与运营人员进行确认。'
				],
				Id: '',
			};
		},
		onLoad(options) {
			if (options && options.Id) {
				this.Id = options.Id;
				this.isSelfStudy = JSON.parse(options.isSelfStudy)
				this.mode = options.isSelfStudy === 'true' ? 'year-month' : 'datetime'

				// 设置默认时间值
				if (this.isSelfStudy) {
					// 自习室模式，只显示年月
					const now = new Date();
					const year = now.getFullYear();
					const month = (now.getMonth() + 1).toString().padStart(2, '0');

					this.startTime = `${year}年${month}月`;
					this.endTime = `${year}年${month}月`;
					this.startTimePickerValue = this.startTime;
					this.endTimePickerValue = this.endTime;
				} else {
					// 普通会议室模式，显示完整日期时间
					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');
					this.borrowTimeData = `${year}年${month}月${day}日 `
					this.startTime = `09时00分`;
					this.endTime = `10时00分`;
					this.startTimePickerValue = this.startTime;
					this.endTimePickerValue = this.endTime;
				}

			}
		},
		computed: {
			formattedSelectedDate() {
				if (!this.selectedDate) return '请选择日期';

				if (this.isSelfStudy) {
					// 自习室模式，显示年月格式
					const [year, month] = this.selectedDate.split('-');
					return `${year}年${month}月`;
				} else {
					// 普通会议室模式，显示完整日期
					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}`;
				}
			},
			applyName() {
				if (this.applyType === 1) {
					return '单位申请'
				} else {
					return '个人申请'
				}
			},
			borrowMinDate() {
				// 今年1月1日 00:00:00 的时间戳
				const year = new Date().getFullYear();
				return new Date(year, 0, 1).getTime();
			},
			borrowMaxDate() {
				// 明年12月31日 23:59:59 的时间戳
				const year = new Date().getFullYear() + 1;
				return new Date(year, 11, 31, 23, 59, 59).getTime();
			}
		},

		mounted() {
			this.getDetail();
		},
		methods: {
			readChange(flag) {
				this.hasReaded = flag

			},
			showApplyTypeClick() {
				if (this.isSelfStudy) return
				this.showApplyType = true
			},
			handleUploadSuccess(e) {
				this.stampUrl = e
			},
			// 获取详情页面
			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
					};
					this.applyType = res.data.roomType
					console.log(this.applyType)
				} catch (err) {
					console.error('获取详情失败:', err);
				}
			},
			thingCheckboxChange(e) {
				this.applyTheme = JSON.parse(e.detail.value)
			},
			areaCheckboxChange(e) {
				this.applyArea = JSON.parse(e.detail.value)
			},
			usagesCheckboxChange(e) {
				console.log(e);
			},
			applyConfirm(e) {
				console.log(e.value[0])
				const list = ['个人申请', '单位申请']
				this.applyName = e.value[0]
				const index = list.findIndex((item) => item === e.value[0])
				console.log(index)
				if (index != -1) {
					this.applyType = parseInt(index + 1)
					this.showApplyType = false
				} else {
					console.log('未找到');
				}

			},
			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) {
				if (this.isSelfStudy) {
					// 自习室模式处理年月
					const date = new Date(e.value);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');

					this.startTime = `${year}年${month}月`;
					this.startTimePickerValue = this.startTime;
				} else {
					// 普通会议室模式处理完整日期时间
					const date = new Date(e.value);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');

					this.startTime = `${year}-${month}-${day} ${hours}:${minutes}`;
					this.startTimePickerValue = this.startTime;
				}

				this.showStartTimePicker = false;
			},
			borrowTimeConfirm(e) {
				console.log(e)
				if (this.pickerType === 1) {
					this.startTime = `${e.value[0]}时${e.value[1]}分`
				} else {
					this.endTime = `${e.value[0]}时${e.value[1]}分`
				}
				this.noIsSelfStudy = false
			},
			handleEndTimeConfirm(e) {
				if (this.isSelfStudy) {
					// 自习室模式处理年月
					const date = new Date(e.value);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');

					this.endTime = `${year}年${month}月`;
					this.endTimePickerValue = this.endTime;
				} else {
					// 普通会议室模式处理完整日期时间
					const date = new Date(e.value);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');

					this.endTime = `${year}-${month}-${day} ${hours}:${minutes}`;
					this.endTimePickerValue = this.endTime;
				}

				this.showEndTimePicker = false;
			},
			handleborrowTimeConfirm(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				this.borrowTimeData = `${year}年${month}月${day}日`;
				this.borrowTimeShow = false
			},
			/**
			 * 验证对象属性是否为空（Promise版）
			 * @param {Object} obj - 要验证的对象
			 * @param {Object} rules - 验证规则对象 (每个 rule.reg 应为 RegExp 对象)
			 * @returns {Promise} 返回Promise，resolve通过验证，reject失败信息
			 */
			validateObject(obj, rules = {}) {
				return new Promise((resolve, reject) => {
					// 参数校验
					if (!obj || typeof obj !== 'object' || obj === null) {
						return reject(new Error('第一个参数必须是一个非空对象'));
					}
					if (!rules || typeof rules !== 'object') {
						return reject(new Error('第二个参数（验证规则）必须是一个对象'));
					}

					const keys = Object.keys(obj);
					// 建议：只检查规则中定义的字段，而不是所有 obj 的 key
					// 这样更可控，避免验证不存在的规则
					for (const field of keys) {
						const rule = rules[field];
						if (!rule) {
							continue;
						}
						const errMsg = rule.errMsg
						const value = obj[field]; // 获取该字段的值
						// 检查该字段是否有规则定义
						if (!rule || !rule.reg || !rule.name) {
							console.warn(`验证规则 ${field} 不完整`);
							continue; // 跳过不完整的规则
						}
						// 确保 rule.reg 是一个 RegExp 对象
						if (!(rule.reg instanceof RegExp)) {
							reject(new Error(`${rule.name} 的验证规则不是有效的正则表达式`));
							return;
						}
						// 执行验证
						// 注意：这里也应处理 undefined 或 null 的情况
						const stringValue = value == null ? '' : String(value); // 转为字符串并处理 null/undefined
						if (!rule.reg.test(stringValue)) {
							return reject(new Error(errMsg)); // 找到第一个错误就立即 reject
						}
					}
					// 如果循环完成，说明所有验证都通过了
					resolve('所有属性验证通过');
				});
			},
			validateBorrowTime(applyInfo = {}) {
				return new Promise(async (resolve, reject) => {
					const response = await post('/api/v1/app_auth/metting-room/order/check_time', applyInfo)
					if (!response || !response.success) {
						reject(
						uni.showToast({
							title: response.msg,
							icon: 'none'
						})
						)
					}
					if (response.success == true) {
						resolve()
					}
				})
			},
			async handleBook() {
				try {
					this.readShow = false
					if (!this.isSelfStudy) {
						if (!this.startTime || !this.endTime) {
							return uni.showToast({
								title: '开始和结束时间不能为空',
								icon: 'none'
							})
						}
						if(this.startTime>this.endTime){
							return  uni.showToast({
								title: '开始时间不能晚于结束时间',
								icon: 'none'
							})
						}
					}
					// console.log(this.applyType);
					let bookingInfo = {
						roomId: this.Id,
						applyType: this.applyType,
						reason: this.reason,
						applyTheme: this.applyTheme
					};
					//个人申请
					if (this.applyType === 2) {
						const userApplyInfo = {
							userName: this.userName,
							userPhone: this.userPhone,
							userAddress: this.userAddress,
							userCardId: this.userCardId,
							startTime: this.isSelfStudy ? this.startTime.replace('年','-').replace('月','') :
								`${this.borrowTimeData.replace('年','-').replace('月','-').replace('日','')} ${this.startTime.replace('时',':').replace('分','')}`,
							endTime: this.isSelfStudy ? this.endTime.replace('年','-').replace('月','') : `${this.borrowTimeData.replace('年','-').replace('月','-').replace('日','')} ${this.endTime.replace('时',':').replace('分','')}`,
							counter: this.counter,
							num: this.num,
							// applyType:this.applyType
						}
						await this.validateObject(userApplyInfo, this.applyRules)

						const applyInfo = Object.assign(bookingInfo, userApplyInfo)
						await this.validateBorrowTime(applyInfo)
						// 页面A设置参数
						const app = getApp()
						app.globalData.applyInfo = applyInfo
						this.applyInfo = applyInfo
						this.readShow = true
					}
					//单位申请
					if (this.applyType === 1) {
						if (!this.stampUrl) return uni.showToast({
							title: '请上传印章',
							icon: 'none'
						})
						const userApplyInfo = {
							concatName: this.concatName,
							concatPhone: this.concatPhone,
							companyName: this.companyName,
							startTime: this.isSelfStudy ? this.startTime.replace('年','-').replace('月','') :
								`${this.borrowTimeData.replace('年','-').replace('月','-').replace('日','')} ${this.startTime.replace('时',':').replace('分','')}`,
							endTime: this.isSelfStudy ? this.endTime.replace('年','-').replace('月','') : `${this.borrowTimeData.replace('年','-').replace('月','-').replace('日','')} ${this.endTime.replace('时',':').replace('分','')}`,
							counter: this.counter,
							num: this.num,
							stampUrl: this.stampUrl,
							// applyType:this.applyType
						}
						const applyRules=Object.assign(this.applyRules,{num: {
						name: '申请场次',
						reg: /^[1-9]\d*$/,
						errMsg: '申请场次不能空且是正整数'
					},
					counter: {
						name: '申请人数',
						reg: /^[1-9]\d*$/,
						errMsg: '申请人数不能空且是正整数'
					},})
						await this.validateObject(userApplyInfo, applyRules)
						const applyInfo = Object.assign(bookingInfo, userApplyInfo)
						await this.validateBorrowTime(applyInfo)
						const app = getApp()
						app.globalData.applyInfo = applyInfo
						this.readShow = true
					}
				} catch (error) {
					uni.showToast({
						title: error.message,
						icon: 'none'
					})
				}

			},
			async postApply() {
				this.readShow = false
				uni.navigateTo({
					url: `/pages/sign/sign?isSelfStudy=${this.isSelfStudy}`
				})
				//单位申请
				// if(this.applyType===2){
				// 	uni.navigateTo({
				// 		url: `/pages/sign/sign?isSelfStudy=${this.isSelfStudy}`
				// 	})
				// }else{
				// 	// 这里可以添加实际的API调用
				// 	const res = await post('/api/v1/app_auth/metting-room/order/register', this.applyInfo)
				// 	if (!res || !res.success) {
				// 		throw new Error('会议室预定失败');
				// 	}

				// 	if (res.success == true) {
				// 		uni.redirectTo({
				// 			url: `/pages/docList/index?files=${JSON.stringify(res.data)}&&isSelfStudy=${this.isSelfStudy}`
				// 		})
				// 	}
				// }

			}

		}
	};
</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 {
		flex: 1;
		margin-bottom: 32rpx;

		.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;
			height: 15px;
		}

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

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

		.time-picker {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}

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

	}

	.upload-item,
	.upload-btn {
		width: 160rpx;
		height: 160rpx;
		margin: 5rpx;
		position: relative;
		background: #f8f8f8;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		image,
		video {
			width: 100%;
			height: 100%;
		}

		.delete-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 40rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 0 0 0 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.upload-btn {
		border: 1rpx dashed #c0c4cc;
	}

	/* 新增备注区域 */
	.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);
		z-index: 999;

		.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>