<template>
	<view class="detail" v-if="detail!=null">
		<view style="margin: 40rpx;">
			<uni-swiper-dot :info="swiperList" :current="current" :dots-styles="dotStyles" field="content" mode="round">
				<swiper interval="2000" autoplay class="swiper-box" @change="change">
					<swiper-item v-for="(img ,index) in swiperList" :key="index">
						<view class="swiper-item">
							<image mode="aspectFill" :src="basePath+img">

							</image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="content">
			<view class="title">
				<view class="title-a">
					<text>{{detail.roomName}}</text>
					<view class="open-up">开放中</view>
				</view>
				<view class="title-b">
					<view>
						<uni-icons color="#FFBB12" type="staff-filled" size="24"></uni-icons>
					</view>
					<view>
						<text>{{detail.staffOneStopRoom[0].roomCapacity}}/人</text>
					</view>
				</view>
			</view>
			<view class="introduction">
				<text>
					{{detail.roomInfo}}
				</text>
			</view>
		</view>
		<view class="time-zone">
			<view>预定详情</view>
			<view>
				<view>
					<text>活动：</text><text>{{detail.rtTheme}}</text>
				</view>
				<view>
					<text>活动房：</text><text>{{detail.roomName}}</text>
				</view>
				<view>
					<text>预约时间：</text><text>{{detail.rtTime}} {{detail.rtTimePeriod}}</text>
				</view>
				<view>
					<text>参与人员类型：</text><text>{{detail.rtRole}}</text>
				</view>
				<view>
					<text>预约用途：</text><text>{{detail.rtPurpose}}</text>
				</view>
				<view>
					<text>使用部门/学院：</text><text>{{detail.rtDepar}}</text>
				</view>
				<view>
					<text>参与人数：</text><text>{{detail.rtPeople}}人</text>
				</view>
				<view class="status">
					<text>审批状态：</text>
					<text v-for="(tab,index) in auStatelist" :key="index" :class="tab.dictValue|formateAuStatus"
						v-show="detail.auditStatus==tab.dictValue">
						{{tab.dictLabel}}
					</text>
				</view>
				<view>
					<text>使用状态：</text>
					<text v-for="(tab,index) in rtstatelist" :key="index"
						v-if="tab.dictValue==detail.rtState">{{tab.dictLabel}}</text>
				</view>
				<view v-if="detail.auditStatus==2">
					<text>不同意原因：</text>
					<text>{{detail.editOpinion}}</text>
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view>
						<text style="color:#9C9C9C ;">使用事项：</text>
					</view>
					<view>
						<view>
							<text>{{detail.staffOneStopRoom[0].roomMatter}}</text>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view>
						<text style="color:#9C9C9C ;">使用反馈：</text>
					</view>
					<view>
						<view>
							<text>{{detail.feedback}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="button-a" v-show="detail.auditStatus<2&&detail.rtState<2">
				<button v-if="detail.auditStatus==0" @click="cancelMake()"><text>取消预约</text> </button>
				<button v-else-if="detail.auditStatus==1" @click="finish()"><text>使用结束</text></button>
			</view>
			<view class="button-b" v-show="detail.auditStatus==2&&detail.rtState<2">
				<view><button @click="updateMake()">修改预约</button></view>
				<view><button type="default" @click="cancelMake()">取消预约</button></view>
			</view>
			<uni-popup ref="popup" class="finish-popup">
				<view class="content">
					<view class="title">图片上传</view>
					<view><text class="tip">*</text>请上传使用期间图片</view>
					<view class="upload-img" v-if="tempSceneImgs.length==0" @tap="uploadSceneImg">
						<view class="add">
							+ 添加照片
						</view>
						<view class="tip">
							图片要求：最多3张，上限5MB
						</view>
						<view class="img-list">

						</view>
					</view>
					<view class="img-list" v-else>
						<view class="imgs">
							<view class="img" v-for="(img,index) in tempSceneImgs">
								<image :src="img.path" @tap="previewImg(tempSceneImgs)" mode="aspectFill"></image>
								<text class="remove" @tap="onRemoveSceneImg(index,img.path)">X</text>
							</view>
						</view>
						<view v-if="tempSceneImgs.length<3" class="btn" @tap="uploadSceneImg">
							+ 添加照片
						</view>
					</view>
					<view @click="submit" class="bottom">
						确定
					</view>
				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getDetailList,
		Deleteid,
		Update
	} from '@/api/OneStopCommunity/appointment.js'
	import {
		uploadImg,
		previewImg,
		removeImg
	} from "../common/uploadImg.js"
	import {
		baseUrl
	} from "@/config.js";
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	import {
		toBackPage
	} from "@/utils/toBack.js"
	export default {
		data() {
			return {
				current: 0,
				dotStyles: {
					width: 12,
					backgroundColor: 'rgba(255, 255, 255, 0.4)',
					border: '1px rgba(255, 255, 255, 0.4) solid',
					color: '#fff',
					selectedBackgroundColor: '#1890FF',
					selectedBorder: '1px #1890FF solid'
				},
				swiperList: [],
				tempSceneImgs: [],
				rwPicture: "",
				rtId: null,
				detail: null,
				auStatelist: [],
				basePath: baseUrl,
				submitlist: {
				},
				rtstatelist: [],
				auditlist: {}
			}
		},
		filters: {
			formateAuStatus(val) {
				if (val == 1) {
					return "agree"
				} else if (val == 2) {
					return "refuse"
				} else {
					return "pending"
				}
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			updateMake() {
				uni.navigateTo({
					url: `./reservation?item=${JSON.stringify(this.detail)}`
				})
			},
			cancelMake() {
				uni.showModal({
					title: "确定取消预约吗?",
					success: async (bool) => {
						if (bool.confirm) {
							let res = await Deleteid(this.detail.rtId)
							if (res.code == 200) {
								uni.showToast({
									title: "取消成功"
								})
								toBackPage(500)
							}
						}
					}
				})
			},
			finish() {
				this.$refs.popup.open("center")
			},
			uploadSceneImg() {
				uploadImg('/common/upload', this.rwPicture, this.tempSceneImgs, baseUrl, (error, result) => {
					if (!error) {
						this.rwPicture = result.photo
					}
				});
			},
			onRemoveSceneImg(index, path) {
				removeImg(index, path, this.rwPicture, this.tempSceneImgs, baseUrl, (error, result) => {
					if (!error) {
						this.rwPicture = result.photo
					}
				});
			},
			previewImg(imgs) {
				previewImg(imgs);
			},
			submit() {
				if (this.rwPicture == "") {
					uni.showToast({
						title: "请上传使用图片",
						icon: "none"
					})
					return;
				}
				uni.showModal({
					title: "确定结束使用吗?",
					success: async (bool) => {
						if (bool.confirm) {
							this.submitlist.rtImgs = this.rwPicture;
							this.submitlist.rtId = this.detail.rtId;
							this.submitlist.rtState = 2;
							// this.submitlist.auditStatus=3
							this.submitlist.staffOneStopRoomOpeningHoursList = this.detail.staffOneStopRoomOpeningHoursList
							console.log(this.submitlist)
							let res = await Update(this.submitlist)
							this.$refs.popup.close()
							if (res.code == 200) {
								uni.showToast({
									title: "提交成功"
								})
							}
							toBackPage(500)
						}
					}
				})

			},
			async getDetail() {
				let res = await getDetailList(this.rtId);
				if (res.code == 200) {
					this.detail = res.data;
					var split=[]
					if(res.data.staffOneStopRoom[0].roomImgs!=null){
						split = res.data.staffOneStopRoom[0].roomImgs.split(",")
					}
					this.swiperList = split
				}
				console.log(res)
			},
			async getstate() {
				let res = await getDicts('rt_fu_audit_au_status')
				this.auStatelist = res.data
			},
			async getRtstate() {
				let res = await getDicts('routine_rtfureservation_rt_state')
				this.rtstatelist = res.data
			},
		},
		onLoad(option) {
			this.rtId = option.rtId
			this.getstate()
			this.getRtstate()
			this.getDetail()
		},
		onShow() {
		}
	}
</script>


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

		.swiper-box {
			width: 100%;
			height: 600rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.swiper-item {
				border-radius: 16rpx;
				height: 600rpx;

				image {
					width: 100%;
					height: 600rpx;
					border-radius: 16rpx;
				}
			}
		}

		.content {
			margin: 0rpx 40rpx;

			.title {
				display: flex;
				justify-content: space-between;
				text-align: center;

				.title-a {
					display: flex;

					text {
						font-size: 40rpx;
						font-weight: 600;
						font-family: PingFang SC;
					}

					.open-up {
						width: 80rpx;
						height: 32rpx;
						background-color: #E7FAF0;
						border: 1px #D0F5E0 solid;
						margin-left: 20rpx;
						font-size: 20rpx;
						margin-top: 4rpx;
						text-align: center;
						margin-top: 6px;
						color: #71E2A3;
					}
				}

				.title-b {
					display: flex;
					font-size: 35rpx;
				}
			}

			.introduction {
				margin-top: 20rpx;

				text {
					line-height: 35rpx;
					letter-spacing: 3rpx;
					font-size: 24rpx;
					color: #202020;
				}
			}
		}

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

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

			&>view:nth-child(2) {
				font-size: 32rpx;
				margin-top: 30rpx;
				margin-bottom: 84rpx;

				&>view {
					margin-top: 10rpx;
				}

				&>view>text:first-child {
					color: #9C9C9C;
				}
			}

			.button-a {
				button {
					color: #FFFFFF;
					background-color: #1890FF;
				}
			}

			.button-b {
				display: flex;
				justify-content: space-between;

				&>view {
					width: 46%;
				}

				&>view:nth-child(2)>button {
					color: #FFFFFF;
					background-color: #1890FF;
				}

				&>view:nth-child(1)>button {
					color: #1890FF;
					border: 1px solid #1890FF !important;
				}
			}

			.finish-popup {
				.content {
					background-color: white;
					border-radius: 16rpx;
					width: 90vw;

					&>view:nth-child(-n+3) {
						margin: 40rpx 40rpx;
					}

					.title {
						padding: 40rpx 0 20rpx;
						display: flex;
						justify-content: center;
						font-size: 38rpx;
						font-weight: 550;
					}

					.tip {
						color: red;
					}

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

					.bottom {
						background-color: #1890FF;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: white;
						border-radius: 0 0 16rpx 16rpx;
						margin-top: 100rpx;
					}
				}
			}

			.status {
				.pending {
					color: #FFBA00;
				}

				.refuse {
					color: #FF9292;
				}

				.agree {
					color: #71E2A3;
				}
			}
		}

	}
</style>
