<template>
    <view class="waper">
        <u-navbar :autoBack="true" :bgColor="scrollTop > 10 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 10 ? '#303133' : '#fff'">
        	<view slot='center' class="navbar_title">{{scrollTop > 10 ? '酒店详情' : ''}}</view>
        </u-navbar>
		<view class="fixed" v-if="scrollTop > paddingTop" :style="'top: ' + navHeight + 'px;'">
			<view class="tabs_box">
				<view :class="['tabs', isTabs == index ? 'activeTabs' : '']" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">
					<text>{{item}}</text>
					<view class="line" v-if="isTabs == index"></view>
				</view>
			</view>
			<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) == -1">
			    <view class="left" @click="checkInDate">
			        <view class="time">
			            <view>{{startDatePage}}</view>
			            <view>{{startWeekPage}}</view>
			        </view>
			        <view class="site">{{nightsPage}}晚</view>
			        <view class="time">
			            <view>{{stopDatePage}}</view>
			            <view>{{stopWeekPage}}</view>
			        </view>
			    </view>
			    <view class="right" @click="selectNum">{{numData.room}}间·{{numData.adult + numData.children}}人</view>
			</view>
			<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) != -1">
				<view class="left" @click="checkInDate">
					<view class="time">
						<view>{{startDatePageHour}}</view>
						<view>{{startWeekPageHour}}</view>
					</view>
				</view>
			</view>
		</view>
        <view class="swiper">
            <swiper :autoplay="true" :current="current" circular @change="changeSwiper">
                <swiper-item v-for="(i, index) in detail.carouselImage" :key="index">
                    <image  :src="$utils.setImgUrl(i)" mode=""></image>
                </swiper-item>
            </swiper>
            <view class="current">{{current + 1}}/{{detail.imageLength}}</view>
        </view>
        <view class="content">
            <view class="info">
                <view class="title">{{detail.name}}</view>
                <view class="time">
                    <view class="left">
                        <view class="text">{{detail.openingTime}}年开业</view>
                        <view class="tag">
							<view v-for="(m, x) in detail.label" :key="x">{{m}}</view>
                        </view>
                    </view>
                    <view class="right" @click="detailPage">
                        <view class="text">详情/设施</view>
						<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
                    </view>
                </view>
                <view class="address">
                    <view class="left">
                        <view class="area" v-if="detail.address">{{detail.address}}</view>
                        <view class="msg" v-if="distance != null">
                            <view class="msg_icon">
                                <image src="../../static/image/eatery/local.png" mode=""></image>
                            </view>
                            <view class="text">距您{{distance}}公里</view>
                        </view>
                    </view>
                    <view class="right" @click="openLocation">
                        <view class="right_icon">
                            <image src="../../static/home/location.png" mode=""></image>
                        </view>
                        <!-- <view class="text">地图</view> -->
                    </view>
                </view>
            </view>
            <view class="content_waper">
                <view class="date" v-if="isType.indexOf(hourRoomClassifyIds) == -1">
                    <view class="left" @click="checkInDate">
                        <view class="time">
                            <view>{{startDatePage}}</view>
                            <view>{{startWeekPage}}</view>
                        </view>
                        <view class="site">{{nightsPage}}晚</view>
                        <view class="time">
                            <view>{{stopDatePage}}</view>
                            <view>{{stopWeekPage}}</view>
                        </view>
                    </view>
                    <view class="right" @click="selectNum">{{numData.room}}间·{{numData.adult + numData.children}}人</view>
                </view>
                <view class="date" v-if="isType.indexOf(hourRoomClassifyIds) != -1">
                    <view class="left" @click="checkInDate">
                        <view class="time">
                            <view>{{startDatePageHour}}</view>
                            <view>{{startWeekPageHour}}</view>
                        </view>
                    </view>
                </view>
				<view class="types_box">
					<scroll-view class="scroll_waper" scroll-x="true">
						<view :class="['types', isType.indexOf(item.roomClassifyIds) != -1 ? 'activeType' : '']" v-for="(item, index) in typesList" :key="index" @click="changeType(item)">
							<text>{{item.name}}</text>
							<image class="atvIcon" v-if="isType.indexOf(item.roomClassifyIds) != -1" src="https://date_active.png" mode=""></image>
						</view>
					</scroll-view>
				</view>
				<view v-if="infoList !== null && infoList.length">
					<view class="recommendText">
						<u-icon name="thumb-up" color="#E54042" size="28rpx"></u-icon>
						<view class="tips">为您推荐的房型</view>
					</view>
					<view class="shop">
						<view class="list" v-for="(i, index) in infoList" :key="index" @click="goDetail(i.id)">
							<view class="img">
								<image :src="$utils.setImgUrl(i.image.split(',')[0])" mode=""></image>
								<view>{{i.image.split(',').length}}</view>
							</view>
							<view :class="['text', !i.quantity ? 'grey' : '']">
								<view class="title">{{i.level2Name}}</view>
								<view class="tag">
									<view v-if="i.bedType">{{i.bedType}}</view>
									<view v-if="i.limitedLivePerson">{{i.limitedLivePerson}}人入住</view>
									<view v-if="i.window">{{i.window}}</view>
									<view v-if="i.breakfast">{{i.breakfast}}</view>
								</view>
								<view class="msg">{{i.cancelRuleTypeDesc}}</view>
								<view class="fot">
									<view class="surplus"><text v-if="i.quantity">剩余{{i.quantity}}间</text></view>
									<view class="money">
										<view>¥{{i.datePrices[0].originalPrice}}</view>
										<view>
											<text>¥</text>{{i.datePrices[0].price}}
										</view>
									</view>
								</view>
								<view class="btn" @click.stop="reserve(i)">
									<view> {{ i.quantity ? '订' : '满' }} </view>
									<view> {{ i.quantity ? '在线付' : '已订完' }} </view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="recommendList !== null && recommendList.length">
					<view class="recommendText col1">
						<u-icon name="info-circle" color="#03AE80" size="28rpx"></u-icon>
						<view class="tips">可供您自由组合的房型</view>
					</view>
					<view class="shop">
						<view class="list" v-for="(i, index) in recommendList" :key="index" @click="goDetail(i.id)">
							<view class="img">
								<image :src="$utils.setImgUrl(i.image.split(',')[0])" mode=""></image>
								<view>{{i.image.split(',').length}}</view>
							</view>
							<view :class="['text', !i.quantity ? 'grey' : '']">
								<view class="title">{{i.level2Name}}</view>
								<view class="tag">
									<view v-if="i.bedType">{{i.bedType}}</view>
									<view v-if="i.limitedLivePerson">{{i.limitedLivePerson}}人入住</view>
									<view v-if="i.window">{{i.window}}</view>
									<view v-if="i.breakfast">{{i.breakfast}}</view>
								</view>
								<view class="msg">{{i.cancelRuleTypeDesc}}</view>
								<view class="fot">
									<view class="surplus"><text v-if="i.quantity">剩余{{i.quantity}}间</text></view>
									<view class="money">
										<view>¥{{i.datePrices[0].originalPrice}}</view>
										<view>
											<text>¥</text>{{i.datePrices[0].price}}
										</view>
									</view>
								</view>
								<view class="btn" @click.stop="reserve(i)">
									<view> {{ i.quantity ? '订' : '满' }} </view>
									<view> {{ i.quantity ? '在线付' : '已订完' }} </view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="facilities" id="target">
					<view class="active">
						<text>设施服务</text>
						<image src="../../static/home/title_bg.png" mode=""></image>
					</view>
					<view class="list_box">
						<view class="item" v-for="(item, index) in ssList1" :key="index">
							<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
							<view>{{item.name}}</view>
						</view>
						<view class="item" v-if="!allFlag" v-for="(item, index) in ssList2" :key="index">
							<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
							<view>{{item.name}}</view>
						</view>
					</view>
					<view class="all" v-if="allFlag" @click="allFlag = !allFlag">
						全部设施
						<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
					</view>
				</view>
				<view class="policy">
					<view class="active">
						<text>订房必读</text>
						<image src="../../static/home/title_bg.png" mode=""></image>
					</view>
					<view class="row">
						<view class="label">城市通知</view>
						<u-parse :content="detail.importantNotice"></u-parse>
						<view class="label">入住限制</view>
						<view class="text">{{detail.checkInWay}}</view>
					</view>
					<view class="col">
						<view class="left">
							<u-icon name="clock" color="rgba(0,0,0,0.85)" size="28rpx"></u-icon>
						</view>
						<view class="right">
							<view>入离时间</view>
							<view>入住时间：{{detail.checkInTime}}之后  离店时间：{{detail.leaveTime}}之前</view>
						</view>
					</view>
				</view>
            </view>
        </view>
		
		<u-popup :show="showPopupDate" :round="10" mode="bottom">
			<view class="date_con" v-if="selected1.length || selected2.length">
				<view class="head">
					<view class="title">选择日期</view>
					<view class="close" @click="closePopup">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<view v-if="isType.indexOf(hourRoomClassifyIds) == -1">
					<wu-calendar :insert="true" mode="range" :date="[startDate, stopDate]" color="#03AE80" :startDate="calendarStartDate1" :endDate="calendarEndDate1" :lunar="true" :monthShowCurrentMonth="true" :selected="selected1" @change="calendarChange1" startText="入住" endText="离店"></wu-calendar>
					<view class="date_fot">
						<view class="bot_box">
							<view class="box1">
								<view class="text">入住</view>
								<view class="date">{{startDateActive}} {{startWeekActive}}</view>
							</view>
							<view class="box2">—</view>
							<view class="box1">
								<view class="text">离店</view>
								<view class="date">{{stopDateActive}} {{stopWeekActive}}</view>
							</view>
						</view>
						<view :class="['btn1', !stopWeekActive ? 'disBtn' : '']" @click="confirm1">确认{{nights}}晚</view>
					</view>
				</view>
				<view v-if="isType.indexOf(hourRoomClassifyIds) != -1">
					<wu-calendar :insert="true" :date="startDateHour" color="#03AE80" :startDate="calendarStartDate2" :endDate="calendarEndDate2" :lunar="true" :monthShowCurrentMonth="true" :selected="selected2" @change="calendarChange2"></wu-calendar>
					<view class="date_fot">
						<view class="bot_box1">
							{{startDateActiveHour}} {{startWeekActiveHour}}入住
						</view>
						<view class="btn1" @click="confirm2">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
