<template>
	<view class="hotel-detail f-order" v-if="orderData">
		<scroll-view ref="scrollView" scroll-y="true" style="height: 1px;flex: 1;box-sizing: border-box;"
			@scroll="scroll">
			<view class="media" :style="{ opacity: 100 - boxOption + '%' }">

				<!-- #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" style="margin-top: 22rpx"></u-icon>
				</view> -->
				<!-- #endif -->
				<view class="orderStatusBox column" style="margin-bottom: 30rpx;justify-content: space-between">
					<view class="row-sbas-n">
						<view class="row items-center">
							<u-icon customPrefix="iconfont" name="icondaizhifu-" size="52" color="#DFBE6E"
							v-if="orderStatus.code == 0"></u-icon>
							<u-icon customPrefix="iconfont" name="iconquxiao" size="52" color="#f26c6c"
								v-if="orderStatus.code == -1"></u-icon>
							<u-icon customPrefix="iconfont" name="iconshenhezhong" size="52" color="#86d9a5"
								v-if="orderStatus.code == -2"></u-icon>
							<u-icon customPrefix="iconfont" name="iconzhengchang" size="52" color="#111"
								v-if="orderStatus.code == 1"></u-icon>
							<text style="
								margin-left: 26rpx;
								font-size: 40rpx;
								font-weight: 600;
								color: #111;
								">
								{{ orderStatus.text }}
							</text>
						</view>
						<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds" 
						@change="changeSeconds"
						v-if="orderData.directOrder.OrderStatus==1" color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
					</view>
					<view class="timecontent q-mt-sm">
						<view v-if="orderData.directOrder.OrderStatus&&orderData.directOrder.OrderStatus==1">
							<view class="row">
								<text>请您于{{dielineTime}}前支付：¥</text>
								<text class="bold">{{ DanWei }}{{(orderData.model.TotalPrice-orderData.model.DiscountMoney).toFixed(2)}}</text>
							</view>
							<view class="small">
								完成支付才能锁定酒店</view>
						</view>
						<view class="small" v-else-if="orderData.directOrder.OrderStatus==2||(orderData.directOrder.OrderStatus&&orderData.directOrder.OrderStatus==4)">
							取消原因：用户超时未付款，自动取消
						</view>
						<view class="small" v-else>
							感谢您的预定，服务专员将会持续为您提供服务
						</view>
					</view>
				</view>
				
				<view class="orderIforRzBox row">
					<view class="orderIforRzImg">
						<img style="width: 14rpx;height: 68rpx;"
							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766174213789755.png" />
					</view>
					<view class="orderIforRzTime column col">
						<view>入住：
							<text>{{getDate(orderData.parmResultRoomInfo.CheckInDate)}}&nbsp;{{ getWeek(orderData.parmResultRoomInfo.CheckInDate) }}&nbsp;14:00后</text>
						</view>
						<view style="margin-top: 28rpx;">离店：
							<text>{{getDate(orderData.parmResultRoomInfo.CheckOutDate)}}&nbsp;{{ getWeek(orderData.parmResultRoomInfo.CheckOutDate) }}&nbsp;12:00前</text>
						</view>
					</view>
					<view class="orderIforRzNum">
						{{getDay(orderData.parmResultRoomInfo.CheckInDate.slice(0, 10),orderData.parmResultRoomInfo.CheckOutDate.slice(0, 10))}}晚
					</view>
				</view>
				<view class="orderIforDiZhi">
					<view class="orderIforDiZhiL">{{ orderData.parmResultRoomInfo.HotelName }}</view>
					<view class="orderIforDiZhiR row">
						<view class="orderIforDiZhiRImg">
							<img style="width: 23rpx;height:28rpx;"
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766148323678002.png" />
						</view>
						<view class="orderIforDiZhiRText">
							{{orderData.Address}}
						</view>
					</view>
				</view>
			</view>
			<view class="hotel-title" :style="[titleStyle]" v-if="false">
				<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">
					{{ orderData.parmResultRoomInfo.HotelName }}
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="ReservationInforTitle">订单信息</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">订单编号</view>
					<view class="ResInforR">
						<text>
							{{ orderData.model.OrderID }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">创建日期</view>
					<view class="ResInforR">
						<text>
							{{ orderData.directOrder.CreateTime }}
						</text>
					</view>
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="ReservationInforTitle">预定信息</view>
				<view class="ResInforText row-sb-n"
					v-if="orderData.model&&orderData.model.ThirdOrderNo!=''&&orderData.model.OrderStatus==5">
					<view class="ResInforL">订单号</view>
					<view class="ResInforR" style="color: #ff3166;">
						{{orderData.model.ThirdOrderNo}}
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">房型</view>
					<view class="ResInforR">
						<text v-for="(items,i) in RatePlanList" :key="i">
							{{ items.RoomName_CN }}
							<template v-if="i!=RatePlanList.length-1">,</template>
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">餐型</view>
					<view class="ResInforR active">
						<view v-if="RatePlanList && RatePlanList.length > 0">
							<template v-for="( itemp, indexp ) in RatePlanList[0].PriceList">
								<template v-if="!indexp">
									{{getMealtype(itemp.MealType)}}
									<template v-if="itemp.MealAmount>0">
										×{{itemp.MealAmount}}份
									</template>
								</template>
							</template>
						</view>
					</view>
				</view>
				<view class="ResInforText row">
					<view class="ResInforL">取消政策</view>
					<view class="ResInforR">
						<text v-if="roomRateDetails&&
                    roomRateDetails.CancellationPolicyList &&
                    roomRateDetails.CancellationPolicyList.length > 0" style="color: #ff3166;">
							<template v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
								<template
									v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免费取消,</template>
								<template v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
									<template>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消将收取订单全额费用;</template>
								</template>
								<template v-else>
									<template>{{ getformatDateStr(itemCancella.FromDate) }}
										<template v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">-{{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }}之间</template>
										取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</template>
								</template>
							</template>
						</text>
						<view style="color: #ff3166;">退款金额请以实际为准</view>
					</view>
				</view>
				<view class="ResInforText row-sb-n"
					v-if="orderData&&orderData.model&&orderData.model.ThirdOrderStatus==3">
					<view class="ResInforL">退款信息</view>
					<view class="ResInforR">
						<text style="color: #ff3166;">
							取消手续费{{orderData.model.CancelFee}}元，实际退款金额{{orderData.model.CancelPrice}}元.
						</text>
					</view>
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="ReservationInforTitle">订房信息</view>
				<view class="ResInforText row-sb-n" v-for="(item,index) in orderData.parmResultRoomInfo.GuestList"
					:key="index">
					<view class="ResInforL Lwidth">房间{{ index+1 }}住客</view>
					<view class="ResInforR row">
						<view v-for="(items,i) in item.GuestInfo" :key="i">{{ items.LastName }}{{ items.FirstName }}
							<template v-if="i!=item.GuestInfo.length-1">,</template>
						</view>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">联系姓名</view>
					<view class="ResInforR">
						{{ orderData.parmResultRoomInfo.guestLastName }}{{ orderData.parmResultRoomInfo.guestFirstName }}
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">联系电话</view>
					<view class="ResInforR">{{ orderData.parmResultRoomInfo.guestPhoneNumber }}</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">E-mail</view>
					<view class="ResInforR">{{ orderData.parmResultRoomInfo.guestEmail }}</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">备注</view>
					<view class="ResInforR">
						<view style="width: 100%;overflow: hidden;">
							{{ orderData.model.Remark }}
						</view>
					</view>
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="big-title">
					<text>费用明细</text>
				</view>
				<view class="jz_form">
					<view class="form-items row">
						<view class="label"> 总金额 </view>
						<view class="val f14 regular col" style="text-align: right">
							{{ roomNum }}
							<text>间房</text>/
							{{ peopleNum }}
							<text style="margin-right: 30rpx">人</text>
							<text class="red">{{DanWei}} {{ orderData.model.TotalPrice }}
							</text>
						</view>
					</view>
					<view class="form-items" style="border-bottom: none;padding: 20rpx 0;">
						<view class="label"> 明细 </view>
					</view>
					<view v-if="RatePlanList&&RatePlanList.length>0" class="flex f12 grey" style="margin-bottom: 40rpx"
						v-for="(item,index) in RatePlanList" :key="index">
						<view style="flex: 1">
							<text style="margin-right: 30rpx">房间数 {{index+1}}</text>
						</view>
						<view style="text-align: right">
							{{ DanWei }}{{ item.TotalPrice }}
						</view>
					</view>

					<view class="flex f12 grey" style="margin-bottom: 40rpx" :style="{'color':mainColor+' !important'}"
						v-if="orderData.model.DiscountMoney&&orderData.model.DiscountMoney>0">
						<view style="flex: 1">
							<text style="margin-right: 30rpx">优惠金额</text>
						</view>
						<view style="text-align: right">
							-{{ orderData.model.DiscountMoney}} </view>
					</view>
					<view class="flex f12 grey" style="margin-bottom: 40rpx" :key="index">
						<view style="flex: 1">
							<text style="margin-right: 30rpx">合计应收</text>
						</view>
						<view style="text-align: right;color: #ff3166;font-size:32rpx;font-weight: bold;">
							{{ DanWei }}
							{{(orderData.model.TotalPrice-orderData.model.DiscountMoney).toFixed(2)}}
						</view>
					</view>
				</view>
			</view>

			<view style="height: 1rpx;"></view>
		</scroll-view>

		<view class="jz_orderbox flex" v-if="(orderData.model.OrderStatus==1||orderData.model.OrderStatus==5)
		||(orderData.model.OrderStatus==1&&!isExpired)">
			<view style="display: flex">
				<button v-if="orderData.model.OrderStatus==1||orderData.model.OrderStatus==5" class="jz_OrderReNow"
					@click="cancelHotelOrder" style="background: #fff; color: #111; border: 1px solid #111"
					:disabled="submitCancel" :loading="submitCancel">
					取消
				</button>
				<button v-if="orderData.model.OrderStatus==1&&!isExpired" class="jz_OrderReNow" style="margin-left: 20rpx;"
					@click="payHotelOrder" :disabled="submit" :loading="submit">
					立即支付
				</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import cancelProgress from '@/components/cancelPrompt/cancelProgress.vue'
	export default {
		components: {
			cancelProgress
		},
		data() {
			return {
				id: 0,
				boxOption: 0,
				titleStyle: {
					opacity: 0,
				},
				mainColor: "",
				Up: 0,
				current: 1,
				scrollTop: 100,
				old: {
					scrollTop: 0
				},
				orderStatus: {
					text: "待支付",
					code: 0,
				},
				btnStyle: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#111",
					color: "#FFF",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				orderData: null,
				submitCancel: false,
				submit: false,
				hotelData: null,
				roomRateDetails: null,
				DanWei: '',
				peopleNum: 0,
				roomNum: 0,
				RatePlanList: null,
				HotelMealTypes: [],
				customer: {},
				orderTime: null,
				remainingSeconds: null, // 5分钟倒计时（秒）
				isExpired: false,
				countdownInterval: null,
				currentTime: Date.now(),
				endts:0,
				dielineTime: '',
			};
		},
		computed: {
			formattedTime() {
				const minutes = Math.floor(this.remainingSeconds / 60)
				const seconds = this.remainingSeconds % 60
				return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
			}
		},
		beforeDestroy() {
			
		},
		onHide() {
			
		},
		created() {
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
		},
		onLoad(options) {
			this.id = options.orderId;
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0",
					};
				},
			});
			this.customer = uni.getStorageSync("b2b_user")
			this.mainColor = this.$uiConfig.mainColor;
			if (this.id) this.getOrderDetail(this.id);
			this.getdidaMealType()
		},
		methods: {
			changeSeconds(seconds) {	
				if(seconds<=0) {
					let cancelMsg = {
						OrderNo: this.orderData.directOrder.OrderNo,
						ErpOrderId: this.orderData.model.OrderID,
						OrderTypeStr: "Hotel", //订单类型为酒店
						ConfirmID: "",
						Amount: 0,
					};
					this.cancelOrder(cancelMsg,1)
				}
			},
			payHotelOrder() {
				let userInfo = uni.getStorageSync("mall_UserInfo");
				var payMsg = {
					OrderNo: this.orderData.directOrder.OrderNo,
					OpenId: userInfo.OpenId,
					MallBaseId: userInfo.MallBaseId,
				};
				this.submit = true
				this.apipost("GetCodeByOrderNo_post", payMsg, (res) => {
					this.submit = false;
					if (res.resultCode == 1) {
						this.orderInfo = JSON.parse(res.data.sPayInfo)
						this.goPayHandler(res.data);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000
						})
					}
				}, fail => {
					this.submit = false;
				});
			},
			goPayHandler(item) {
				let OrderNo = item.OrderNo;
				let that = this;
				uni.requestPayment({
					provider: "wxpay",
					timeStamp: this.orderInfo.timeStamp,
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.sign,
					success: function(res) {
						that.submit = false;
						uni.showToast({
							title: "支付成功",
						});
						setTimeout(() => {
							that.getOrderDetail(that.id)
						}, 100);
					},
					fail: function(err) {
						that.submit = false;
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
					},
				});
			},
			cancelHotelOrder() {
				var that = this;
				if (this.submitCancel) return
				let cancelMsg = {
					OrderNo: this.orderData.directOrder.OrderNo,
					ErpOrderId: this.orderData.model.OrderID,
					OrderTypeStr: "Hotel", //订单类型为酒店
					ConfirmID: "",
					Amount: 0,
				};
				wx.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: (tip) => {
						if (tip.confirm) {
							that.submitCancel = true
							//待付款-直接取消
							if (that.orderData.model.OrderStatus == 1) {
								that.cancelOrder(cancelMsg)
							}
							//已付款，可能会有取消费用
							else if (that.orderData.model.OrderStatus == 5) {
								var didaMsg = {
									BookingID: that.orderData.model.ThirdOrderNo
								}
								that.apipost("dmc_post_GetDiDaBookingCancel", didaMsg, (res) => {
										if (res.resultCode == 1) {
											var tempData = res.data;
											if (tempData) {
												cancelMsg.ConfirmID = tempData.ConfirmID;
												cancelMsg.Amount = tempData.Amount;
												//有取消费用
												if (tempData.Amount && tempData.Amount > 0) {
													var tipmsg = `取消订单将收取【 ${tempData.Amount} 元】手续费，是否确认取消订单?`
													wx.showModal({
														title: '提示',
														content: tipmsg,
														success: (tip) => {
															if (tip.confirm) {
																that.submitCancel = true;
																that.cancelOrder(cancelMsg);
															}else that.submitCancel = false
														}
													})
												}
												//无取消费用
												else {
													that.cancelOrder(cancelMsg);
												}
											}
										}
									},
									(err) => {
										uni.showToast({
											title: err.message,
											icon: "none",
										});
										that.submitCancel = false
									})
							}
						}
					}
				})
			},
			cancelOrder(postMsg,type) {
				this.apipost(
					"post_CancelThirdHotelOrder", postMsg,
					(res) => {
						if (res.resultCode == 1) {
							uni.showToast({
								title: "操作成功",
								icon: "success",
							});
							if(type) this.orderData.directOrder.OrderStatus = 4;
							this.getOrderDetail(this.id)
						}
					},
					(err) => {
						uni.showToast({
							title: err.message,
							icon: "none",
						});
						this.submitCancel = false
					}
				);
			},
			formatStatus(directOrder) {
				var status = directOrder.OrderStatus;
				console.log("formatStatus", status)
				if (status == 1) {
					this.orderStatus.code = 0;
					this.orderStatus.text = "待付款";
				} else if (status == 2) {
					this.orderStatus.code = 1;
					this.orderStatus.text = directOrder.ThirdOrderExtStatusStr;
				} else if (status == 3) {
					this.orderStatus.code = 0;
					this.orderStatus.text = "已完成";
				} else if (status == 4) {
					this.orderStatus.code = -1;
					this.orderStatus.text = "已取消";
				} else if (status == 5) {
					this.orderStatus.code = 0;
					this.orderStatus.text = "售后";
				}
			},
			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();
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			//获取酒店详情
			getOrderDetail(id) {
				uni.showLoading({
					title: "加载中",
				});
				let msg = {
					orderId: id,
				};
				this.apipost("dmc_post_Get_GetJAPAN_OrderDetail", msg,
					(res) => {
						if (res.resultCode == 1) {
							uni.hideLoading();
							var tempData = res.data
							this.orderData = tempData;

							this.orderData.directOrder.CreateTime = this.$utils.formatDates(new Date(tempData.directOrder.CreateTime), 'yyyy-MM-dd hh:mm:ss')
							// 支付倒计时
							if (this.orderData.directOrder.CreateTime&&tempData.directOrder.OrderStatus==1) {
								const now = Date.now();
								// const customStr = '2025-05-12 14:33:47'
								const customStr = this.orderData.directOrder.CreateTime
								const [date, time] = customStr.split(' ')
								const [year, month, day] = date.split('-')
								const [hours, minutes, seconds] = time.split(':')
								const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
								this.orderTime = parsedDate.getTime()

								const diff = this.orderTime + 5 * 60 * 1000 - now; // 5分钟倒计时
								let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
								this.remainingSeconds = Math.floor(remainingSeconds/1000)

								let endTime = new Date(this.orderData.directOrder.CreateTime)
								endTime.setMinutes(endTime.getMinutes() + 5)
								this.endts = this.remainingSeconds
								
								if(this.endts<=0){
									this.changeSeconds(this.remainingSeconds)
								}
								this.dielineTime = `${endTime.getHours()}时${endTime.getMinutes()}分`
							}
							

							if (tempData.parmResult && tempData.parmResult.Success) {
								this.RatePlanList = tempData.parmResult.Success.BookingDetails.Hotel.RatePlanList
								this.DanWei = tempData.parmResult.Success.BookingDetails.Hotel.RatePlanList[0].Currency
								this.roomRateDetails = tempData.parmResult.Success.BookingDetails.Hotel
							} else {
								this.initBookHotel()
							}
							res.data.parmResultRoomInfo.GuestList.forEach((item, index) => {
								this.roomNum++
								item.GuestInfo.forEach((items, i) => {
									this.peopleNum++
								})
							})
							this.formatStatus(res.data.directOrder);
						}
					}, err => {
						uni.hideLoading();
					}
				);
			},
			//未付款是初始化预定房型，餐型等，
			initBookHotel() {
				var cMsg = {
					"sort": 1,
					"displayFrom": 1,
					"CheckInDate": this.orderData.parmResultRoomInfo.CheckInDate,
					"CheckOutDate": this.orderData.parmResultRoomInfo.CheckOutDate,
					"searchroomGroup": [],
					"ratePlanID": this.orderData.parmResultRoomInfo.RatePlanID,
					"imgUrl": "",
					"RoomCount": this.orderData.parmResultRoomInfo.RoomCount,
					"ChildCount": 0,
					"AdultCount": 0,
					"OccupancyDetails": [],
					"hotelId": this.orderData.parmResultRoomInfo.hotelId
				};
				if (this.orderData.parmResultRoomInfo.GuestList && this.orderData.parmResultRoomInfo.GuestList.length >
					0) {
					this.orderData.parmResultRoomInfo.GuestList.forEach(item => {
						var rObj = {
							"roomNum": item.RoomNum,
							"numberOfAdults": item.numberOfAdults,
							"numberOfChildren": item.numberOfChildren,
							"ChildAgeDetails": item.ChildAgeDetails,
							"ChildAgeTexts": []
						};
						if (item.GuestInfo && item.GuestInfo.length > 0) {
							item.GuestInfo.forEach(subItem => {
								if (subItem.IsAdult == 0) {
									rObj.ChildAgeTexts.push(subItem.Age);
								}
							})
						}
						cMsg.searchroomGroup.push(rObj)
					})
				}

				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.apipost(
					"dmc_post_GetDiDaPriceConfirm", cMsg,
					res => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							var tempData = res.data;
							if (tempData && tempData.PriceDetails && tempData.PriceDetails.HotelList && tempData
								.PriceDetails.HotelList.length > 0) {
								this.RatePlanList = tempData.PriceDetails.HotelList[0].RatePlanList;
								this.roomRateDetails = tempData.PriceDetails.HotelList[0];
							}
						}
					}, failed => {
						uni.hideLoading();
						console.log("failed", failed);
					});
			},
			//日期格式化
			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");
				return year + "-" + month + "-" + date;
			},
			//计算天数
			getDay(date1, date2) {
				//获得天数
				//date1：开始日期，date2结束日期
				var a1 = Date.parse(new Date(date1));
				var a2 = Date.parse(new Date(date2));
				var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
				return day;
			},
			getDate(date) {
				date = date.slice(0, 10);
				if (date) {
					let arr = date.split('-');
					return arr[1] + '月' + arr[2] + '日'
				}
			},
			getWeek(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				return "周" + week;
			},
			//获取道旅餐食类型
			getdidaMealType() {
				this.apipost('dmc_post_GetDidaMealType', {}, 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;
			},
		},
	};
