<template>
	<view>
		<view style="padding: 0 31rpx;">
			<view class="hotelDetailBox activeTag" v-for="(item,index) in RoomList" :key="index">
				<view class="hotelDetailTag">
					{{item.RoomName_CN}}
				</view>
				<template v-for="(subItem,subindex) in item.RatePlanList">
					<view class="hotelDetail row" v-if="!subindex">
						<template v-if="item.images&&item.images.length>0">
							<view class="hotelDetailL" @click="openPicture(item.images)">
								<image mode="heightFix" :src="item.images[0].Url" />
								<view class="hotelDetailLImgs" v-if="item.images&&item.images.length>1">
									{{ item.images.length }}
								</view>
							</view>
						</template>
						<template v-else>
							<view class="hotelDetailL">
								<image mode="heightFix"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/defaultHotelImg.png" />
							</view>
						</template>
						<view class="hotelDetailR column">
							<view class="hotelDetailRTitle row items-center">
								<view>

								</view>
							</view>
							<view class="hotelDetailRRoom">
								{{ subItem.RoomName_CN }}
							</view>

							<view class="hotelDetailREat">
								{{getMealtype(subItem.PriceList[0].MealType)}}
								{{subItem.PriceList[0].MealAmount>0?('×'+subItem.PriceList[0].MealAmount+'份'):''}}
								<template
									v-if="subItem.RatePlanCancellationPolicyList && subItem.RatePlanCancellationPolicyList != null">
									<text
										v-if="getIsCancella(subItem.RatePlanCancellationPolicyList,subItem.TotalPrice)==1">限时取消</text>
									<text v-else>付费取消</text>
								</template>
								<text v-else>不可退改</text>
							</view>
							<view class="hotelDetailRConfirmTag" style="height: 1px;flex: 1;">
								<text>立即确认</text>
							</view>
							<view class="hotelDetailRPriceBox row">
								<view style="width:1px;flex: 1;">
								</view>
								<view class="row">
									<view class="column">
										<view class="hotelDetailRPrice">
											{{subItem.Currency }}
											<text v-if="subItem&&subItem.PriceList&&subItem.PriceList.length>0">
												{{subItem.PriceList[0].Price}}
											</text>起/晚/间
										</view>
										<view class="hotelDetailRPriceT">{{dayObj.day}}晚总价
											<text>
												{{subItem.Currency}}{{ (subItem.TotalPrice).toFixed(2) }}起
											</text>
										</view>
									</view>
									<view class="column hotelDetailRPriceBook">
										<view class="hotelDetailMinXiRB" @click="setOrder(subItem)">
											订
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>

				<view class="hotelDetailMXBox" v-if="item.RatePlanList.length>1">
					<view class="hotelDetailMXB" @click="clickShow(item)">
						查看{{item.RatePlanList.length-1}}个价格详细
						<u-icon class="hotelDetailDown" name="arrow-down"></u-icon>
					</view>
					<view class="hotelDetailMinXiBox" v-if="item.show">
						<template v-for="(subItem,subindex) in item.RatePlanList">
							<view class="hotelDetailMinXi" v-if="subindex">
								<view class="hotelDetailMinXiTitle"
									:class="[getMealtype(subItem.PriceList[0].MealType)=='含早餐'?'active':'']">
									{{getMealtype(subItem.PriceList[0].MealType)}}
									{{subItem.PriceList[0].MealAmount>0?('×'+subItem.PriceList[0].MealAmount+'份'):''}}
								</view>
								<view class="row">
									<view class="hotelDetailMinXiL">
										<view class="hotelDetailMinXiLT">
											<template
												v-if="subItem.RatePlanCancellationPolicyList && subItem.RatePlanCancellationPolicyList != null">
												<text
													v-if="getIsCancella(subItem.RatePlanCancellationPolicyList,subItem.TotalPrice)==1">限时取消</text>
												<text v-else>付费取消</text>
											</template>
											<text v-else>不可退改</text>
										</view>
										<view class="hotelDetailMinXiLC">
											<text>立即确认</text>
										</view>
									</view>
									<view class="hotelDetailMinXiR row">
										<view class="column">
											<view class="hotelDetailMinXiRF"> </view>
											<view class="hotelDetailMinXiRP">
												{{subItem.Currency }}
												<text v-if="subItem&&subItem.PriceList&&subItem.PriceList.length>0">
													{{subItem.PriceList[0].Price}}
												</text>起/晚/间
											</view>
											<view class="hotelDetailMinXiRT">{{dayObj.day}}晚总价
												<text>
													{{subItem.Currency}}{{ (subItem.TotalPrice).toFixed(2) }}起
												</text>
											</view>
										</view>
										<!--:class="[!subindex?'active':'']"-->
										<view class="column hotelDetailMinXiRBBox">
											<!--<text v-if="!subindex" class="hotelDetailMinXiRS">剩2间</text>-->
											<view class="hotelDetailMinXiRB" @click="setOrder(subItem)">
												订
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- #ifdef MP-AG -->
				<view class="line-flex row-sbas-n col" style="padding: 30rpx; background: #fff;margin-top: 20rpx;border-radius: 18rpx;"
					v-if="createBy==0&&SaleList&&SaleList.length>1"
						@click="showSalePreviwe=true,showSaleType=1">
						<text style="font-size: 28rpx; color: #111; font-weight: 500">服务人员</text>
						<text style="
						font-size: 22rpx;
						color: #999;
						margin-left: 30rpx;
						flex: 1;
						"></text>
						<view class="SaleNameTetx row">
							<view>
								<text v-if="msg.SaleName">{{ msg.SaleName }}</text>
								<text v-else style="color: #999">
									请选择
								</text>
							</view>
							<u-icon name="arrow-down" size="24"></u-icon>
						</view>
				</view>
			<!-- #endif -->
		</view>
		<u-popup v-model="showSalePreviwe" mode="bottom" border-radius="50" length="60%" :safe-area-inset-bottom="true">
			<orderService :msg="msg" :list="SaleList" @goReserce="goReserce"></orderService>
		</u-popup>
	</view>
