<template>
    <view class="waper">
		<u-navbar :autoBack="true" :placeholder="true" bgColor="#FFFFFF">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				确认订单
			</view>
		</u-navbar>
        <view class="content">
            <view class="top_box">
				<view class="hour_date" v-if="hourDate">
					<view>{{$moment(hourDate).format("MM月DD日")}}</view>
					<view>今天{{hotelDetail.hourRoomCheckInTimeHm}}-{{hotelDetail.hourRoomLeaveTimeHm}}中选择{{detail.duration}}小时</view>
				</view>
				<view class="name">{{hotelDetail.name}}</view>
				<view class="row">
					<view class="label">{{detail.level2Name}}</view>
					<view class="type" @click="typeDetail">
						<text>房型详情</text>
						<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
					</view>
				</view>
				<view class="tags_box">
					<view class="tag" v-if="detail.bedType">{{detail.bedType}}</view>
					<view class="tag" v-if="detail.limitedLivePerson">{{detail.limitedLivePerson}}人入住</view>
					<view class="tag" v-if="detail.area">{{detail.area}}m²</view>
					<view class="tag" v-if="detail.window">{{detail.window}}</view>
				</view>
				<view class="row" v-if="hourDate">
					<view class="label1">
						<u-icon name="checkmark-circle" color="#03AE80" size="28rpx" />
						<view v-if="detail.cancelRuleType == 4" class="text">订单确认后，{{$moment(hourDate).format("MM月DD日")}}{{isHourTime ? isHourTime.label.split('-')[0] : ''}}前可免费取消，逾期不可取消或退款。</view>
						<view v-else class="text">{{detail.cancelRuleTypeDesc}}</view>
					</view>
				</view>
				<view class="row" v-else>
					<view class="label1 alc">
						<u-icon name="checkmark-circle" color="#03AE80" size="28rpx" />
						<view class="text">{{detail.cancelRuleTypeDesc}}</view>
					</view>
					<view class="type" @click="readDetail">
						<text>订房必读</text>
						<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="center_box">
				<view class="label">入住信息</view>
				<view>
					<view class="col" v-if="!hourDate">
						<view class="left">入住时间</view>
						<view class="center">
							<view>{{startDatePage}}-{{stopDatePage}}</view>
							<view>共{{nightsPage}}晚</view>
						</view>
					</view>
					<view class="col col1" @click="timeSlotDetail" v-if="hourDate">
						<view class="left">入住时段</view>
						<view class="center1" v-if="isHourTime">
							<view class="cet_top">
								<view>{{isHourTime.label}}</view>
								<u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="28rpx"></u-icon>
							</view>
							<view class="cet_bot">
								您可入住<text>{{isHourTime.duration}}</text>，最晚在<text>{{isHourTime.value.split('-')[1]}}</text>离店。请您在选择的时间段内入住，超时将可能无法入住。
							</view>
						</view>
					</view>
					<view class="col" @click="showHotel">
						<view class="left">房间数量</view>
						<view class="center">
							<view>{{isNum}}间<text>每间最多住{{detail.limitedLivePerson}}人</text></view>
							<view class="residue">剩余{{detail.quantity}}间</view>
						</view>
						<view class="right">
							<u-icon v-if="!expand" name="arrow-down" color="rgba(0,0,0,0.45)" size="28rpx" />
							<u-icon v-if="expand" name="arrow-up" color="rgba(0,0,0,0.45)" size="28rpx" />
						</view>
					</view>
				</view>
			</view>
			<view class="rooms_box" v-if="expand && detail.quantity">
				<view :class="['num', isNum == index+1 ? 'activeNum' : '']" v-for="(item, index) in detail.quantity" :key="index" @click="changeNum(index)">{{index+1}}间</view>
			</view>
			<view class="bottom_box">
				<view class="col" @click="tenantsDetail">
					<view class="center1">
						<view class="col1" v-for="(item, index) in visitorList" :key="index">
							<view class="key">房间{{index + 1}}</view>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
					<view class="right">
						<view class="yq"><u-icon name="account" color="#03AE80" size="32rpx" /></view>
					</view>
				</view>
				<view class="col">
					<view class="left">手机号码</view>
					<view class="center">
						<view class="code">86</view>
						<u-icon name="arrow-down" color="rgba(0,0,0,0.45)" size="28rpx" />
						<view class="line"></view>
						<view>{{contactMobile}}</view>
					</view>
				</view>
				<view class="col" @click="timeDetail" v-if="!hourDate">
					<view class="left">预计到店</view>
					<view class="center">
						<view>{{arrivalTime}}<text v-if="arrivalTime">前</text></view>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="28rpx"></u-icon>
					</view>
				</view>
			</view>
        </view>
		<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
			<view class="left">
				<!-- <view class="label">在线付</view> -->
				<view class="price"><text class="unit">￥</text>{{totalPrice}}</view>
			</view>
			<view class="right">
				<view @click="showPopupDetailed = true" class="detailed">
					<view class="label">明细</view>
					<u-icon name="arrow-up" color="rgba(0,0,0,0.85)" size="28rpx" />
				</view>
				<view class="btn" v-if="detail.quantity" @click="predetermine">提交订单</view>
				<view class="btn btn1" v-else>已订完</view>
			</view>
		</view>
		<u-popup :show="showPopupType" :round="10" mode="bottom">
		    <view class="type_con">
				<view class="close" @click="showPopupType = false">
					<u-icon name="close" color="#fff" size="36rpx" />
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="swiper">
						<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
							<swiper-item v-for="(i, index) in detail.image" :key="index">
								<image  :src="$utils.setImgUrl(i)" mode=""></image>
							</swiper-item>
						</swiper>
						<view class="current">{{current + 1}}/{{detail.imageLength}}</view>
					</view>
					<view class="specs">
						<view class="title">{{detail.level2Name}}</view>
						<view class="list_box">
							<view class="item" v-if="detail.area">
								<image src="../../static/image/hotel/area.png" mode=""></image>
								<view>{{detail.area}}㎡</view>
							</view>
							<view class="item" v-if="detail.bedType">
								<image src="../../static/image/hotel/bedType.png" mode=""></image>
								<view>{{detail.bedType}}</view>
							</view>
							<view class="item" v-if="detail.window">
								<image src="../../static/image/hotel/window.png" mode=""></image>
								<view>{{detail.window}}</view>
							</view>
							<view class="item" v-if="detail.wifi">
								<image src="../../static/image/hotel/wifi.png" mode=""></image>
								<view>{{detail.wifi}}</view>
							</view>
							<view class="item" v-if="detail.floor">
								<image src="../../static/image/hotel/floor.png" mode=""></image>
								<view>{{detail.floor}}层</view>
							</view>
							<view class="item" v-if="detail.breakfast">
								<image src="../../static/image/hotel/breakfast.png" mode=""></image>
								<view>{{detail.breakfast}}</view>
							</view>
							<view class="item" v-if="detail.limitedLivePerson">
								<image src="../../static/image/hotel/limitedLivePerson.png" mode=""></image>
								<view>{{detail.limitedLivePerson}}人</view>
							</view>
						</view>
					</view>
					<view class="occupying"></view>
					<view class="policy">
						<view class="title">商家政策</view>
						<view class="list">
							<view class="item">
								<view class="label">重要通知</view>
								<u-parse :content="hotelDetail.importantNotice"></u-parse>
							</view>
							<view class="item">
								<view class="label">入住方式</view>
								<view class="text">{{hotelDetail.checkInWay}}</view>
							</view>
							<view class="item">
								<view class="label">取消规则</view>
								<view class="text" v-if="detail.cancelRuleType == 3">
									{{cancelRule}}
								</view>
								<view class="text" v-else>{{detail.cancelRuleTypeDesc}}</view>
							</view>
						</view>
					</view>
                </scroll-view>
			</view>
		</u-popup>
		<u-popup :show="showPopupRead" :round="10" mode="bottom">
		    <view class="read_con">
				<view class="head">
					<view class="title">订房必读</view>
					<view class="close" @click="showPopupRead = false">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="row">
						<view class="title">入住须知</view>
						<view class="con">
							<text>发票：</text>
							<text>{{hotelDetail.invoice == 'N' ? '不' : ''}}</text>
							可开具增值税普通/专用发票
						</view>
						<view class="con">
							<text>年龄限制：</text>
							入住办理人需满{{hotelDetail.minLimitedAge}}岁
						</view>
					</view>
					<view class="row">
						<view class="title">商家政策</view>
						<view class="con">
							<text>重要通知：</text>
							<u-parse :content="hotelDetail.importantNotice"></u-parse>
						</view>
						<view class="con">
							<text>取消规则：</text>
							{{detail.cancelRuleType == 3 ? cancelRule : detail.cancelRuleTypeDesc}}
						</view>
					</view>
                </scroll-view>
			</view>
		</u-popup>
		<u-popup :show="showPopupTime" :round="10" mode="bottom" closeOnClickOverlay @close="showPopupTime = false">
		    <view class="time_con">
				<view class="head">
					<view class="title">预计到店时间</view>
					<view class="text">房间整晚保留，10:00前可能需要等房，详情咨询商家</view>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="time_box">
						<view :class="['time', isTime == item.dictValue ? 'activeTime' : '']" v-for="(item, index) in timeList" :key="index" @click="changeTime(item)">{{item.dictLabel}}</view>
					</view>
                </scroll-view>
			</view>
		</u-popup>
		<u-popup :show="showPopupHourTime" :round="10" mode="bottom">
		    <view class="time_con">
				<view class="head1">
					<view class="title">选择入住时段</view>
					<view class="close" @click="showPopupHourTime = false">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="time_box1">
						<view :class="['time', isHourTime.value == item.value ? 'activeTime' : '']" v-for="(item, index) in hourTimeList" :key="index" @click="changeHourTime(item)">{{item.label}}</view>
					</view>
                </scroll-view>
			</view>
		</u-popup>
		<u-popup :show="showPopupTenants" :round="10" mode="bottom">
		    <view class="tenants_con">
				<view class="head">
					<view class="cancel" @click="goCancel">取消</view>
					<view class="title">选择入住人</view>
					<view class="confirm" @click="goConfirm">确定</view>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="item" v-for="(item, index) in tenantsList" :key="index">
						<view class="left" @click="changeTenants(item)">
							<view class="noChange" v-if="selectValue.indexOf(item.id) == -1"></view>
							<view class="isChange" v-if="selectValue.indexOf(item.id) != -1">
								<u-icon name="checkmark" color="#fff" size="28rpx" />
							</view>
							<view :class="['name', selectValue.indexOf(item.id) != -1 ? 'name1' : '']">{{item.name}}</view>
						</view>
						<u-icon @click="editVisitor(item)" name="edit-pen" color="rgba(0,0,0,0.45)" size="40rpx" />
					</view>
                </scroll-view>
				<view class="btn" @click="addVisitor">
					<u-icon name="plus" color="#03AE80" size="32rpx" />
					<view>手动新增</view>
				</view>
			</view>
		</u-popup>
        <u-popup :show="showPopupTourist" :round="10" mode="bottom">
            <view class="tourist_box" :style="'padding-bottom: ' + keyboardHeight + 'px;'">
                <view class="popup-tourist">
                    <view class="title">
                        {{touristTitle}}
                        <view class="close" @click="closeTourist">
                            <u-icon name="close" color="#000" size="32rpx"></u-icon>
                        </view>
                    </view>
                    <view class="form">
                		<view class="num-box">
                			<view class="list">
                				<view class="label">姓名</view>
                				<input type="text" :adjust-position="false" @keyboardheightchange="handleKeyboardChange" v-model="touristForm.name" placeholder="请输入联系人姓名" />
                			</view>
                			<view class="list">
                				<view class="label">联系电话</view>
                				<input type="number" :adjust-position="false" @keyboardheightchange="handleKeyboardChange" v-model="touristForm.mobile" placeholder="请输入联系号码" @blur="keyboardHeight = 0;" />
                			</view>
                			<view class="list">
                				<view class="label">身份证号码</view>
                				<input type="idcard" :adjust-position="false" @keyboardheightchange="handleKeyboardChange" v-model="touristForm.idCard" placeholder="请输入证件号码" @blur="keyboardHeight = 0;" />
                			</view>
                		</view>
                    </view>
                    <view class="btn" @click="saveTourist">保存</view>
                </view>
            </view>
        </u-popup>
		<u-popup :show="showPopupDetailed" :round="10" mode="bottom">
		    <view class="detailed_con">
				<view class="head">
					<view class="title">明细</view>
					<view class="close" @click="showPopupDetailed = false">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<view class="add">
					<view class="label">订单合计</view>
					<view class="all">共<text>¥{{totalPrice}}</text></view>
				</view>
				<view class="row">
					<view class="col">
						<view class="key">房费 </view>
						<view class="value">￥{{totalPrice}}</view>
					</view>
					<view class="col" v-for="(item, index) in detail.datePrices" :key="index">
						<view class="key">{{item.recordDate}}</view>
						<view class="value">{{isNum}}x  ¥{{item.price}}</view>
					</view>
					<view class="col" v-if="endTime">
						<view class="key">{{endTime}}</view>
						<view class="value"></view>
					</view>
				</view>
				<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
					<view class="left">
						<!-- <view class="label">在线付</view> -->
						<view class="price"><text class="unit">￥</text>{{totalPrice}}</view>
					</view>
					<view class="right">
						<view @click="showPopupDetailed = false" class="detailed">
							<view class="label">明细</view>
							<u-icon name="arrow-down" color="rgba(0,0,0,0.85)" size="28rpx" />
						</view>
						<view class="btn" v-if="detail.quantity" @click="predetermine">提交订单</view>
						<view class="btn btn1" v-else>已订完</view>
					</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