</script>

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

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

	.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 {
		position: relative;
		z-index: 1;
		background: #fff;
		box-shadow: 0rpx 14rpx 40rpx 0rpx rgba(76, 76, 76, 0.06);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		overflow: hidden;
	}

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

	.orderIforDiZhi {
		padding: 27rpx 32rpx 41rpx 32rpx;
	}

	.orderIforDiZhiL {
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
		padding-bottom: 18rpx;
	}

	.orderIforDiZhiRImg {
		width: 23rpx;
		margin-right: 13rpx;
		position: relative;
		top: 5rpx;
	}

	.orderIforDiZhiRText {
		width: 1px;
		flex: 1;
		font-weight: 500;
		font-size: 28rpx;
		color: #1D1D20;
		line-height: 38rpx;
	}

	.ReservationInforBox {
		border-radius: 18rpx;
		background: #fff;
		margin: 28rpx 31rpx 28rpx 31rpx;
		padding: 37rpx 18rpx 49rpx 18rpx;
	}

	.ReservationInforTitle {
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
		padding-bottom: 24rpx;
	}

	.ResInforText {
		padding: 21rpx 19rpx;
	}

	.ResInforL {
		width: 120rpx;
		text-align: right;
		margin-right: 57rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #303133;
	}

	.ResInforL.Lwidth {
		width: 130rpx;
	}

	.ResInforR {
		width: 1px;
		flex: 1;
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09;
	}

	.ResInforR.active {
		color: #B99846;
	}

	.ResInforTisp {
		font-weight: 500;
		font-size: 24rpx;
		color: #1D1D20;
		line-height: 42rpx;
	}

	.ResInforText.ResInforTtisp {
		padding: 14rpx 19rpx 21rpx 19rpx;
	}

	.orderStatusBox {
		padding: 40rpx 31rpx 13rpx 31rpx;
	}

	.orderIforRzBox {
		margin: 0 31rpx;
		background: #ECF1F4;
		border-radius: 18rpx;
		align-items: center;
		padding: 31rpx 38rpx;
	}

	.orderIforRzTime {
		font-weight: 500;
		font-size: 28rpx;
		color: #1D1D20;
		margin-left: 16rpx;
	}

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

	.opera-box {
		background-color: #FFF;
		padding: 20rpx 45rpx 40rpx 45rpx;
		z-index: 5;
	}

	.opera-box .box {
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 36rpx;
	}

	.opera-box .box .price {
		font-size: 40rpx;
		font-weight: 500;
		color: #D91818;
		margin-right: 20rpx;
	}

	.opera-box .box .sum-detail {
		font-size: 24rpx;
		flex: 1;
		font-weight: 500;
		color: #6E6E6E;
	}

	.jz_orderbox {
		/* position: fixed; */
		background-color: #fff;
		bottom: 0;
		width: 100vw;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0rpx 50rpx 0px rgba(76, 76, 76, 0.13);
		z-index: 99;
		justify-content: flex-end;
		padding: 20rpx 30rpx;
	}

	.jz_OrderDiv {
		width: 90%;
		height: 100rpx;
		background-color: #fff;
		margin: auto;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16px;
		z-index: 999;
	}

	.jz_OrderReNow {
		width: 170rpx;
		height: 80rpx;
		background-color: #111111;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-weight: 600;
		font-size: 28rpx;
		border-radius: 16rpx;
	}

	.big-title {
		font-size: 32rpx;
		color: #080A09;
		padding-bottom: 24rpx;
		font-weight: 800;

	}

	.regular {
		font-weight: 500;
	}

	.label {
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 60rpx;
		flex-shrink: 0;
	}

	.grey {
		color: #6e6e6e;
	}

	.f12 {
		font-size: 24rpx;
	}

	.form-items:first-child {
		padding: 0 0 30rpx 0;
		display: flex;
		border-bottom: 1px solid #e6e6e6;
	}
	.RemainderBox text:last-child{
		font-size: 20px;
    	font-weight: 600;
	}
	.timecontent{
		font-size: 26rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}
	.f-order .bold{
		font-weight: bold;
	}
	.f-order .small{
		font-size: 22rpx;
	}
.f-order .flight-status {
	background: #E1C278;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #111111;
	font-weight: 400;
	padding: 7rpx 14rpx;
}
.day-diff{
	position: absolute;
	top: -35rpx;
	line-height: 1;
	font-size: 22rpx;
	color: #FF5858;
	left: 4rpx;
}
.thin{
	line-height: 1;
	margin-top: 16rpx;
	font-weight: 400;
	font-size: 22rpx;
	color: #9999A5;
	max-width: 45px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.f-order .used-time{
		margin-top: -16rpx;
}
.f-order .how-time{
	height: 24rpx;
	font-size: 20rpx;
	color: #9999A5;
}
</style>