</template>

<script>
	import orderService from "@/components/serviceStaff/orderService";
	export default {
		props: ['roomMsg', 'dataList', 'search', 'rooms', 'qRoomType', 'qMealType', 'createById'],
		components: {
			orderService,
		},
		data() {
			return {
				optionsTitle: ["房型", "床型", "餐食"],
				searchObj: {},
				RoomList: [],
				parameters: {},
				dayObj: {},
				HotelInfo: {},
				HotelMealTypes: [],
				HotelRoomTypes: [],
				hotelMsg: {
					hotelId: 0,
					hotelImageSize: 5,
					photoGalleryGetFlg: 1,
					groupBookingFlg: 1,
				},
				qRoomTypeList: [],
				qMealTypeList: [],
				b2bUser: null,
				SaleList: [],
				msg: {
					SaleName: '',
					SaleId: 0,
				},
				createBy: 0,
				showSalePreviwe: false,
				subItem: null,
				showSaleType: 0,
			};
		},
		watch: {
			qRoomType: {
				handler(val, oldval) {
					if (val) {
						this.qRoomTypeList = val
					}
				},
				deep: true,
			},
			qMealType: {
				handler(val, oldval) {
					if (val) {
						this.qMealTypeList = val
					}
				},
				deep: true,
			},
			dataList: {
				handler(val, oldval) {
					if (val) {
						this.HotelInfo = val
					}
				},
				deep: true,
			},
			rooms: {
				handler(val, oldval) {
					if (val) {
						this.RoomList = val
						uni.getStorage({
							key: "Time",
							success: (res) => {
								let obj = JSON.parse(res.data);
								this.dayObj = obj
							},
						});
					}
				},
				deep: true,
			},
			search: {
				handler(val, oldval) {
					if (val) {
						this.searchObj = val
					}
				},
				deep: true,
			},
			roomMsg: {
				handler(val, oldval) {
					if (val) {
						this.hotelMsg.hotelId = val.hotelid
						this.getdidaMealType()
						this.getdidaBedType()
					}
				},
				deep: true,
				immediate: false,
			},
			createById: {
				handler(val, oldval) {
					if (val) {
						this.createBy = val
					}
				},
				deep: false,
				immediate: false,
			},
		},
		created() {
			this.b2bUser = uni.getStorageSync("b2b_user");
			// #ifdef MP-AG
			this.getSale()
			// #endif
		},
		mounted() {
			uni.getStorage({
				key: "Time",
				success: (res) => {
					let obj = JSON.parse(res.data);
					this.dayObj = obj
				},
			});
		},
		methods: {
			goReserce(item) {
				this.msg.SaleName = item.SaleName
				this.msg.SaleId = item.SaleId
				setTimeout(() => {
					this.showSalePreviwe = false
				}, 500)
				if(!this.showSaleType) this.goUrl()
			},
			getSale() {
				if (!this.b2bUser.customerId) return
				this.apipost(
					"b2b_get_GetCustomerCreateByList", {
						CustomerId: this.b2bUser.customerId
					},
					(res) => {
						if (res.resultCode == 1) {
							if (res.data.length > 0) {
								this.SaleList = res.data
								if (res.data.length == 1 && this.createBy == 0) {
									this.msg.SaleName = res.data[0].EmName
									this.msg.SaleId = res.data[0].CreateBy
								}
							} else {
								this.msg.SaleName = ''
								this.msg.SaleId = 0
							}
						} else {

						}
					},
					(err) => {

					}
				);
			},
			clickShow(item) {
				item.show = !item.show
				this.$forceUpdate()
			},
			//日期格式化
			getIsCancella(RatePlanCancellationPolicyList, TotalPrice) {
				let IsCancel = 0; //不可取消
				let date2 = new Date(); //当前时间
				RatePlanCancellationPolicyList.forEach((item, index) => {
					var dt = new Date(item.FromDate); //取消时间
					if (IsCancel == 0) {
						if (dt > date2) {
							if (item.Amount == TotalPrice) {
								IsCancel = 1;
							} else {
								IsCancel = 2;
							}
						} else {
							if (item.Amount != TotalPrice) {
								IsCancel = 2;
							}
						}
					}
				});
				return IsCancel;
			},
			getPrice(price) {
				return Math.ceil(price);
			},
			//日期格式化
			getformatDateStr(value) {
				var dt = new Date(value);
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2, "0");
				let date = (dt.getDate()).toString().padStart(2, "0");
				let hours = (dt.getHours()).toString().padStart(2, "0");
				let minutes = (dt.getMinutes()).toString().padStart(2, "0");
				let seconds = (dt.getSeconds()).toString().padStart(2, "0");
				return year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
			},
			//获取道旅床类型列表
			getdidaBedType() {
				this.apipost('dmc_post_GetDidaBedTypeBaseInfo', this.hotelMsg, res => {
					if (res.resultCode == 1) {
						this.HotelRoomTypes = res.data;
					}
				}, null)
			},
			//获取道旅餐食类型
			getdidaMealType() {
				this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res => {
					if (res.resultCode == 1) {
						this.HotelMealTypes = res.data;
					}
				}, null)
			},
			//获取房型
			getRoomType(roomtypeId) {
				let roomtypeName = "";
				if (roomtypeId > 0) {
					this.HotelRoomTypes.forEach((item) => {
						if (item.ID == roomtypeId) {
							roomtypeName = item.Name_CN;
						}
					});
				}
				return roomtypeName;
			},
			//获取餐型
			getMealtype(mealtypeId) {
				let mealtypeName = "";
				if (mealtypeId > 0) {
					this.HotelMealTypes.forEach((item) => {
						if (item.ID == mealtypeId) {
							mealtypeName = item.Name_CN;
						}
					});
				}
				return mealtypeName;
			},
			setOrder(subItem) {
				this.showSaleType = 0
				this.subItem = subItem
				// #ifdef MP-AG
				if (this.SaleList && this.SaleList.length > 1 && this.msg.SaleId == 0 && this.createBy == 0) {
					// uni.showToast({
					// 		title: "请选择服务人员",
					// 		icon: "none",
					// });
					this.showSalePreviwe = true;
					return;
				}
				// #endif
				this.goUrl()
			},
			goUrl() {
				let subItem = this.subItem
				let createBy = 0
				// #ifdef MP-DI
				let employeeId = this.b2bUser.salesBaseInfo && this.b2bUser.salesBaseInfo.employeeId ? this.b2bUser
					.salesBaseInfo.employeeId : 0
				createBy = this.createBy > 0 ? this.createBy : employeeId
				// #endif
				// #ifdef MP-AG
				if (this.createBy > 0 || this.msg.SaleId) createBy = this.createBy > 0 ? this.createBy : this.msg.SaleId
				// #endif
				let pHotel = {
					hotelid: this.HotelInfo.hotelid,
					name: this.HotelInfo.name,
					images: [],
					address: "",
					destination: "",
					country: "",
				}
				if (this.HotelInfo) {
					if (this.HotelInfo.images && this.HotelInfo.images.length > 0) {
						pHotel.images.push({
							Path: this.HotelInfo.images[0].url
						});
					}
					if (this.HotelInfo.location) {
						if (this.HotelInfo.location.address) {
							pHotel.address = encodeURIComponent(this.HotelInfo.location.address);
						}
						if (this.HotelInfo.location.country && this.HotelInfo.location.country.name) {
							pHotel.country = this.HotelInfo.location.country.name;
						}
						if (this.HotelInfo.location.destination && this.HotelInfo.location.destination.name) {
							pHotel.destination = this.HotelInfo.location.destination.name;
						}
					}
				}
				uni.navigateTo({
					url: `/pages/hotel/order?searchObj=${JSON.stringify(this.searchObj)}&HotelInfo=${JSON.stringify(pHotel)}&RoomInfo=${JSON.stringify(subItem)}&CreateBy=${createBy}`,
				});
			},
			openPicture(item) {
				let imgObj = JSON.stringify(item);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj,
				});
			},


		},
	};