export default {
	data () {
		return {
            windowBottom: 0,
            keyboardHeight: 0,
			id: '',
			hotelId: '',
			detail: {},
			hotelDetail: {},
			totalPrice: 0,
			expand: false,
			isNum: null,
			showPopupType: false,
			showPopupRead: false,
			showPopupTime: false,
			showPopupTenants: false,
			showPopupTourist: false,
			showPopupDetailed: false,
			showPopupHourTime: false,
			touristTitle: '',
            touristForm: { name: '', mobile: '', idCard: '' },
			current: 0,
			timeList: [],
			hourTimeList: [],
			arrivalTime: '',
			isTime: null,
			isHourTime: null,
			selectValue: [],
			selectItem: [],
			tenantsList: [],
			visitorList: [],
			
			// 全日房
			startTime: '',
			endTime: '',
			startDatePage: '',
			stopDatePage: '',
			nightsPage: null,
			// 钟点房
			hourDate: '',
			// 可选择开始时间
			startHourSlot: '',
			// 可选择结束时间
			endHourSlot: '',
			
			contactMobile: '',
			contactNames: '',
			cancelRule: ''
		}
	},
	onLoad (options) {
		this.id = options.id;
		this.hotelId = options.hotelId;
		this.hourDate = options.hourDate;
        this.windowBottom = this.$safeAreaBottom || uni.upx2px(24);
		if (this.hourDate) {
			this.isNum = 1;
			this.visitorList = [{
				name: '',
				id: ''
			}]
		} else {
			if (uni.getStorageSync('hotel_date')) {
				let hotelDate = uni.getStorageSync('hotel_date');
				this.startTime = hotelDate[0];
				this.endTime = hotelDate[1];
				this.startDatePage = this.$moment(hotelDate[0]).format("MM月DD日");
				this.stopDatePage = this.$moment(hotelDate[1]).format("MM月DD日");
				this.nightsPage = this.$moment(hotelDate[1]).diff(this.$moment(hotelDate[0]), 'days');
			}
			if (uni.getStorageSync('hotel_room')) {
				let numData = uni.getStorageSync('hotel_room');
				this.isNum = numData.room;
				for (var i = 0; i < this.isNum; i ++) {
					this.visitorList.push({
						name: '',
						id: ''
					})
				}
			}
			this.common();
		}
		this.getDetail();
		this.getVisitor();
		this.getUserInfo();
	},
	
	methods: {
		async getDetail() {
			let params = {
				roomClassifyId: this.id,
				startTime: this.hourDate || this.startTime,
				endTime: this.hourDate || this.endTime
			}
			let res=null;
			if (this.hourDate) {
				// 钟点房
				res = await this.$http.hourClassifyDetail(params);
			} else {
				// 全日房
				res = await this.$http.classifyDetail(params);
			}
			res.data.image = res.data.image.split(',');
			this.detail=res.data;
			this.detail.imageLength = this.detail.image.length;
			this.totalPrice = 0;
			let num = 0;
			this.detail.datePrices.forEach(e => {
				num += e.price * this.isNum;
			})
			this.totalPrice = num.toFixed(2);
			this.getHotelDetail();
			
			if (this.detail.cancelRuleType == 3) {
				let cancelRuleContent = JSON.parse(this.detail.cancelRuleContent);
				if (Number(cancelRuleContent[0].handlingFee)) {
					this.cancelRule = `入住当天${cancelRuleContent[0].start}后取消，将收取额外费用`;
				} else {
					this.cancelRule = `入住当天${cancelRuleContent[0].end}前可免费取消，超期将收取额外费用`;
				}
			}

			if (!this.detail.quantity) {
				uni.$u.toast('该房型已订完');
			}
		},
		async getHotelDetail() {
			let res=await this.$http.homestayId(this.hotelId);
			this.hotelDetail=res.data;
			if (this.hourDate) {
				this.hotelDetail.hourRoomCheckInTimeHm = this.hotelDetail.hourRoomCheckInTime.slice(0, 5);
				this.hotelDetail.hourRoomLeaveTimeHm = this.hotelDetail.hourRoomLeaveTime.slice(0, 5);
				this.getHourTimeList();
			}
		},
		async getVisitor() {
			let info = await this.$http.touristList();
			this.tenantsList = info.rows;
			let f = this.tenantsList.find(m => m.status == 1)
			if (!this.visitorList[0].id && f) {
				this.selectValue = [f.id];
				this.selectItem = [{name: f.name, id: f.id}];
				this.visitorList[0] = {
					name: f.name,
					id: f.id
				}
			}
		},
		async getUserInfo() {
			let info = await this.$http.getUserInfo()
			if (info.code === 200) {
				this.contactMobile = info.data.mobile;
				this.contactNames =  info.data.name;
			} else {
				uni.$u.toast(info.msg);
			}
		},
		async common() {
			const params = {
				dictType: 'hotel_homestay_estimated_arrival_time'
			}
			let info = await this.$http.common(params)
			if (info.code === 200) {
				// 当前日期是否早于入住日期
				if (this.$moment().isBefore(this.startTime)) {
					this.timeList = info.data;
				} else {
					let today = [];
					let morrow = [];
					info.data.forEach(e => {
						if (e.dictValue.split('|')[0] == 1) {
							morrow.push(e);
						} else {
							let t = this.startTime + ' ' + e.dictValue.split('|')[1];
							if (this.$moment(t).diff(this.$moment(), 'minutes') > 0) {
								today.push(e);
							}
						}
					})
					this.timeList = this.timeList.concat(today).concat(morrow);
				}
				this.isTime = this.timeList[0].dictValue;
				this.arrivalTime = this.timeList[0].dictLabel;
			} else {
				uni.$u.toast(info.msg);
			}
		},
        handleKeyboardChange (e) {
            this.$nextTick(() => {
                this.keyboardHeight = e.detail.height
            })
        },
		showHotel() {
			this.expand = !this.expand;
		},
		changeNum(i) {
			this.isNum = i + 1;
			this.totalPrice = 0;
			let num = 0;
			this.detail.datePrices.forEach(e => {
				num += e.price * this.isNum;
			})
			this.totalPrice = num.toFixed(2);
			if (this.visitorList.length > this.isNum) {
				this.visitorList = this.visitorList.slice(0, this.isNum);
				this.goCancel();
			}
			if (this.visitorList.length < this.isNum) {
				let num = this.isNum - this.visitorList.length;
				for (var i = 0; i < num; i ++) {
					this.visitorList.push({
						name: '',
						id: ''
					})
				};
			}
		},
		typeDetail() {
			this.showPopupType = true;
		},
		readDetail () {
			this.showPopupRead = true;
		},
		timeDetail() {
			this.showPopupTime = true;
		},
		changeTime(i) {
			this.isTime = i.dictValue;
			this.arrivalTime = i.dictLabel;
			this.showPopupTime = false;
		},
		getHourTimeList() {
			// 可选择结束时间
			this.endHourSlot = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).subtract(1, 'hours').format("YYYY-MM-DD HH:mm:ss");
			// 当前日期
			let timeNow = this.$moment().format("YYYY-MM-DD HH:mm:ss");
			// 当前时
			let timeNowH = this.$moment(timeNow).format("HH");
			// 当前分
			let timeNowM = this.$moment(timeNow).format("mm");
			// 判断当前日期是否早于钟点房预定日期
			if (this.$moment(timeNow.split(' ')[0]).isBefore(this.hourDate)) {
				this.startHourSlot = this.hourDate + ' ' + this.hotelDetail.hourRoomCheckInTime;
			} else {
				if (Number(timeNowM) < 30) {
					this.startHourSlot = timeNow.split(' ')[0] + ' ' + timeNowH + ':30:00';
				} else {
					this.startHourSlot = timeNow.split(' ')[0] + ' ' + this.$moment(timeNow).add(1, 'hours').format("HH") + ':00:00';
				}
			}
			this.getHourSlot(this.startHourSlot);
		},
		getHourSlot(e) {
			let time = this.$moment(e).add(this.detail.duration, 'hours').format("YYYY-MM-DD HH:mm:ss")
			let duration = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).diff(this.$moment(time), 'minutes');
			if (duration >= 0) {
				this.hourTimeList.push({
					value: e.split(' ')[1].slice(0, 5) + '-' + time.split(' ')[1].slice(0, 5),
					label: e.split(' ')[1].slice(0, 5) + '-' + time.split(' ')[1].slice(0, 5),
					duration: this.detail.duration + '小时'
				})
			} else {
				let totleTime = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).diff(this.$moment(e), 'minutes');
				if (totleTime >= 60) {
					let H = Math.floor(totleTime / 60);
					let M = totleTime % 60;
					this.hourTimeList.push({
						value: e.split(' ')[1].slice(0, 5) + '-' + this.hotelDetail.hourRoomLeaveTimeHm,
						label: e.split(' ')[1].slice(0, 5) + '-' + this.hotelDetail.hourRoomLeaveTimeHm + '(可入住' + ( H ? H + '小时' : '') + ( M ? M + '分钟' : '') + ')',
						duration: ( H ? H + '小时' : '') + ( M ? M + '分钟' : '')
					})
				}
			}
			if (!this.isHourTime) this.isHourTime = this.hourTimeList[0];
			let f = this.$moment(e).add(30, 'minutes').format("YYYY-MM-DD HH:mm:ss");
			let d = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).diff(this.$moment(f), 'minutes');
			if (d >= 60) {
				this.getHourSlot(f);
			}
		},
		timeSlotDetail() {
			this.hourTimeList = [];
			this.getHourTimeList();
			this.showPopupHourTime = true;
		},
		changeHourTime(i) {
			this.isHourTime = i;
			this.showPopupHourTime = false;
		},
		tenantsDetail() {
			this.showPopupTenants = true;
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		changeTenants(i) {
			const index = this.selectValue.indexOf(i.id);
			if (index == -1) {
				if (this.selectValue.length < this.visitorList.length) {
					this.selectValue.push(i.id);
					this.selectItem.push({name: i.name, id: i.id});
				} else {
					uni.showToast({ mask: true, title: `最多可选择${this.visitorList.length}位入住人`, icon: 'none' })
				}
			} else {
				this.selectValue.splice(index, 1);
				this.selectItem.splice(index, 1);
			}
		},
		goCancel() {
			this.showPopupTenants = false;
			this.selectValue = [];
			this.selectItem = [];
			this.visitorList.forEach(e => {
				if (e.id) {
					this.selectValue.push(e.id);
					this.selectItem.push({name: e.name, id: e.id});
				}
			})
		},
		goConfirm() {
			this.visitorList.forEach((e, i) => {
				e.name = this.selectItem[i]?.name || '';
				e.id = this.selectItem[i]?.id || '';
			})
			this.showPopupTenants = false;
		},
		editVisitor(info) {
            this.touristForm = { name: info.name, mobile: info.mobile, idCard: info.idCard, id: info.id };
            this.touristTitle = '编辑常旅客';
			this.showPopupTenants = false;
			this.showPopupTourist = true;
		},
		addVisitor() {
            this.touristForm = { name: '', mobile: '', idCard: '' };
        	this.touristTitle = '新增常旅客';
			this.showPopupTenants = false;
			this.showPopupTourist = true;
		},
		closeTourist() {
			this.showPopupTourist = false;
			this.showPopupTenants = true;
		},
        async saveTourist () {
            if (!this.touristForm.name) {
                uni.showToast({ mask: true, title: '请输入姓名', icon: 'none' })
                return false;
            }
            if (!this.$utils.checkStr(this.touristForm.idCard, 'card')) {
                uni.showToast({ mask: true, title: '请输入正确的证件号', icon: 'none' })
                return false;
            }
            if (!this.$utils.checkStr(this.touristForm.mobile, 'mobile')) {
                uni.showToast({ mask: true, title: '请输入正确的手机号', icon: 'none' })
                return false;
            }
            let info = null;
        	if (this.touristForm.id) {
        		info = await this.$http.updateTourist(this.touristForm);
        	} else {
        		info = await this.$http.addTourist(this.touristForm);
        	}
            if (info.code == 200) {
                uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
                this.closeTourist();
                this.getVisitor();
            }
        },
		async predetermine() {
			for (var i = 0; i < this.isNum; i ++) {
				if (!this.selectValue[i]) {
					uni.showToast({ mask: true, title: '请选择入住人', icon: 'none' });
					return false;
				}
			};
			if (this.hourDate) {
				if (!this.isHourTime) {
					uni.showToast({ mask: true, title: '请选择入住时段', icon: 'none' })
					return false;
				}
			} else {
				if (!this.isTime) {
					uni.showToast({ mask: true, title: '请选择预计到店时间', icon: 'none' })
					return false;
				}
			}
			let params = {
				hotelHomestayId: this.hotelId,
				contactMobile: this.contactMobile,
				contactNames: this.contactNames,
				roomQuantity: this.isNum,
				roomClassifyId: this.id,
				zdyUserTouristIds: this.selectValue
			}
			if (this.hourDate) {
				params.stayType = 'HOURLY';
				params.inDate = this.hourDate;
				params.outDate = this.hourDate;
				params.inTime = this.isHourTime.value.split('-')[0];
				params.outTime = this.isHourTime.value.split('-')[1];
			} else {
				params.inDate = this.startTime;
				params.outDate = this.endTime;
				params.estimatedArrivalTime = this.isTime;
				
			}
			let res=await this.$http.hotelOrder(params);
			uni.navigateTo({ url: `/pages/hotel/submitOrder?id=${res.data.id}&hotelId=${this.hotelId}` })
		}
	}
}
</script>

