<template>
	<view class="hotel-detail">
		<scroll-view ref="scrollView" scroll-y="true" style="width: 100%; height: 100%" @scroll="scroll"
			:scroll-top="scrollTop">
			<view class="media" :style="{ opacity: 100 - boxOption + '%' }" @click="openPicture">
				<u-swiper 
					:list="dataList.images" 
					:effect3d="false" 
					:height="545" 
					:interval="5000" 
					:border-radius="0"
					name="url" 
					v-if="active == 1">
				</u-swiper>
				<view class="video-box" v-if="active == 0">
					<video id="myVideo" :src="detailData.VideoUrl" style="width: 100%; height: 100%"
						:controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false"
						@fullscreenchange="videoControl" object-fit="fill"></video>
					<view @click="enlarge" class="play-btn">
						<!-- 播放按钮 -->
						<image
							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
							style="width: 37rpx; height: 44rpx" mode=""></image>
					</view>
				</view>
				<view class="media-info" v-if="dataList.images">
					<view class="flex">
						<view class="mi-left">
							<view v-if="dataList.images.length > 0" class="type-img-box">
								<image :src="dataList.images[0].url" mode="aspectFill"></image>
								<view class="content">
									<text>{{ dataList.images.length }}</text>
								</view>
							</view>
						</view>
						<view class="mi-right">
							<view @click.stop="''" class="king">
								<img style="width: 19rpx;height: 24rpx;"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762515984923148.png" />
								<button class="detail_ShareBtn" open-type="share"></button>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN  -->
				<view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]"
					style="position: fixed; top: 0; left: 0; padding-left: 6rpx">
					<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx"></u-icon>
				</view>
				<!-- #endif -->
			</view>
			<view class="hotel-title" :style="[titleStyle]">
				<view @click="goback">
					<!-- #ifdef MP-WEIXIN  -->
					<u-icon name="arrow-left" size="44"></u-icon>
					<!-- #endif -->
				</view>
				<view style="flex: 1; margin-left: 30rpx; text-align: left" class="name-ali">
					{{ dataList.name }}
				</view>
			</view>
			<view class="hotel-content">
				<view class="hotel-base">
					<view style="padding: 0 31rpx;">
						<view class="head">
							<view style="flex: 1">
								<view class="hotel-name">
									<img class="hotel-Sub"
										:class="[dataList.starRating==3?'hotel-Sub3':dataList.starRating==4?'hotel-Sub4':'']"
										v-if="dataList.starRating>=3&&dataList.starRating<6" style=""
										:src="dataList.starRating==3?StarImgs[0]:dataList.starRating==4?StarImgs[1]:StarImgs[2]" />
									<text v-else class="hotel-Economy">经济型</text>
									{{ dataList.name }}
								</view>
								<view class="hotel-brand">
									{{ dataList.brandname?dataList.brandname:'' }}
								</view>
								<view class="hotel-tag">
									<text class="hotel-Opening" v-if="dataList.HotelInfo.OpenTime">
										{{dataList.HotelInfo.OpenTime}}开业
									</text>
									<text v-for="(subItem, subIndex) in dataList.TagList" :key="subIndex"
										class="hotel-tagText">{{ dataList.rooms[0].hasWifi }}
									</text>
									<text v-if="dataList.rooms[0].hasWifi" class="hotel-tagText">WIFI
									</text>
								</view>
								<view class="hotelDetaMapBox">
									<view class="hotelDetaMap row items-center">
										<view class="hotelDetaMapL" style="width: 1px;flex: 1;">
											<view>{{dataList.location.address}}</view>
											<view>
												{{ dataList.location.destination.name }}
											</view>
										</view>
										<view class="hotelMapIcon column"
											@click="goMap(dataList.location.address, dataList.location.coordinate.longitude, dataList.location.coordinate.latitude)">
											<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638759918587378741.png"
												style="width: 45rpx;height: 36rpx;" />
											<text>地图</text>
										</view>
									</view>
								</view>

							</view>
						</view>
						<view class="hotelTimeBox row" @click="openTime">
							<view class="hotelTimeBoxL row">
								<view class="row">
									<view class="hotelTime column">
										<text class="hotelTimeTop">今天</text>
										<view>{{ formatMonthDay(startDay) }}
											<text
												style="font-weight: 100;color: #080A09;position: relative;top: -15rpx;left: 11rpx;">-</text>
										</view>
									</view>
									<view class="hotelTime column" style="padding-left: 22rpx;">
										<text class="hotelTimeTop">明天</text>
										<view>{{ formatMonthDay(endDay) }}</view>
									</view>
								</view>
								<view class="hotelTimeEven column">
									<view style="height: 1px;flex: 1;"></view>
									<view>
										<text>{{day}}晚</text>
									</view>
								</view>
							</view>
							<view class="hotelTimeBoxR column">
								<text class="hotelTimeBoxRTitle">间数/人数</text>
								<view class="hotelTimeBoxRText row">
									<view class="hotelTimeBoxRT row items-center">
										<text>房间</text>
										<view>{{ searchObj.rooms }}</view>
									</view>
									<view class="hotelTimeBoxRT row items-center">
										<text>成人</text>
										<view>{{ searchObj.adultsNumber }}</view>
									</view>
									<view class="hotelTimeBoxRT row items-center">
										<text>儿童</text>
										<view>{{ searchObj.childrenNumberZC }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="getQueryData.length>0">
						<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#B99846"
							inactive-color="#080A09" title-size="28">
							<u-dropdown-item :title="optionsTitle[0]" :options="options1">
								<scroll-view :scroll-y="true" class="hotelScroll" style="height: 200px;">
									<view class="slot-content hotelComprehensiveBox column"
										style="background-color: #FCFCFC">
										<view class="hotelComprehensiv row items-center"
											v-for="(item,index) in qRoomTypeList" :key="index"
											:class="[qMsg.RoomTypeName==item.RoomName_CN?'active':'']"
											@click="changeType(item,1)">
											<text>{{ item.RoomName_CN }}</text>
											<view v-if="qMsg.RoomTypeName==item.RoomName_CN">
												<img
													src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png" />
											</view>
										</view>
									</view>
								</scroll-view>
							</u-dropdown-item>
							<u-dropdown-item :title="optionsTitle[1]" :options="options1">
								<scroll-view :scroll-y="true" class="hotelScroll" style="height: 200px;">
									<view class="slot-content hotelComprehensiveBox column"
										style="background-color: #FCFCFC">
										<view class="hotelComprehensiv row items-center"
											v-for="(item,index) in qMealTypeList" :key="index"
											:class="[qMsg.MTypeName==item.MTypeName?'active':'']"
											@click="changeType(item)">
											<text>{{ item.MTypeName?item.MTypeName:'-' }}</text>
											<view v-if="qMsg.MTypeName==item.MTypeName">
												<img
													src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png" />
											</view>
										</view>
									</view>
								</scroll-view>
							</u-dropdown-item>
						</u-dropdown>
						<hotelRoom :dataList="dataList" :rooms="getQueryData" :roomMsg="roomMsg" :search="searchObj"
							:day="dayObj" :qRoomType="qRoomTypeList" :qMealType="qMealTypeList"></hotelRoom>
					</view>
					<u-empty v-show="getQueryData.length==0&&!loading" text="暂无空房间" mode="data" padding-top="5"></u-empty>
				</view>
				<view style="border-radius: 15rpx 15rpx 0 0;background: #fff;overflow: hidden;">
					<view class="hotelFacilitiesBox">
						<view class="hotelFacilitiesTitleBox row">
							<view class="hotelFacilitiesTitle" v-for="(item,index) in hotelFacilities" :key="index"
								:class="[current==item.ID?'active':'']" @click="goFacil(item)">
								<text>{{item.Name}}</text>
								<view class="hotelFacilitiesTb row">
									<view></view>
								</view>
							</view>
						</view>
						<hotelInfor ref="hotelInfor" id="hotelInfor" :dataList="dataList"></hotelInfor>
					</view>
					<view class="detail-box">
						<hotelPolicy ref="hotelPolicy" id="hotelPolicy" :dataList="dataList"></hotelPolicy>
						<hotelFacilities ref="hotelFacilities" id="hotelFacilities" :dataList="dataList">
						</hotelFacilities>
					</view>
				</view>
			</view>

		</scroll-view>
		<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="89%" :safe-area-inset-bottom="true">
			<CheckDate :msg="searchObj" @chosenDateResult="chosenDateResult"></CheckDate>
		</u-popup>
		<auth v-if="showAuth&&is_show_auth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import roomGood from "./components/room-good.vue";
	import nearGood from "./components/near-good.vue";
	import recommedHotel from "./components/recommed-hotel.vue";
	import canlendar from "./components/time/index.vue";
	import hotelRoom from "./components/hotelRoom.vue";
	import hotelInfor from "./components/hotelInfor.vue";
	import hotelPolicy from "./components/hotelPolicy.vue";
	import hotelFacilities from "./components/hotelFacilities.vue";
	import CheckDate from "./components/time/date.vue";
	export default {
		components: {
			auth,
			roomGood,
			nearGood,
			recommedHotel,
			canlendar,
			hotelInfor,
			hotelPolicy,
			hotelFacilities,
			hotelRoom,
			CheckDate,
		},
		data() {
			return {
				showAuth: false,
				imgsList: [],
				id: 0,
				typeList: [{
						Id: 0,
						Name: "视频",
					},
					{
						Id: 1,
						Name: "图片",
					},
				],
				boxOption: 0,
				titleStyle: {
					opacity: 0,
				},
				mainColor: "",
				showTimePopup: false,
				controls: false,
				videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
				active: 1,
				islike: false,
				nearbyType: 0,
				searchObj: {
					date: {},
					searchroomGroup: []
				},
				roomMsg: {
					hotelid: 0,
					StartDate: "",
					EndDate: "",
				},
				day: 0,
				threeLevelList: [{
						name: "单人床",
						id: 1,
						isCheck: 0,
					},
					{
						name: "大床房",
						id: 2,
						isCheck: 0,
					},
					{
						name: "双床房",
						id: 3,
						isCheck: 0,
					},
					{
						name: "含早餐",
						id: 4,
						isCheck: 0,
					},
					{
						name: "可取消",
						id: 5,
						isCheck: 0,
					},
				],
				RoomList: [], //可过滤房间
				dataList: {}, //数据
				isShowAll: false, //显示全部
				HotelArr: [], //推荐酒店
				searchObj: {},
				dayObj: {},
				hotelData: {}, //传递到房间预订组件
				startDay: "",
				endDay: "",
				Up: 0,
				StarImgs: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel3stars.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel4stars.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel5stars.png',
				],
				openImg: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498946531.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498917358.png'
				],
				optionsTitle: ["房型", "餐食"],
				hotelFacilities: [{
						Name: '酒店信息',
						ID: 1,
						val: 'hotelInfor',
						top: 0,
					},
					{
						Name: '酒店政策',
						ID: 2,
						val: 'hotelPolicy',
						top: 0,
					},
					{
						Name: '设施服务',
						ID: 3,
						val: 'hotelFacilities',
						top: 0,
					},
				],
				current: 1,
				scrollTop: 100,
				old: {
					scrollTop: 0
				},
				loading: false,
				DidaHotelRoomDetails: {},
				qRoomTypeList: [],
				qMealTypeList: [{
					ID: '',
					MTypeName: "全部"
				}],
				HotelMealTypes: [],
				qMsg: {
					RoomTypeName: "", //房型筛选
					MTypeName: "", //早餐筛选
				},
				U: {},
				b2bUser: {},
				is_show_auth: 0,
			};
		},
		computed: {
			getQueryData: {
				get() {
					var _this = this;
					var tempData = [];
					_this.loading = true;
					if (_this.DidaHotelRoomDetails && _this.DidaHotelRoomDetails.HotelList && _this
						.DidaHotelRoomDetails
						.HotelList
						.length > 0 && _this.DidaHotelRoomDetails.HotelList) {

						let arrList = function(list) {
							list.forEach(item => {
								item.show = false
							})
						}
						arrList(_this.DidaHotelRoomDetails.HotelList)
						tempData = JSON.parse(JSON.stringify(_this.DidaHotelRoomDetails.HotelList));
						if (_this.qMsg.RoomTypeName && _this.qMsg.RoomTypeName != '') {
							tempData = tempData.filter(qitem => qitem.RoomName_CN == _this.qMsg.RoomTypeName);
						}
						if (_this.qMsg.MTypeName && _this.qMsg.MTypeName.MTypeName != '') {
							var newDataArray = [];
							tempData.forEach(qitem => {
								var tempRetePlanList = [];
								if (qitem.RatePlanList && qitem.RatePlanList.length > 0) {
									qitem.RatePlanList.forEach(pItem => {
										if (pItem.PriceList && pItem.PriceList.length > 0) {
											pItem.PriceList.forEach(mItem => {
												var tempObj = _this.qMealTypeList.find(
													mtItem => mtItem.MTypeName == _this
													.qMsg
													.MTypeName);
												if (mItem.MealAmount == tempObj.MealAmount &&
													mItem.MealType == tempObj
													.MealType) {
													tempRetePlanList.push(pItem)
												}
											})
										}
									})
								}
								qitem.RatePlanList = tempRetePlanList;
								if (tempRetePlanList && tempRetePlanList.length > 0) {
									newDataArray.push(qitem);
								}
							})
							tempData = newDataArray;
						}
					}
					_this.loading = false;
					return tempData;
				},
			}
		},
		created() {
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
		},
		onLoad(options) {
			this.U = uni.getStorageSync("mall_UserInfo");
			this.b2bUser = uni.getStorageSync("b2b_user");
			this.id = options.id;
			this.roomMsg.hotelid = options.id;
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0",
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
			if (options.dayObj) {
				var tempDay = JSON.parse(options.dayObj);
				this.roomMsg.StartDate = tempDay.start;
				this.roomMsg.EndDate = tempDay.end;
				this.startDay = tempDay.startDay;
				this.endDay = tempDay.endDay;
				this.day = tempDay.day;
				this.dayObj = tempDay;
			} else {
				let d1 = new Date();
				let d = new Date();
				let d2 = new Date(d.setDate(d.getDate() + 1));
				let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
				let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);

				let month1 = d1.getMonth() + 1;
				let day1 = d1.getDate();
				let Month1 = month1 > 9 ? month1 : '0' + month1;
				let Day1 = day1 > 9 ? day1 : '0' + day1;
				let month2 = d2.getMonth() + 1;
				let day2 = d2.getDate();
				let Month2 = month2 > 9 ? month2 : '0' + month2;
				let Day2 = day2 > 9 ? day2 : '0' + day2;
				var obj = {
					start: `${d1.getFullYear()}-${Month1}-${Day1}`,
					end: `${d2.getFullYear()}-${Month2}-${Day2}`,
					startDay: `${Month1}-${Day1}`,
					endDay: `${Month2}-${Day2}`,
					day: 1,
					startWeek: startWeek,
					endWeek: endWeek,
				};
				this.roomMsg.StartDate = obj.start;
				this.roomMsg.EndDate = obj.end;
				this.startDay = obj.startDay;
				this.endDay = obj.endDay;
				this.day = obj.day;
				this.dayObj = obj;
			}
			if (this.id > 0) {
				this.getHotelDetail(this.id);
			}
			if (options.searchObj) {
				this.searchObj = JSON.parse(options.searchObj);
			}
			this.getHotelPrices()
			this.getdidaMealType()
		},
		onShow() {
			let basedata = uni.getStorageSync("basedata");
			//判断后台是否开启自动授权
			if (basedata && basedata.mall && basedata.mall.setting && basedata.mall.setting && basedata.mall.setting
				.is_show_auth ==
				1) {
				this.is_show_auth = 1;
			}
			if (!this.U) {
				this.U = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			} else if (!this.b2bUser && this.is_show_auth == 1) {
				this.U = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			}
		},
		methods: {
			reloadUserinfo() {
				const pages = getCurrentPages()
				const curPage = pages[pages.length - 1]
				curPage.onLoad(curPage.options)
				curPage.onShow()
				curPage.onReady()
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			open(index) {
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},
			changeType(item, type) {
				if (type) {
					this.optionsTitle[0] = item.RoomName_CN != '全部' ? item.RoomName_CN : '房型'
					this.qMsg.RoomTypeName = item.RoomName_CN != '全部' ? item.RoomName_CN : '';
				} else {
					this.optionsTitle[1] = item.MTypeName != '全部' ? item.MTypeName : '餐食'
					this.qMsg.MTypeName = item.MTypeName != '全部' ? item.MTypeName : '';
				}
				this.$refs.uDropdown.close();
			},
			// 获取房间价格
			getHotelPrices() {
				let that = this
				this.loading = true
				this.apipost('dmc_post_GetDiDaPriceSearchList', {
					hotelId: this.roomMsg.hotelid,
					sort: 0,
					displayFrom: 1,
					roomOptionCd: "",
					searchroomGroup: [{
						roomNum: 1,
						numberOfAdults: 2,
						numberOfChildren: 0,
						ChildAgeDetails: ""
					}],
					auditNum: this.searchObj.adultsNumber,
					childNum: this.searchObj.childrenNumberZC,
					CheckInDate: this.dayObj.startTime,
					CheckOutDate: this.dayObj.endTime,
				}, res => {
					if (res.resultCode == 1) {
						var tempData = res.data;
						console.log("dmc_post_GetDiDaPriceSearchList", tempData);
						this.DidaHotelRoomDetails = tempData;
						this.qRoomTypeList = tempData.qRoomTypeList;
						if (this.qRoomTypeList && this.qRoomTypeList.length > 0) {
							this.qRoomTypeList.unshift({
								RoomTypeID: -1,
								RoomName_CN: '房型(全部)'
							})
						}
						this.qMealTypeList = tempData.qMealTypeList;
						if (this.qMealTypeList && this.qMealTypeList.length > 0) {
							this.qMealTypeList.unshift({
								MTypeName: "餐型(全部)",
								MealAmount: 0,
								MealType: 0,
							})
						}
					}
				})
			},
			//获取道旅餐食类型
			getdidaMealType() {
				this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res => {
					if (res.resultCode == 1) {
						this.HotelMealTypes = res.data;
					}
				}, null)
			},
			//获取餐型
			getMealtype(mealtypeId) {
				let mealtypeName = "";
				if (mealtypeId > 0) {
					this.HotelMealTypes.forEach((item) => {
						if (item.ID == mealtypeId) {
							mealtypeName = item.Name_CN;
						}
					});
				}
				return mealtypeName;
			},
			goFacil(item) {
				this.current = item.ID;
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = item.top
				});
			},
			openTime() {
				this.showTimePopup = true;
			},
			//获取推荐酒店
			getRecomHotel() {
				this.searchObj.hotelid = this.id;
				this.request2({
						url: "/api/Hotel/AppGetHotelPage",
						data: this.searchObj,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.HotelArr = [];
							let tempHotel = res.data.pageData;
							tempHotel.forEach((x) => {
								if (this.HotelArr.length < 2) {
									this.HotelArr.push(x);
								}
							});
						}
					}
				);
			},
			goMap(name, lon, lat) {
				let newLon = parseFloat(lon);
				let newLat = parseFloat(lat);
				uni.openLocation({
					latitude: newLat,
					longitude: newLon,
					scale: 18,
					name: name,
					address: name,
					success: (res) => {},
					fail: (err) => {},
				});
			},
			openPicture() {
				let imgObj = JSON.stringify(this.dataList.images);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj,
				});
			},
			openDescription() {
				let hotelObj = JSON.stringify({
					id: this.id,
					start: this.dayObj.start,
					end: this.dayObj.end,
				});
				uni.navigateTo({
					url: "/pages/hotel/description?hotelObj=" + encodeURIComponent(hotelObj),
				});
			},
			chosenDateResult(parameters, obj) {
				this.searchObj = parameters
				this.roomMsg.StartDate = obj.start;
				this.roomMsg.EndDate = obj.end;
				this.startDay = obj.startDay;
				this.endDay = obj.endDay;

				this.day = obj.day;
				// this.getRoomType();
				this.dayObj = {
					...obj,
					startTime: `${obj.year}-${obj.startDay}`,
					endTime: `${obj.year}-${obj.endDay}`
				}
				this.showTimePopup = false;
				this.getHotelPrices()
			},
			//切换日期获取房型
			getRoomType() {
				this.request2({
						url: "/api/Hotel/GetHotelRoom",
						data: this.roomMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.RoomList = res.data.RoomList;
						}
					}
				);
			},
			formatMonthDay(str) {
				let temp = str.split("-");
				// temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0];
				// temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1];
				return `${temp[0]}月${temp[1]}日`;
			},
			getMonth(date) {
				let m = date.getMonth() + 1;
				return m > 9 ? m : "0" + m;
			},
			getDay(date) {
				let d = date.getDate();
				return d > 9 ? d : "0" + d;
			},
			getWeek(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				return "周" + week;
			},
			changeNearbyType(t) {
				this.nearbyType = t;
			},
			//显示全部
			getAllRoom() {
				this.isShowAll = !this.isShowAll;
				if (this.isShowAll) {
					this.threeLevelList.forEach((x) => {
						x.isCheck = 1;
					});
					this.RoomList = this.dataList.RoomList;
				} else {
					this.threeLevelList.forEach((x) => {
						x.isCheck = 0;
					});
				}
			},
			//点击过滤房间
			changeRoomType(obj) {
				if (obj.isCheck == 0) {
					obj.isCheck = 1;
				} else {
					obj.isCheck = 0;
				}
				this.RoomList = [];
				let num = 0;
				this.threeLevelList.forEach((x) => {
					if (x.isCheck == 1) {
						num++;
						this.dataList.RoomList.forEach((y) => {
							if (x.id == 1 && y.BedType == 1) {
								this.RoomList.push(y);
							}
							if (x.id == 2 && y.BedType == 2) {
								this.RoomList.push(y);
							}
							if (x.id == 3 && y.BedType == 3) {
								this.RoomList.push(y);
							}
							if (x.id == 4 && y.BreakfastType != 4) {
								this.RoomList.push(y);
							}
							if (x.id == 5 && y.IsCancel == 2) {
								this.RoomList.push(y);
							}
						});
					}
				});
				if (num == this.threeLevelList.length) {
					this.isShowAll = true;
				} else {
					this.isShowAll = false;
				}
				if (num == 0) {
					this.RoomList = this.dataList.RoomList;
				}
			},
			changeLike() {
				this.islike = !this.islike;
			},
			previewImage(i) {
				uni.previewImage({
					urls: this.imgsList,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {},
					},
				});
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity =
					e.detail.scrollTop - 100 < 0 ?
					0 :
					Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 100) / 100;
				this.$forceUpdate();
			},
			enlarge(file) {
				// 全屏
				this.videoContext = uni.createVideoContext("myVideo");
				this.videoContext.requestFullScreen({
					direction: 0,
				});
			},
			videoControl(e) {
				if (e.detail.fullScreen == false) {
					this.videoContext.stop();
					this.controls = false;
				} else {
					this.videoContext.play();
					this.controls = true;
				}
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			changeHandler(i) {
				this.active = i;
			},
			//获取酒店详情
			getHotelDetail(id) {
				this.apipost('dmc_post_GetDidaHotelInfo', {
					hotelid: id
				}, res => {
					if (res.resultCode == 1) {
						this.RoomList = []
						let arrList = function(list) {
							list.forEach(x => {
								x.Path = ''
							})
						}
						arrList(res.data.rooms)
						this.dataList = res.data;
						for (let i = 0; i < res.data.images.length; i++) {
							res.data.images[i].Path = res.data.images[i].url
						}
						this.hotelData.hotelid = this.dataList.hotelid;
						this.hotelData.name = this.dataList.name;
						setTimeout(() => {
							this.hotelFacilities.forEach((x) => {
								const query = uni.createSelectorQuery().select(`#${x.val}`);
								query.boundingClientRect((rect) => {
									x.top = rect.top;
								}).exec();
							})
						}, 1000);
					}
				})
			},
			// #ifdef MP-WEIXIN
			//分享朋友圈
			onShareTimeline() {
				let uid = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserId :
					0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				}
				let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").SmallShopId :
					0;
				if (SmallShopId == 0) {
					//如果微店id为0 去找所属微店id
					SmallShopId = uni.getStorageSync("mall_UserInfo") ?
						uni.getStorageSync("mall_UserInfo").UserSmallShopId :
						0;
				}
				let title = this.dataList.name ? this.dataList.name : "帖子";
				let imageUrl =
					this.dataList.HotelImg && this.dataList.HotelImg.length > 0 ?
					this.dataList.HotelImg[0] :
					"";
				let id = this.id;
				return {
					title: title,
					query: "id=" +
						this.id +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=18" +
						"&dayObj=" +
						JSON.stringify(this.dayObj) +
						"&searchObj=" +
						JSON.stringify(this.searchObj),
					imageUrl: imageUrl,
				};
			},

			//分享给朋友
			onShareAppMessage(res) {
				let u = uni.getStorageSync("mall_UserInfo");
				let uid = u.UserId ? u.UserId : 0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				}
				let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
				if (SmallShopId == 0) {
					//如果微店id为0 去找所属微店id
					SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
				}
				return {
					title: this.dataList.name ? this.dataList.name : "帖子",
					path: "/pages/index/index?id=" +
						this.id +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=18" +
						"&dayObj=" +
						JSON.stringify(this.dayObj) +
						"&searchObj=" +
						JSON.stringify(this.searchObj),
					imageUrl: this.dataList.HotelImg && this.dataList.HotelImg.length > 0 ?
						this.dataList.HotelImg[0] : "",
				};
			},
			// #endif

		},
	};
