<template>
	<view class="reservation">
		<view style="padding: 40rpx;">
			<form>
				<view class="form-item">
					<label>功能房</label>
					<input type="text" v-model="list.roomName" disabled placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
				<view class="form-item">
					<label>主题</label>
					<input type="text" v-model="formData.rtTheme" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
				<view class="form-item">
					<label>申请人</label>
					<input type="text" v-model="formData.rtCreatRole" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
				<view class="form-item">
					<label>使用部门/学院</label>
					<input type="text" v-model="formData.rtDepar" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
				<view class="form-item">
					<label>参与人数</label>
					<input type="number" v-model="formData.rtPeople"
						:placeholder="'当前功能房最大人数为'+list.staffOneStopRoom[0].roomCapacity+'人'"
						placeholder-class="input-placeholder" />
				</view>
				<view class="form-item">
					<label>预约用途</label>
					<picker range-key="dictLabel" :value="rangeIndex" :range="Reserveduse" @change="classChange">
						<view class="uni-input">
							<text v-if="Reserveduse.length" class="val">{{Reserveduse[rangeIndex].dictLabel}}</text>
							<uni-icons type="down" size="16" color="#202020"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<label>人员类型</label>
					<picker mode="multiSelector" :value="typeValues" :range="rolelist" @change="typeChange">
						<view class="uni-input">
							<!-- 显示所有选中的值 -->
							<text v-if="typeValues.length" class="val">
								{{ typeValues.map(value => rolelist.find(item => item.dictLabel === value).dictLabel).join(', ') }}
							</text>
							<uni-icons type="down" size="16" color="#202020"></uni-icons>
						</view>
					</picker>
				</view>
			</form>
		</view>
		<view class="time-zone">
			<view>
				<view>
					<text>开放时间</text>
				</view>
				<view>
					<text style="color: red;">*</text>
					<text>请点击下方时间段进行预约确认</text>
				</view>
			</view>
			<view>
				<view v-for="(item,index) in slotslist" :key="index">
					<button @click="make(item,index)" :disabled="item.isOccupy==1"
						:class="timeindex==index?'active':'dark'">{{item.openingHours}}</button>
				</view>
			</view>

			<view>
				<text>使用事项：</text>
				<view>
					<text>{{list.roomMatter}}</text>
				</view>
			</view>
			<view>
				<button v-if="slotslist.length!=0" type="primary" :disabled="isSubmitting" class="submit-btn"
					@tap="onSubmit">提交</button>
				<button v-else type="primary" :disabled="true" class="submit-btn">当前功能房时间未开放</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectRtFuReservationTime,
		updateRoomReservation,
		addRoomReservation
	} from '@/api/OneStopCommunity/room.js'
	import {
		getDetailList,
		Update
	} from '@/api/OneStopCommunity/appointment.js'
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	import {
		toBackPage
	} from "@/utils/toBack.js"
	export default {
		data() {
			return {
				isSubmitting: false, //表单提交标志位
				timeindex: null,
				formData: {
					rtTheme: "",
					rtRole: "",
					rtPurpose: "",
					rtPeople: "",
					rtTimePeriod: "",
					rtCreatRole: "",
					rtDepar: "",
					roomName: "",

				},
				rangeIndex: 0,
				typeIndex: 0,
				roomNo: "",
				rtTime: "",
				list: {},
				slotslist: [],
				Reserveduse: [],
				rolelist: []
			}
		},
		methods: {
			classChange(e) {
				this.rangeIndex = e.detail.value;
			},
			typeChange(e) {
				this.typeIndex = e.detail.value;
			},
			onSubmit() {
				this.isSubmitting = true; // 设置为正在提交
				if (this.timeindex == null) {
					uni.showToast({
						title: "请填写完整内容！",
						icon: 'none' // 根据需要设置图标  
					});
					this.isSubmitting = false;
					return;
				}
				this.formData.rtPurpose = this.Reserveduse[this.rangeIndex].dictLabel;
				this.formData.rtRole = this.rolelist[this.typeIndex].dictLabel;
				this.formData.roomNo = this.list.roomNo
				var arr = this.list.rtTimePeriod.split(" ")
				this.formData.rtTime = this.list.rtTime
				this.formData.rtTimePeriod = this.slotslist[this.timeindex].openingHours
				this.formData.roomName = this.list.roomName
				this.formData.rtNo = this.slotslist[this.timeindex].rtNo
				this.formData.staffOneStopRoomOpeningHoursList = this.list.staffOneStopRoomOpeningHoursList
				console.log(this.formData)
				if (parseInt(this.formData.rtPeople) <= 0) {
					uni.showToast({
						title: "功能房参与人数不能小于0！",
						icon: 'none' // 根据需要设置图标  
					});
					this.isSubmitting = false;
					return;
				}
				if (parseInt(this.formData.rtPeople) > parseInt(this.list.staffOneStopRoom[0].roomCapacity)) {
					uni.showToast({
						title: "功能房最大人数为" + this.list.staffOneStopRoom[0].roomCapacity + "！",
						icon: 'none' // 根据需要设置图标  
					});
					this.isSubmitting = false;
					return;
				}
				for (let var2 in this.formData) {
					if (this.formData[var2] == null || this.formData[var2] == '') {
						uni.showToast({
							title: "请填写完整内容！",
							icon: 'none' // 根据需要设置图标  
						});
						this.isSubmitting = false;
						return; // 停止执行后续操作  
					}
				}
				this.add()
			},
			make(item, index) {
				// this.formData.rtYuyue = item
				this.timeindex = index
			},
			async getlist() {
				let obj = {
					roomNo: this.list.roomNo,
					rtTime: this.list.rtTime
				}
				// console.log(obj)
				let res = await selectRtFuReservationTime(obj)
				console.log(res)
				this.slotslist = res.data
			},
			async getReserved() {
				let res = await getDicts('routine_rtfureservations_rt_purpose')
				this.Reserveduse = res.data
			},
			async getrole() {
				let res = await getDicts('routine_rtfureservation_rt_role')
				this.rolelist = res.data
			},
			async add() {
				this.formData.rtId = this.list.rtId
				this.formData.auditStatus = 0
				this.formData.rtState = 0
				let res = await Update(this.formData)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "../appointment/index"
						})
					}, 1000)
					this.isSubmitting = false;
				} else {
					uni.showToast({
						title: "已被预约",
						icon: 'error'
					})
					this.isSubmitting = false;
				}
			},
			async getDetail() {
				let res = await getDetailList(this.list.rtId);
				if (res.code == 200) {
					this.detail = res.data;
				}
			},
		},
		onLoad(option) {
			this.list = JSON.parse(option.item)
			console.log(this.list)
			this.formData.rtPurpose = this.list.rtDepar;
			this.formData.rtRole = this.list.rtRole;
			this.formData.roomName = this.list.roomName
			this.formData.rtTheme = this.list.rtTheme
			this.formData.rtCreatRole = this.list.rtCreatRole
			this.formData.rtDepar = this.list.rtDepar
			this.formData.rtPeople = this.list.rtPeople
			this.getlist()
			this.getReserved()
			this.getrole()
			this.getDetail()
		},
	}