</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 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

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

	.hotelComprehensiveBox {
		padding: 0 30rpx;
	}

	.hotelComprehensiv {
		height: 78rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: #080A09;
		justify-content: space-between;
	}

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

	.hotelComprehensiv img {
		width: 28rpx;
		height: 28rpx;
		display: block;
	}

	.hotelDetailBox {
		overflow: hidden;
		position: relative;
		border-radius: 15rpx;
		background: #FFFFFF;
		overflow: hidden;
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
		margin-bottom: 31rpx;
	}

	.hotelDetailTag {
		position: absolute;
		left: -4px;
		top: 0px;
		min-width: 172rpx;
		max-width: 174rpx;
		height: 42rpx;
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailtag.png) no-repeat;
		background-size: 100% 42rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #82610F;
		text-align: center;
		line-height: 42rpx;
		padding: 0 19rpx 0 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.hotelDetail {
		padding: 39rpx 25rpx 34rpx 25rpx;
	}

	.hotelDetailBox.activeTag .hotelDetail {
		padding: 65rpx 25rpx 33rpx 25rpx;
	}

	.hotelDetailBox.active {
		border: 2px solid #E6D19B;
	}

	.hotelDetailL {
		width: 174rpx;
		height: 257rpx;
		position: relative;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
	}

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

	.hotelDetailLImgs {
		background: rgba(23, 23, 23, .4);
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 8rpx 14rpx;
		z-index: 2;
	}

	.hotelDetailR {
		width: 1px;
		flex: 1;
		height: 257rpx;
		padding-left: 20rpx;
		position: relative;
		top: -10rpx;
	}

	.hotelDetailRTitle {
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
	}

	.hotelDetailRTitle view {
		width: 1px;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.hotelDetailRTitle img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 15rpx;
	}

	.hotelDetailRRoom {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding: 8rpx 0 10rpx 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hotelDetailRCheckin {
		font-weight: 500;
		font-size: 22rpx;
		color: #080A09;
	}

	.hotelDetailREat {
		font-weight: 500;
		font-size: 22rpx;
		color: #080A09;
		padding: 5rpx 0 9rpx 0;
	}

	.hotelDetailREat text {
		font-weight: 500;
		font-size: 22rpx;
		color: #B99846;
		margin-left: 13rpx;
	}

	.hotelDetailRConfirmTag text {
		display: inline-block;
		padding: 0 10rpx;
		background: #F1F4F6;
		border-radius: 4rpx;
		border: 1px solid #BCBCBC;
		font-weight: 500;
		font-size: 20rpx;
		color: #757776;
	}

	.hotelDetailRPriceBox {
		height: 1px;
		flex: 1;
		position: relative;
		top: -15rpx;
	}

	.hotelDetailRPrice {
		font-size: 20rpx;
		color: #FF3166;
		text-align: right;
	}

	.hotelDetailRPrice text {
		font-size: 34rpx;
		font-weight: 800;
		margin-left: 10rpx;
	}

	.hotelDetailRPriceT {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}

	.hotelDetailRPriceT text {
		margin-left: 10rpx;
	}

	.hotelDetailRPriceBook {
		margin-left: 16rpx;
	}

	.hotelDetailMXBox {
		border-top: 1rpx solid #F0F0F0;
	}

	.hotelDetailMXB {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding: 25rpx 0 26rpx 0;
		text-align: center;
	}

	.hotelDetailDown {
		display: inline-block;
		margin-left: 13rpx;
		position: relative;
		top: 5rpx;
	}

	.hotelDetailMinXiBox {
		background: #FAFAFA;
		padding: 30rpx 26rpx 45rpx 26rpx;
	}

	.hotelDetailMinXi {
		margin-bottom: 40rpx;
	}

	.hotelDetailMinXi:last-child {
		margin-bottom: 0;
	}

	.hotelDetailMinXiTitle {
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
	}

	.hotelDetailMinXiTitle.active {
		color: #B99846;
	}

	.hotelDetailMinXiL {
		width: 1px;
		flex: 1;
	}

	.hotelDetailMinXiLT {
		font-weight: 500;
		font-size: 22rpx;
		color: #B99846;
		padding: 17rpx 0 10rpx 0;
	}

	.hotelDetailMinXiLC text {
		display: inline-block;
		padding: 0 10rpx;
		background: #F1F4F6;
		border-radius: 4rpx;
		border: 1px solid #BCBCBC;
		font-weight: 500;
		font-size: 20rpx;
		color: #757776;
	}

	.hotelDetailMinXiR {
		height: 90rpx;
	}

	.hotelDetailMinXiRP {
		font-size: 20rpx;
		color: #FF3166;
		text-align: right;
	}

	.hotelDetailMinXiRP text {
		font-weight: 800;
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.hotelDetailMinXiRT {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}

	.hotelDetailMinXiRT text {
		margin-left: 10rpx;
	}

	.hotelDetailMinXiRS {
		display: inline-block;
		text-align: center;
		font-weight: 500;
		font-size: 18rpx;
		color: #111111;
		margin-bottom: 8rpx;
	}

	.hotelDetailMinXiRB {
		width: 74rpx;
		height: 81rpx;
		background: #080A09;
		border-radius: 14rpx;
		border: 2px solid #111111;
		font-weight: 800;
		font-size: 32rpx;
		color: #E2C27A;
		line-height: 81rpx;
		text-align: center;
	}

	.hotelDetailRPriceBook.active {
		position: relative;
		top: -45rpx;
	}

	.hotelDetailMinXiRBBox {
		margin-left: 16rpx;
	}

	.hotelDetailMinXiRBBox.active {
		position: relative;
		top: -20rpx;
	}

	.hotelDetailMinXiRF {
		height: 1px;
		flex: 1;
	}
</style>