export default {
	data () {
		return {
			navHeight: 0,
            paddingTop: 0,
			scrollTop: 0,
			current: 0,
			tabList: ['预定', '详情'],
			isTabs: 0,
			id: '',
			detail: {},
			infoList: null,
			recommendList: null,
			ssList1: [],
			ssList2: [],
			allFlag: false,
			distance: null,
			numData: {},
			typesList: [],
			isType: [],
			// 钟点房房型id
			hourRoomClassifyIds: null,
			
			// 获取房型入住时间参数
			startDateParams: '',
			// 获取房型离店时间参数
			stopDateParams: '',
			// 页面展示入住时间
			startDatePage: '',
			// 页面展示离店时间
			stopDatePage: '',
			// 页面展示入住周几
			startWeekPage: '',
			// 页面展示离店周几
			stopWeekPage: '',
			// 页面展示入住几晚
			nightsPage: 1,
			
			// 获取房型钟点房入住时间参数
			startDateParamsHour: '',
			// 页面展示钟点房入住时间
			startDatePageHour: '',
			// 页面展示钟点房入住周几
			startWeekPageHour: '',
			
			showPopupDate: false,
			// 弹窗展示选中入住时间
			startDate: '',
			// 弹窗展示选中离店时间
			stopDate: '',
			// 弹窗展示入住时间
			startDateActive: '',
			// 弹窗展示离店时间
			stopDateActive: '',
			// 弹窗展示入住周几
			startWeekActive: '',
			// 弹窗展示离店周几
			stopWeekActive: '',
			// 弹窗日历可选开始日期
			calendarStartDate1: '',
			// 弹窗日历可选结束日期
			calendarEndDate1: '',
			// 弹窗展示入住几晚
			nights: 1,
			
			// 弹窗展示钟点房选中入住时间
			startDateHour: '',
			// 弹窗展示钟点房入住时间
			startDateActiveHour: '',
			// 弹窗展示钟点房入住周几
			startWeekActiveHour: '',
			// 弹窗钟点房日历可选开始日期
			calendarStartDate2: '',
			// 弹窗钟点房日历可选结束日期
			calendarEndDate2: '',
			weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			selected1: [],
			selected2: []
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (this.scrollTop < this.paddingTop) {
			this.isTabs = 0;
		}
		// uni.createSelectorQuery().select('.date_scroll').boundingClientRect(res => {
		// 	this.dateScrollTop = res.top;
		// }).exec()
	},
	onShow() {
		this.isType = [];
		// 缓存取房间数、人数
		if (uni.getStorageSync('hotel_room')) {
			this.numData = uni.getStorageSync('hotel_room');
		} else {
			this.numData = {
				room: 1,
				adult: 2,
				children: 0,
			}
			uni.setStorageSync('hotel_room', this.numData);
			uni.setStorageSync('hotel_children', []);
		}
		this.getClassify();
	},
	onLoad (options) {
		this.id = options.id;
        this.navHeight = this.$paddingTop;
		this.paddingTop = this.$paddingTop + uni.upx2px(330);
		
		if (uni.getStorageSync('hotel_date')) {
			let hotelDate = uni.getStorageSync('hotel_date');
			let nowDate = this.$moment().format("YYYY-MM-DD");
			if (this.$moment(hotelDate[0]).isBefore(nowDate)) {
				this.getDate();
				this.numData = {
					room: 1,
					adult: 2,
					children: 0,
				}
				uni.setStorageSync('hotel_room', this.numData);
				uni.setStorageSync('hotel_children', []);
			} else {
				this.startDateParams = hotelDate[0];
				this.stopDateParams = hotelDate[1];
				this.startDatePage = this.$moment(hotelDate[0]).format("MM月DD日");
				this.stopDatePage = this.$moment(hotelDate[1]).format("MM月DD日");
				this.startWeekPage = this.weekList[this.$moment(hotelDate[0]).day()];
				this.stopWeekPage = this.weekList[this.$moment(hotelDate[1]).day()];
				this.nightsPage = this.$moment(hotelDate[1]).diff(this.$moment(hotelDate[0]), 'days');
			}
		} else {
			this.getDate();
		}
		
		this.startDate = this.startDateParams;
		this.stopDate = this.stopDateParams;
		this.startDateActive = this.startDatePage;
		this.stopDateActive = this.stopDatePage;
		this.startWeekActive = this.startWeekPage;
		this.stopWeekActive = this.stopWeekPage;
		this.nights = this.nightsPage;
		
		this.startDateParamsHour = this.startDateParams;
		this.startDatePageHour = this.startDatePage;
		this.startWeekPageHour = this.startWeekPage;
		this.startDateHour = this.startDateParamsHour;
		this.startDateActiveHour = this.startDatePageHour;
		this.startWeekActiveHour = this.startWeekPageHour;
		
		
		this.getDetail();
	},
	
	methods: {
		getDate() {
			this.startDateParams = this.$moment().format("YYYY-MM-DD");
			this.stopDateParams = this.$moment().add(1, 'days').format("YYYY-MM-DD");
			this.startDatePage = this.$moment().format("MM月DD日");
			this.stopDatePage = this.$moment().add(1, 'days').format("MM月DD日");
			this.startWeekPage = this.weekList[this.$moment().day()];
			this.stopWeekPage = this.weekList[this.$moment().add(1, 'days').day()];
			this.nightsPage = 1;
			uni.setStorageSync('hotel_date', [this.startDateParams, this.stopDateParams]);
		},
		async getDetail() {
			let res=await this.$http.homestayId(this.id);
			res.data.carouselImage = res.data.carouselImage.split(',');
			res.data.label = res.data.label.split(',');
			res.data.openingTime = res.data.openingTime.split('-')[0];
			this.detail=res.data;
			this.detail.imageLength = this.detail.carouselImage.length;
			if (this.detail.facilitiesList.length > 8) {
				this.ssList1 = this.detail.facilitiesList.slice(0, 8);
				this.ssList2 = this.detail.facilitiesList.slice(8);
				this.allFlag = true;
			} else {
				this.ssList1 = this.detail.facilitiesList;
				this.ssList2 = [];
				this.allFlag = false;
			}
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				success: (res) => {
					let latitude = res.latitude;
					let longitude = res.longitude;
					if (latitude && longitude) {
						this.getDistance(latitude, longitude, this.detail.latitude, this.detail.longitude);
					}
				}
			})
		},
		async getPriceList() {
			let params = {
				hotelHomestayId: this.id
			}
			let res = await this.$http.hotelLowestPrice(params);
			if (res.data.length) {
				this.calendarStartDate1 = res.data[0].date;
				this.calendarEndDate1 = res.data[res.data.length - 1].date;
				this.selected1 = [];
				res.data.forEach(e => {
					this.selected1.push({
						date: e.date,
						info: '￥' + e.lowerPrice,
						infoColor: '#6ac695'
					})
				})
			} else {
				this.calendarStartDate1 = this.$moment().format("YYYY-MM-DD");
				this.calendarEndDate1 = this.$moment().add(1, 'months').format("YYYY-MM-DD");
			}
		},
		async getHourPriceList() {
			let params = {
				hotelHomestayId: this.id
			}
			let res = await this.$http.hourLowestPrice(params);
			if (res.data.length) {
				this.calendarStartDate2 = res.data[0].date;
				this.calendarEndDate2 = res.data[res.data.length - 1].date;
				this.selected2 = [];
				res.data.forEach(e => {
					this.selected2.push({
						date: e.date,
						info: '￥' + e.lowerPrice,
						infoColor: '#6ac695'
					})
				})
			} else {
				this.calendarStartDate2 = this.$moment().format("YYYY-MM-DD");
				this.calendarEndDate2 = this.$moment().add(1, 'months').format("YYYY-MM-DD");
			}
		},
		async getHouseType() {// 普通房列表
			let ids = [];
			if (this.isType.length) {
				this.isType.forEach(e => {
					ids.push(...e)
				})
			}
			let params = {
				hotelHomestayId: this.id,
				startTime: this.startDateParams,
				endTime: this.stopDateParams,
				roomQuantity: this.numData.room,
				adultQuantity: this.numData.adult,
				roomClassifyIds: ids.join(',')
			}
			let res=await this.$http.classifyList(params);
			this.infoList = res.data.meetConditionRoomClassifyList;
			this.recommendList = res.data.notMeetConditionRoomClassifyList;
		},
		async getHourList() {// 钟点房列表
            let ids = [];
            if (this.isType.length) {
            	this.isType.forEach(e => {
                    if (this.hourRoomClassifyIds != e) ids.push(...e);
            	})
            }
            let params = {
            	hotelHomestayId: this.id,
            	startTime: this.startDateParamsHour,
            	endTime: this.startDateParamsHour,
                roomClassifyIds: ids.join(',')
            }
            let res=await this.$http.hourClassifyList(params);
            this.infoList = res.data.meetConditionRoomClassifyList;
			this.recommendList = res.data.notMeetConditionRoomClassifyList;
		},
		changeType(e) {
			if (e) {
                let index = this.isType.indexOf(e.roomClassifyIds);
                if (index == -1) {
					this.isType.push(e.roomClassifyIds);
                } else {
                    this.isType.splice(index, 1);
                }
                let index1 = this.isType.indexOf(this.hourRoomClassifyIds);
                if (index1 == -1) {
                    if (!this.selected1.length) this.getPriceList();
                    this.getHouseType();
                } else {
                    if (!this.selected2.length) this.getHourPriceList();
                    this.getHourList();
                }
			} else {
				if (!this.selected1.length) this.getPriceList();
				this.getHouseType();
			}
		},
		async getClassify() {
			let res = await this.$http.homeClassify(this.id);
			this.typesList = res.data;
			let f = this.typesList.find(m => m.name.indexOf('钟点房') != -1)
			if (f) this.hourRoomClassifyIds = f.roomClassifyIds;
			this.changeType();
		},
		getDistance(lat1, lon1, lat2, lon2) {
			const R = 6371; // 地球半径，单位为千米
			const dLat = (lat2 - lat1) * Math.PI / 180;
			const dLon = (lon2 - lon1) * Math.PI / 180;
			const a =
				Math.sin(dLat / 2) * Math.sin(dLat / 2) +
				Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
				Math.sin(dLon / 2) * Math.sin(dLon / 2);
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			const distance = R * c;
			this.distance = distance.toFixed(2); // 保留两位小数
		},
        openLocation () {// 打开位置
            if (this.detail.latitude && this.detail.longitude) {
                let latitude = this.detail.latitude;
                let longitude = this.detail.longitude;
                uni.openLocation({
                    latitude: Number(latitude),
                    longitude: Number(longitude),
                    name: this.detail.name,
                    address: this.detail.address,
                })
            }
        },
		changeTab(i) {
            this.isTabs = i;
			if (i == 0) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			} else {
				uni.pageScrollTo({
				    selector: `#${'target'}`,
				    duration: 300,
				})
			}
		},
		detailPage() {
			uni.navigateTo({ url: `/pages/hotel/hotelDetail?id=${this.id}` });
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
        goDetail(id) {
			if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
				uni.navigateTo({ url: `/pages/hotel/hotelSpecs?id=${id}&hotelId=${this.id}` });
			} else {
				uni.navigateTo({ url: `/pages/hotel/hotelSpecs?id=${id}&hotelId=${this.id}&hourDate=${this.startDateParamsHour}` });
			}
        },
		async reserve(e) {
			if (e.quantity) {
				let info = await this.$http.getUserInfo()
				if (info.code === 200) {
					if (info.data.isBlack) {
						uni.showToast({ mask: true, title: '您是黑名单用户,禁止购票', icon: 'none' })
					} else if (!info.data.mobile || !info.data.name) {
						uni.showToast({ mask: true, title: '请完善个人信息', icon: 'none' })
						setTimeout(() => {
							uni.navigateTo({ url: '/pages/my/myProfile' })
						}, 1500)
					} else {
						if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
							uni.navigateTo({ url: `/pages/hotel/confirmOrder?id=${e.id}&hotelId=${this.id}` });
						} else {
							uni.navigateTo({ url: `/pages/hotel/confirmOrder?id=${e.id}&hotelId=${this.id}&hourDate=${this.startDateParamsHour}` });
						}
					}
				} else {
					uni.$u.toast(info.msg);
				}
			}
		},
		confirm1() {
			if (!this.stopWeekActive) {
				uni.showToast({ mask: true, title: '请选择离店日期', icon: 'none' });
			} else {
				this.startDateParams = this.startDate;
				this.stopDateParams = this.stopDate;
				this.startDatePage = this.startDateActive;
				this.stopDatePage = this.stopDateActive;
				this.startWeekPage = this.startWeekActive;
				this.stopWeekPage = this.stopWeekActive;
				this.nightsPage = this.nights;
				this.showPopupDate = false;
				this.getPriceList();
				this.getHouseType();
				uni.setStorageSync('hotel_date', [this.startDateParams, this.stopDateParams]);
			}
		},
		checkInDate() {
			this.showPopupDate = true;
		},
		selectNum() {
            uni.navigateTo({ url: `/pages/hotel/condition` });
		},
		closePopup() {
			this.showPopupDate = false;
			if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
				this.startDate = this.startDateParams;
				this.stopDate = this.stopDateParams;
				this.startDateActive = this.startDatePage;
				this.stopDateActive = this.stopDatePage;
				this.startWeekActive = this.startWeekPage;
				this.stopWeekActive = this.stopWeekPage;
				this.nights = this.nightsPage;
			} else {
				this.startDateHour = this.startDateParamsHour;
				this.startDateActiveHour = this.startDatePageHour;
				this.startWeekActiveHour = this.startWeekPageHour;
			}
		},
		calendarChange1(e) {
			this.startDate = e.range.before;
			this.startDateActive = this.$moment(e.range.before).format("MM月DD日");
			this.startWeekActive = this.weekList[this.$moment(e.range.before).day()];
			this.stopDate = e.range.after || '';
			this.stopDateActive = e.range.after ? this.$moment(e.range.after).format("MM月DD日") : '-';
			this.stopWeekActive = e.range.after ? this.weekList[this.$moment(e.range.after).day()] : '';
			this.nights = e.range.data.length ? (e.range.data.length - 1) : '-';
		},
		calendarChange2(e) {
			this.startDateHour = e.fulldate;
			this.startDateActiveHour = this.$moment(e.fulldate).format("MM月DD日");
			this.startWeekActiveHour = this.weekList[this.$moment(e.fulldate).day()];
		},
		confirm2() {
			this.startDateParamsHour = this.startDateHour;
			this.startDatePageHour = this.startDateActiveHour;
			this.startWeekPageHour = this.startWeekActiveHour;
			this.showPopupDate = false;
			this.getHourPriceList();
			this.getHourList();
		}
	}
}
</script>