</script>

<style scoped>
	@import url("@/asset/css/flex.css");

	.hotel-detail {
		height: 100vh;
		overflow: hidden;
		width: 100vw;
		font-family: "pingfang";
		background: #F3F3F3;
	}

	.hotel-detail .flex {
		display: flex;
		align-items: center;
	}

	.hotel-detail .f12 {
		font-size: 24rpx !important;
	}

	.hotel-detail .king {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.hotel-detail .regular {
		font-weight: 500 !important;
	}

	.hotel-detail .hotel-content {
		position: relative;
		z-index: 2;
		top: -110rpx;
	}

	.hotel-detail .hotel-content .date-box {
		margin: 30rpx 0;
		background: #ecf1f4;
		border-radius: 16rpx;
		padding: 25rpx;
		justify-content: space-between;
	}

	.hotel-detail .hotel-content .date-box .hr-line {
		width: 24rpx;
		height: 4rpx;
		background: #222;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .ver-line {
		width: 1px;
		height: 49rpx;
		background: #a8a8a8;
		opacity: 0.3;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .date {
		font-size: 24rpx;
		font-weight: bold;
		color: #111111;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .date .date-week {
		font-size: 24rpx;
		font-weight: 500;
		color: #6e6e6e;
		margin-left: 18rpx;
	}

	.hotel-detail .hotel-content .hotel-more-info {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #ffffff;
		border: 1px solid #111111;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 500;
		color: #1f1f1f;
		text-align: center;
	}

	.hotel-detail .empty-block {
		height: 20rpx;
		background-color: #ecf1f4;
	}

	.hotel-detail .hotel-content .detail-box {
		padding: 33rpx 30rpx 0 30rpx;
	}

	.hotel-detail .hotel-content .detail-box .nearby-type {
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-right: 10rpx;

		font-size: 28rpx;
		font-weight: 500;
		color: #1f1f1f;
	}

	.hotel-detail .hotel-content .detail-box .nearby-type.active {
		color: #dfbe6e;
		background: rgba(223, 190, 110, 0.2);
	}

	.hotel-detail .hotel-content .title-style-one {
		font-weight: 500;
		font-size: 24rpx;
		color: #080A09;
		line-height: 43rpx;
		text-indent: 21rpx;
	}

	.hotel-detail .hotel-content .title-style-one item-title {
		line-height: 36rpx;
	}

	.hotel-detail .hotel-content .title-style-one .item-content {
		color: #B99846;
		margin-left: 5rpx;
		line-height: 36rpx;
	}

	.title-style-one li {
		margin-bottom: 5rpx;
	}

	.hotel-detail .hotel-content .big-title {
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 35rpx;
	}

	.hotel-detail .hotel-content .big-title::before {
		display: block;
		width: 18rpx;
		height: 18rpx;
		background: #E2C27A;
		border-radius: 5rpx;
		content: " ";
		position: absolute;
		left: 0;
		bottom: -4rpx;
		z-index: 1;
	}

	.hotel-detail .hotel-content .big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1f1f1f;
		position: relative;
		z-index: 2;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
		/* padding:10rpx 30rpx; */
		display: flex;
		align-items: center;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.hotel-detail .hotel-content .hotel-base .room-list {
		padding-top: 40rpx;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
		padding: 16rpx 30rpx;
		background: #ecf1f4;
		border-radius: 8rpx;
		margin-right: 26rpx;
		font-size: 22rpx;
		color: #999999;
		font-weight: 400;
		flex-shrink: 0;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
		background: #111111;
		color: #ffffff;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item:last-child {
		margin-right: 0;
	}

	.hotel-detail .hotel-content .hotel-base {
		/* position: relative;
		top: -140rpx; */
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailbj.png) no-repeat #F3F3F3;
		background-size: 100% auto;
		padding: 39rpx 0 44rpx 0;
	}

	.location {
		display: flex;
		align-items: center;
	}

	.location .loc-left {
		width: 1px;
		flex: 1;
	}

	.location .loc-left .loc-name {
		font-size: 28rpx;
		font-weight: 800;
		color: #111111;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.location .loc-left .loc-remark {
		font-size: 22rpx;
		font-weight: 500;
		color: #6e6e6e;
		line-height: 34rpx;
	}

	.location .loc-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .head {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.hotel-detail .hotel-content .hotel-base .head .hotel-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #111111;
	}

	.hotel-detail .hotel-content .hotel-base .head .hotel-tag {
		font-size: 22rpx;
		font-weight: 500;
		color: #6e6e6e;
	}

	.hotel-Opening {
		font-weight: 500;
		font-size: 24rpx;
		color: #B99846;
		margin-right: 31rpx;
		margin-bottom: 20rpx;
		display: inline-block;
	}

	.hotel-tagText {
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #B99846;
		color: #B99846;
		text-align: center;
		margin-right: 8rpx;
		margin-bottom: 20rpx;
		height: 34rpx;
		line-height: 26rpx;
		padding: 0 12rpx;
		display: inline-block;
	}

	.hotel-detail .hotel-content .hotel-base .head .op-box image {
		width: 58rpx;
		height: 58rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei {
		padding: 34rpx 0;
		margin-bottom: 34rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-left {
		width: 1px;
		flex: 1;
		/* display: flex; */
		align-items: center;
		display: -webkit-box;
		overflow: auto;
		margin-right: 20rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item {
		padding: 7rpx 13rpx;
		background: #ecf1f4;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		margin-right: 10rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-title {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}

	.hotel-detail .media {
		height: 545rpx;
		position: relative;
		z-index: 1;
	}

	.hotel-detail .media .play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -49rpx;
		margin-left: -49rpx;
		width: 98rpx;
		height: 98rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hotel-detail .media .video-box {
		background-color: #111;
		height: 545rpx;
		position: relative;
	}

	.hotel-detail .media .type-box {
		width: 100px;
		height: 50rpx;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50rpx;
		left: 50%;
		bottom: 80px;
		margin-left: -50px;
	}

	.hotel-detail .media .media-info .type-img-box {
		background-color: rgba(255, 255, 255, 0.5);
		color: #fff;
		display: flex;
		align-items: center;
		height: 96rpx;
		width: 96rpx;
		padding: 8rpx;
		border-radius: 12rpx;
		position: relative;
	}

	.hotel-detail .media .media-info .type-img-box image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 12rpx;
		opacity: 0.5;
	}

	.hotel-detail .media .media-info .type-img-box .content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		justify-items: center;
	}

	.hotel-detail .media .media-info .type-img-box text {
		font-size: 22rpx;
		font-family: pingfang;
		margin-left: 6rpx;
	}

	.hotel-detail .media .media-info {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 50rpx;
	}

	.hotel-detail .media .media-info .mi-left {
		flex: 1;
	}

	.detail_ShareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.name-ali {
		/* #ifdef MP-ALIPAY */
		box-sizing: border-box;
		padding-left: 30rpx;
		/* #endif */
	}

	.hotel-Sub {
		width: 116rpx;
		height: 41rpx;
		display: inline-block;
		position: relative;
		top: 10rpx
	}

	.hotel-Sub.hotel-Sub3 {
		width: 85rpx;
	}

	.hotel-Sub.hotel-Sub4 {
		width: 101rpx;
	}

	.hotel-Economy {
		font-weight: 500;
		font-size: 30rpx;
		color: #757776;
		margin-right: 10rpx;
	}

	.hotel-brand {
		font-weight: 500;
		font-size: 32rpx;
		color: #080A09;
		padding: 12rpx 0 14rpx 0;
	}

	.hotelDetaMapBox {
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762604596133819.png');
		background-size: 689rpx 148rpx;
	}

	.hotelDetaMap {
		padding: 39rpx 36rpx;
	}

	.hotelDetaMapL view:first-child {
		font-weight: bold;
		font-size: 24rpx;
		color: #080A09;
	}

	.hotelDetaMapL view:last-child {
		font-weight: 500;
		font-size: 24rpx;
		color: #757776;
		margin-top: 15rpx;
	}

	.hotelMapIcon {
		padding: 0 0 0 51rpx;
		font-size: 24rpx;
	}

	.hotelMapIcon text {
		margin-top: 8rpx;
	}

	.hotelTimeBoxL {
		width: 1px;
		flex: 1;
		flex-wrap: nowrap;
		justify-content: space-between;
		border-right: 1rpx solid #E9E9E9;
	}

	.hotelTime text {
		font-weight: 500;
		font-size: 24rpx;
		color: #BCBCBC;
	}

	.hotelTime view {
		white-space: nowrap;
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
	}

	.hotelTimeTop {
		position: relative;
		top: -10rpx;
	}

	.hotelTimeEven {
		justify-content: end;
		align-items: end;
		margin-right: 20rpx;
	}

	.hotelTimeEven text {
		display: inline-block;
		white-space: nowrap;
		background: #E2AB4E;
		color: #fff;
		border-radius: 4rpx;
		padding: 0rpx 8rpx 3rpx 8rpx;
		font-size: 20rpx;
	}

	.hotelTimeBoxR {}

	.hotelTimeBoxRTitle {
		display: block;
		font-weight: 500;
		font-size: 24rpx;
		color: #BCBCBC;
		text-align: right;
		position: relative;
		top: -10rpx;
	}

	.hotelTimeBoxRText {
		padding-left: 20rpx;
	}

	.hotelTimeBoxRT {
		padding-right: 22rpx;
	}

	.hotelTimeBoxRT:last-child {
		padding-right: 0;
	}

	.hotelTimeBoxRT text {
		display: inline-block;
		white-space: nowrap;
		font-weight: 400;
		font-size: 24rpx;
		color: #757776;
	}

	.hotelTimeBoxRT view {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 13rpx;
	}

	/deep/ .u-dropdown {
		margin: 20rpx 0 10rpx 0;
	}

	/deep/ .u-flex {
		justify-content: center;
	}

	.hotelFacilitiesBox {
		padding: 0 30rpx;
	}

	.hotelFacilitiesTitleBox {
		border-bottom: 1rpx solid #E5E5E5;
		justify-content: space-between;
	}

	.hotelFacilitiesTitle {
		padding: 34rpx 25rpx 10rpx 25rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
	}

	.hotelFacilitiesTitle.active {
		color: #E2AB4E;
	}

	.hotelFacilitiesTb {
		justify-content: center;
		padding-top: 10rpx;
	}

	.hotelFacilitiesTb view {
		width: 35rpx;
		height: 3px;
		background: #fff;
		border-radius: 30px;
	}

	.hotelFacilitiesTitle.active .hotelFacilitiesTb view {
		background: #E2AB4E;
	}

	.hotelComprehensiveBox {
		padding: 0 30rpx;
	}

	.hotelComprehensiv {
		min-height: 50rpx;
		font-size: 28rpx;
		color: #080A09;
		justify-content: space-between;
		padding-bottom: 20rpx;
	}

	.hotelComprehensiv.active {
		color: #B99846;
		font-weight: bold;
	}

	.hotelComprehensiv img {
		width: 28rpx;
		height: 28rpx;
		display: block;
	}
</style>