<style lang="scss">
.waper { min-height: 100vh; }
.content{
    width: 100%; box-sizing: border-box; padding: 24rpx; background-color: #F6F6F6;
	.top_box {
		background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
		.hour_date {
			display: flex; align-items: center; margin-bottom: 20rpx;
			view {
				&:first-child {font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 8rpx;}
				&:last-child {font-size: 24rpx; color: rgba(0,0,0,0.45);}
			}
		}
		.name { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 2rpx; }
		.row {
			margin-top: 19rpx; display: flex; align-items: center; justify-content: space-between;
			.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
			.label1 {
				display: flex; align-items: baseline;
				.text { font-size: 24rpx; color: #03AE80; margin-left: 10rpx; }
			}
			.alc {align-items: center;}
			.type {
				display: flex; align-items: center;
				text { font-size: 24rpx; color: #03AE80; margin-right: 4rpx; }
			}
		}
		.tags_box {
			display: flex; align-items: center; margin-top: 11rpx;
			.tag {
				padding: 0 16rpx; position: relative; font-size: 24rpx; color: rgba(0,0,0,0.45);
				&::after{ content: ""; width: 1rpx; height: 23rpx; background: #ECEAEA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
				&:first-child { padding-left: 0; }
				&:last-child {
					padding-right: 0;
					&::after {display: none;}
				}
			}
		}
	}
	.center_box {
		margin-top: 22rpx; background: #FFFFFF; border-radius: 10rpx 10rpx 0 0; padding: 32rpx 24rpx 0; box-sizing: border-box;
		.label { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
		.col {
			padding: 24rpx 0; border-bottom: 1rpx solid #ECEAEA; display: flex; align-items: center;
			.left { width: 154rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
			.center {
				flex: 1; display: flex; align-items: center; justify-content: space-between; padding-left: 30rpx;
				view {
					&:first-child {
						font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); display: flex; align-items: center;
						text { font-size: 24rpx; color: rgba(0,0,0,0.45); margin-left: 8rpx; }
					}
					&:last-child { font-size: 28rpx; color: rgba(0,0,0,0.85); }
				}
				.residue { color: #E54042 !important; margin-right: 12rpx; }
			}
			.right { width: 43rpx; text-align: right; }
		}
		.col1 {
			align-items: baseline;
			.center1 {
				flex: 1; padding-left: 30rpx;
				.cet_top {
					display: flex; align-items: center; justify-content: space-between;
					view {font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85);}
				}
				.cet_bot {
					margin-top: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.45);
					text {color: #03AE80;}
				}
			}
		}
	}
	.rooms_box {
		margin-top: 24rpx; display: flex; align-items: center; flex-wrap: wrap; padding: 0 24rpx; box-sizing: border-box;
		.num {
			width: 118rpx; height: 64rpx; background: #FFFFFF; border-radius: 4rpx; line-height: 64rpx; text-align: center; font-size: 26rpx; color: rgba(0,0,0,0.65); margin-right: 15rpx; margin-bottom: 24rpx;
			&:nth-child(5n) { margin-right: 0; }
		}
		.activeNum { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
	}
	.bottom_box {
		background: #FFFFFF; border-radius: 0 0 10rpx 10rpx; padding: 0 24rpx; box-sizing: border-box;
		.col {
			display: flex; align-items: center; border-bottom: 1rpx solid #ECEAEA;
			&:last-child { border-bottom: none; }
			.left { width: 154rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
			.center {
				flex: 1; display: flex; align-items: center; height: 90rpx; padding-left: 30rpx;
				view {
					font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85);
				}
				.code { margin-right: 18rpx; }
				.line { width: 1rpx; height: 28rpx; background-color: #ECEAEA; margin: 0 18rpx; }
			}
			.center1 {
				flex: 1;
				.col1 {
					display: flex; align-items: center; border-bottom: 1rpx solid #ECEAEA;
					&:last-child { border-bottom: none; }
					.key { width: 154rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
					.name { flex: 1; height: 90rpx; line-height: 90rpx; padding-left: 30rpx; font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
				}
			}
			.right {
				width: 43rpx; text-align: right;
				.yq {
					width: 34rpx; height: 34rpx; border-radius: 50%; border: 1rpx solid #03AE80; position: relative;
					/deep/.u-icon__icon {position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;}
				}
			}
		}
	}
}
.footer {
	width: 100%; background: #FFFFFF; padding: 24rpx 24rpx 0; box-sizing: border-box; position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
	.left {
		display: flex; align-items: baseline;
		.label { font-size: 28rpx; color: #000000; margin-right: 12rpx; }
		.price {
			font-weight: bold; font-size: 56rpx; color: #E54042; margin-right: 20rpx;
			.unit { font-size: 28rpx; color: #E54042; }
		}
	}
	.right {
		display: flex; align-items: center;
		.detailed {
			display: flex; align-items: center;
			.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 8rpx; }
		}
		.btn { width: 270rpx; height: 68rpx; background: #03AE80; border-radius: 60rpx; line-height: 68rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-left: 24rpx; }
		.btn1 {background-color: #BFBFBF;}
	}
}
/deep/.u-popup__content {overflow: hidden;}
.type_con {
	position: relative;
	.close {
		position: absolute; top: 32rpx; right: 24rpx; z-index: 1; width: 56rpx; height: 56rpx; background: rgba(0,0,0,0.4); border-radius: 50%;
		::v-deep .u-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	}
	.scroll { max-height: 80vh; }
	.swiper{
		width: 100%; height: 500rpx; position: relative;
		swiper{ width: 100%; height: 100%; }
		.current{ padding: 0 20rpx; height: 40rpx; line-height: 40rpx; color: #fff; background: rgba(0, 0, 0, 0.5); font-size: 24rpx; border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 24rpx; }
	}
	.specs {
		background: #FFFFFF; padding: 24rpx 24rpx 32rpx; box-sizing: border-box;
		.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 6rpx; }
		.list_box {
			display: flex; align-items: center; flex-wrap: wrap;
			.item {
				margin-top: 18rpx; width: 33.33%; display: flex; align-items: center;
				image { width: 28rpx; height: 28rpx; }
				view {
					margin-left: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.85);
					.text { color: #03AE80; }
				}
			}
		}
	}
	.occupying { width: 100%; height: 22rpx; background-color: #F6F6F6; }
	.policy {
		background: #FFFFFF; padding: 22rpx 24rpx 24rpx; box-sizing: border-box;
		.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 7rpx; }
		.list {
			.item {
				border-bottom: 2rpx solid #ECEAEA; padding: 24rpx 0;
				&:last-child { border-bottom: none; }
				.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-bottom: 16rpx; }
				.text { font-size: 24rpx; color: rgba(0,0,0,0.45); line-height: 28rpx; }
			}
		}
	}
}
.read_con {
	padding: 32rpx;
	.head {
		position: relative; text-align: center; margin-bottom: 30rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	}
	.scroll { max-height: 60vh; }
	.row {
		.title {margin-top: 24rpx; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
		.con {
			margin-top: 16rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); line-height: 33rpx;
			text:first-child {color: rgba(0,0,0,0.45);}
		}
	}
}
.time_con {
	padding: 32rpx 32rpx 0;
	.head {
		margin-bottom: 44rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.text { margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.25); }
	}
	.head1 {
		position: relative; text-align: center; margin-bottom: 30rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	}
	.scroll { max-height: 60vh; }
	.time_box {
		display: flex; align-items: center; flex-wrap: wrap;
		.time {
			width: 214rpx; height: 64rpx; background: #F6F7F9; border-radius: 4rpx; line-height: 64rpx; text-align: center; margin: 0 21rpx 16rpx 0; font-size: 26rpx; color: rgba(0,0,0,0.65);
			&:nth-child(3n) { margin-right: 0; }
		}
		.activeTime { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
	}
	.time_box1 {
		.time {
			width: 100%; height: 64rpx; background: #F6F7F9; border-radius: 4rpx; line-height: 64rpx; text-align: center; margin-bottom: 16rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); box-sizing: border-box;
		}
		.activeTime { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
	}
}
.tenants_con {
	padding: 32rpx 24rpx 24rpx;
	.head {
		margin-bottom: 30rpx; display: flex; align-items: center; justify-content: space-between;
		.cancel, .confirm { font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
	}
	.scroll { max-height: 60vh; }
	.item {
		padding: 24rpx 0; border-bottom: 1rpx solid #ECEAEA; display: flex; align-items: center; justify-content: space-between;
		&:last-child { border-bottom: none; }
		.left {
			display: flex; align-items: center;
			.noChange { width: 32rpx; height: 32rpx; border: 1rpx solid rgba(0,0,0,0.25); }
			.isChange {
				width: 32rpx; height: 32rpx; border: 1rpx solid #03AE80; background-color: #03AE80; position: relative;
				::v-deep .u-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
			}
			.name { margin-left: 24rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
			.name1 { color: rgba(0,0,0,0.85); }
		}
	}
	.btn {
		width: 654rpx; height: 90rpx; background: #FFFFFF; border-radius: 4rpx; border: 2rpx solid #03AE80; margin: 198rpx auto 0; display: flex; align-items: center; justify-content: center;
		view { margin-left: 12rpx; font-weight: 500; font-size: 32rpx; color: #03AE80; }
	}
}
.tourist_box{
	width: 100%;
	.popup-tourist{ width: 100%; }
}
.detailed_con {
	padding: 32rpx 0 150rpx; position: relative;
	.head {
		position: relative; text-align: center; margin: 0 32rpx 30rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	}
	.add {
		padding: 54rpx 0 24rpx; margin: 0 32rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #ECEAEA;
		.label { font-size: 32rpx; color: rgba(0,0,0,0.85); }
		.all {
			font-size: 28rpx; color: rgba(0,0,0,0.85);
			text { font-weight: bold; font-size: 28rpx; color: #E54042; }
		}
	}
	.row {
		padding: 0 32rpx;
		.col {
			display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;
			&:first-child {
				margin: 24rpx 0 13rpx;
				.key, .value { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
			}
			.key, .value { font-size: 28rpx; color: rgba(0,0,0,0.65); }
		}
	}
	.footer {
		width: 100%; background: #FFFFFF; padding: 24rpx 24rpx 0; box-sizing: border-box; position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
		.left {
			display: flex; align-items: baseline;
			.label { font-size: 28rpx; color: #000000; margin-right: 12rpx; }
			.price {
				font-weight: bold; font-size: 56rpx; color: #E54042; margin-right: 20rpx;
				.unit { font-size: 28rpx; color: #E54042; }
			}
		}
		.right {
			display: flex; align-items: center;
			.detailed {
				display: flex; align-items: center;
				.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 8rpx; }
			}
			.btn { width: 270rpx; height: 68rpx; background: #03AE80; border-radius: 60rpx; line-height: 68rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-left: 24rpx; }
			.btn1 {background-color: #BFBFBF;}
		}
	}
}
</style>