<style lang="scss">
.fixed {
	position: fixed; left: 0; top: 169rpx; width: 100%; background: #FFFFFF; padding: 24rpx; box-sizing: border-box; z-index: 6;
	.tabs_box {
		display: flex; align-items: center; padding-left: 21rpx; margin-bottom: 26rpx;
		.tabs {
			margin-right: 55rpx; font-size: 28rpx; color: rgba(0,0,0,0.65);
			&:last-child { margin-right: 0; }
		}
		.activeTabs {
			position: relative; font-weight: 500; font-size: 32rpx; color: #03AE80;
			.line { position: absolute; width: 24rpx; height: 4rpx; background: #03AE80; border-radius: 3rpx; left: 50%; bottom: -10rpx; transform: translateX(-50%); }
		}
	}
	.date{
	    width: 100%; background: rgba(71,175,195,0.1); border-radius: 18rpx; height: 94rpx; box-sizing: border-box; padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center;
	    .left{
	        display: flex; align-items: center;
	        .time{
	            display: flex; align-items: center;
	            view{
	                &:nth-child(1){ color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 500; }
	                &:nth-child(2){ color: rgba(0, 0, 0, 0.45); margin-left: 4rpx; font-size: 24rpx; }
	            }
	        }
	        .site{
	            margin: 0 24rpx; position: relative; height: 24rpx; line-height: 20rpx; color: #03AE80; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 18rpx; padding: 0 8rpx; font-size: 16rpx; font-weight: 500;
	            &::after{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; left: -8rpx; top: 50%; transform: translateY(-50%); }
	            &::before{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); }
	        }
	    }
	    .right{ color: rgba(0, 0, 0, 0.85); font-size: 28rpx; }
	}
}
.swiper{
    width: 100%; height: 492rpx; 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: 122rpx; }
}
.content{
    width: 100%; position: relative; z-index: 5; margin-top: -102rpx;
    .info{
        width: 100%; background: #fff; border-radius: 40rpx 40rpx 0 0; box-sizing: border-box; padding: 32rpx 24rpx 4rpx;
        .title{ line-height: 60rpx; color: rgba(0, 0, 0, 0.85); font-size: 40rpx; font-weight: 600; }
        .time{
            width: 100%; margin-top: 24rpx; border-top: 2rpx solid #ECEAEA; height: 86rpx; box-sizing: border-box; padding-right: 156rpx; position: relative;
            .left{
                width: 100%; height: 100%; position: relative; box-sizing: border-box; padding-left: 145rpx;
                .text{ color: rgba(0, 0, 0, 0.85); font-size: 24rpx; font-weight: 600; position: absolute; left: 0; bottom: 0; height: 84rpx; line-height: 84rpx; }
                .tag{
                    width: 100%; font-size: 0; height: 36rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; top: 24rpx;
                    view{
                        display: inline-block; vertical-align: top; height: 36rpx; line-height: 36rpx; padding: 0 10rpx; background: #F4F4F4; border-radius: 4rpx; color: rgba(0, 0, 0, 0.45); font-size: 20rpx; margin-right: 10rpx;
                        &:last-child{ margin-right: 0; }
                    }
                }
            }
            .right{
                position: absolute; right: 0; top: 24rpx; height: 36rpx; display: flex; align-items: center;
                .text{ color: #03AE80; font-size: 24rpx; margin-right: 4rpx; }
            }
        }
        .address{
            width: 100%; border-top: 2rpx solid #ECEAEA; box-sizing: border-box; padding: 24rpx 72rpx 24rpx 0; position: relative;
            .left{
                width: 100%; min-height: 88rpx; display: flex; flex-direction: column; justify-content: center;
                .area{ width: 100%; line-height: 42rpx; color: rgba(0, 0, 0, 0.85); font-size: 28rpx; font-weight: 600; }
                .msg{
                    margin-top: 8rpx; height: 36rpx; box-sizing: border-box; padding-left: 36rpx; position: relative;
                    .msg_icon{ position: absolute; left: 0; top: 6rpx; width: 24rpx; height: 24rpx; }
                    .text{ color: rgba(0, 0, 0, 0.45); font-size: 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 36rpx; }
                }
            }
            .right{
                position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;
                .right_icon{
					image{ width: 52rpx; height: 52rpx;  }
				}
                .text{ margin-top: 4rpx; color: #03AE80; font-size: 24rpx; }
            }
        }
    }
    .content_waper{
        width: 100%; box-sizing: border-box; padding: 22rpx 24rpx;
        .date{
            width: 100%; background: #fff; border-radius: 18rpx; height: 94rpx; box-sizing: border-box; padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center;
            .left{
                display: flex; align-items: center;
                .time{
                    display: flex; align-items: center;
                    view{
                        &:nth-child(1){ color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 500; }
                        &:nth-child(2){ color: rgba(0, 0, 0, 0.45); margin-left: 4rpx; font-size: 24rpx; }
                    }
                }
                .site{
                    margin: 0 24rpx; position: relative; height: 24rpx; line-height: 20rpx; color: #03AE80; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 18rpx; padding: 0 8rpx; font-size: 16rpx; font-weight: 500;
                    &::after{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; left: -8rpx; top: 50%; transform: translateY(-50%); }
                    &::before{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); }
                }
            }
            .right{ color: rgba(0, 0, 0, 0.85); font-size: 28rpx; }
        }
		.types_box {
			width: 100%; height: 96rpx;
			.scroll_waper {width: 100%; height: 100%; white-space: nowrap;}
			.types {
				width: 155rpx; height: 70rpx; display: inline-block; background: #FFFFFF; border-radius: 10rpx; border: 2rpx solid #FFFFFF; margin-right: 22rpx; margin-top: 22rpx;position: relative;
				&:last-child {margin-right: 0;}
				text {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 500; font-size: 24rpx; color: rgba(0,0,0,0.65); text-align: center; line-height: 1; }
			}
			.activeType {
				border: 2rpx solid #03AE80;
				text {font-size: 28rpx; color: #03AE80;}
				.atvIcon {position: absolute; right: 0; bottom: 0; width: 40rpx; height: 40rpx;}
			}
		}
        .shop{
            width: 100%;
            .list{
                width: 100%; position: relative; box-sizing: border-box; padding: 24rpx; padding-left: 206rpx; border-radius: 18rpx; background: #fff; margin-bottom: 20rpx;
				&:last-child { margin-bottom: 0; }
                .img{
                    width: 158rpx; height: 200rpx; position: absolute; left: 24rpx; top: 24rpx;
                    image{ border-radius: 10rpx; }
                    view{ border-radius: 0 10rpx 0 10rpx; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); color: #fff; text-align: center; line-height: 30rpx; height: 30rpx; font-size: 24rpx; width: 50rpx; }
                }
                .text{
                    width: 100%; height: 200rpx; box-sizing: border-box; padding-top: 4rpx; position: relative;
                    .title{ line-height: 48rpx; height: 48rpx; color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                    .tag{
                        margin-top: 10rpx; font-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 36rpx;
                        view{
                            display: inline-block; vertical-align: top; color: rgba(0, 0, 0, 0.85); font-size: 24rpx; margin-right: 12rpx; line-height: 36rpx;
                            &:last-child{ margin-right: 0; }
                        }
                    }
                    .msg{ margin-top: 8rpx; height: 36rpx; color: #03AE80; line-height: 36rpx; font-size: 24rpx; box-sizing: border-box; padding-right: 92rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
					.fot {
						margin-top: 8rpx; height: 46rpx; display: flex; align-items: center; justify-content: space-between;
						.surplus { font-size: 24rpx; color: #E54042; }
						.money{
							display: flex; align-items: baseline; box-sizing: border-box; padding-right: 92rpx;
							view{
								&:first-child { font-size: 20rpx; color: rgba(0,0,0,0.45); margin-right: 4rpx; text-decoration: line-through; }
								&:last-child {
									font-weight: bold; font-size: 40rpx; color: #E54042;
									text { font-size: 24rpx; color: #E54042; }
								}
							}
						}
					}
					.btn {
						position: absolute; right: 0; bottom: 0; width: 78rpx; height: 82rpx; border-radius: 10rpx; border: 3rpx solid #03AE80; overflow: hidden; text-align: center; background-color: #03AE80;
						view{
							&:first-child { font-weight: 500; font-size: 32rpx; color: #FFFFFF; line-height: 52rpx; }
							&:last-child { height: 30rxp; line-height: 30rpx; width: 100%; text-align: center; background-color: #FFFFFF; font-size: 20rpx; color: rgba(0,0,0,0.65); }
						}
					}
                }
				.grey {
					.title {color: rgba(0,0,0,0.25);}
					.tag {
						view {color: rgba(0,0,0,0.25);}
					}
					.msg {color: rgba(0,0,0,0.25);}
					.btn {
						border: 3rpx solid #BFBFBF;  background-color: #BFBFBF;
						view{
							&:last-child { color: rgba(0,0,0,0.25); }
						}
					}
				}
            }
        }
		.recommendText {
			padding: 22rpx 24rpx; display: flex; align-items: center;
			.tips {margin-left: 12rpx; font-size: 24rpx; color: #E54042;}
		}
		.col1 {
			.tips {color: #03AE80;}
		}
		.active{
			position: relative; display: inline-block; vertical-align: top; margin-bottom: 4rpx;
			text{ font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); }
			image{ width: 72rpx; height: 37rpx; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: -46rpx; display: block; }
		}
		.facilities {
			margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx 24rpx; box-sizing: border-box;
			.list_box {
				display: flex; align-items: center; flex-wrap: wrap;
				.item {
					margin-top: 20rpx; text-align: center; width: 25%;
					image { width: 40rpx; height: 40rpx; }
					view { margin-top: 8rpx; font-size: 24rpx; color: rgba(0,0,0,0.85); }
				}
			}
			.all { margin-top: 24rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #03AE80; }
		}
		.policy {
			margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx 24rpx; box-sizing: border-box;
			.row {
				padding-bottom: 24rpx; border-bottom: 1rpx solid #ECEAEA; margin-bottom: 24rpx;
				.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin: 20rpx 0 12rpx; }
				.text { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
				u-parse { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
			}
			.col {
				margin-top: 20rpx; display: flex; align-items: baseline;
				.right {
					margin-left: 12rpx;
					view {
						&:first-child { font-size: 28rpx; color: rgba(0,0,0,0.85); }
						&:last-child { margin-top: 12rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); }
					}
				}
			}
		}
    }
}
.date_con {
	padding: 32rpx 0 10rpx; position: relative; max-height: 80vh; overflow: scroll;
	.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%); }
	}
	.date_fot {
		border-top: 1rpx solid #ECEAEA; padding: 30rpx 48rpx 0; box-sizing: border-box;
		.bot_box {
			display: flex; align-items: center; justify-content: space-between; padding: 0 12rpx;
			.box1 {
				flex: 1;
				.text {font-size: 24rpx; color: rgba(0,0,0,0.45); margin-bottom: 8rpx;}
				.date {font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
			}
			.box2 {width: max-content; margin: 0 98rpx; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
		}
		.bot_box1 { text-align: center; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85); }
		.btn1 {height: 90rpx;line-height: 90rpx; background: #03AE80; border-radius: 49rpx; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-top: 36rpx; text-align: center;}
		.disBtn {background: #DCDCDC;}
	}
}
</style>