</script>

<style lang="scss" scoped>
	.reservation {
		background-color: rgba(244, 244, 244, .6);

		.form-item {
			padding: 22rpx 40rpx;
			background-color: white;
			margin-bottom: 20rpx;
			border-radius: 16rpx;

			.uni-icons {
				opacity: .5;
				font-weight: bold
			}

			label {
				margin-bottom: 20rpx;
				display: inline-block;
			}

			input {
				border: 1px solid #E1E1E1;
				border-radius: 10rpx;
				height: 70rpx;
				padding-left: 30rpx;

				.input-placeholder {
					color: #b6b6b6;
				}
			}

			picker {
				border: 1px solid #E1E1E1;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 30rpx;
				border-radius: 10rpx;

				.uni-input {
					display: flex;
					color: #797979;

					.val {
						flex: 1;
					}
				}
			}

			.upload-img {
				border: 1px solid #E1E1E1;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;

				.tip {
					margin-top: 15rpx;
					color: #7a7a7a;
					font-size: 24rpx;
				}
			}

			.img-list {
				border: 1px solid #D8D8D8;
				border-radius: 20rpx;

				.imgs {
					padding: 22rpx;
					display: flex;
					flex-wrap: wrap;

					.img {
						position: relative;
						width: 160rpx;
						height: 170rpx;
						margin-bottom: 15rpx;
						margin-right: 15rpx;

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

						.remove {
							position: absolute;
							right: 0;
							top: 0;
							color: white;
							background-color: rgba(0, 0, 0, 0.4);
							width: 52rpx;
							height: 52rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;

						}
					}

				}

				.btn {
					border-top: 1px solid #D8D8D8;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}

		.time-zone {
			width: 100%;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background-color: #ffffff;
			padding: 40rpx;

			// margin-top: 10rpx;
			&>view:nth-child(1) {
				display: flex;
				justify-content: space-between;
				height: 65rpx;
				text-align: center;
				align-items: center;

				&>view:nth-child(1) {
					text {
						font-size: 40rpx;
						font-weight: 550;
					}
				}

				&>view:nth-child(2) {
					&>text:nth-child(2) {
						font-size: 24rpx;
						color: #202020;
						opacity: .5;
					}
				}
			}

			&>view:nth-child(2) {
				display: flex;
				flex-wrap: wrap;

				align-content: flex-start;

				view {
					width: 30%;
					margin: 10rpx;

					button {
						font-size: 24rpx;
					}

					button[disabled] {
						height: 80rpx;
						line-height: 80rpx;
						color: #C1CCDF;
						background-color: rgba(234, 241, 255, .8);
						border-radius: 20rpx;
						border: none;
					}

					.active {
						height: 80rpx;
						line-height: 80rpx;
						border: 1px #1890FF solid;
						background-color: #f9fbfc;
						color: #ffffff;
						background-color: #1890FF;
						border-radius: 20rpx;
					}

					.dark {
						height: 80rpx;
						line-height: 80rpx;
						border: 1px #1890FF solid;
						background-color: #f9fbfc;
						color: #1890FF;
						border-radius: 20rpx;
					}
				}
			}

			&>view:nth-child(3) {
				margin-top: 40rpx;
				font-size: 24rpx;
				color: rgba(32, 32, 32, .5);
				line-height: 40rpx;
			}
		}

		.submit-btn {
			margin-top: 60rpx;
		}
	}
</style>