<template>
	<view>
	<view class="hotel-detail" 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 + '%' }">
				<view class="orderStatusBox flex" style="margin-bottom: 30rpx">
					<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>
				<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>{{orderData.GetonAddress}}
								<!-- {{ orderData.OrderDate }} {{ orderData.OrderType==1?'接机':orderData.OrderType==2?'送机':'包车' }} -->
							</text></view>
						<view style="margin-top: 28rpx;">目的地：
							<text>{{ orderData.GetoffAddress }}</text>
						</view>
					</view>
					<view class="orderIforRzNum">
						{{orderData.Num}}辆
					</view>
				</view>
				<view class="orderIforDiZhi">
					<view class="orderIforDiZhiL">{{ orderData.ProductName }}</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.AirportName?orderData.AirportName:orderData.GetonAddress}}
						</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.ProductName }}
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="ReservationInforTitle">订单信息</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">订单编号</view>
					<view class="ResInforR">
						<text>
							{{ orderData.OrderId }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">创建日期</view>
					<view class="ResInforR">
						<text>
							{{ orderData.CreateTime }}
						</text>
					</view>
				</view>
			</view>
			<view class="ReservationInforBox" v-if="orderData.OrderType<3">
				<view class="ReservationInforTitle">航班信息</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">航厦</view>
					<view class="ResInforR">
						<text>
							{{ orderData.AirportTerminal }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">航空公司</view>
					<view class="ResInforR">
						<text>
							{{ orderData.AirLine }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">航班号</view>
					<view class="ResInforR">
						<text>
							{{ orderData.FlightNumber }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">{{orderData.OrderType==1?'抵达':orderData.OrderType==2?'起飞':'包车'}}时间</view>
					<view class="ResInforR">
						<text>
							{{ orderData.FlightTime }}
						</text>
					</view>
				</view>
			</view>
			<view class="ReservationInforBox"
			style="padding: 37rpx 18rpx 0rpx 18rpx;">
				<view class="ReservationInforTitle">{{orderData.OrderType==1?'接机':orderData.OrderType==2?'送机':'包车'}}信息</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">车型</view>
					<view class="ResInforR">
						<text>
							{{ orderData.CarName }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">{{orderData.OrderType==1?'接机':orderData.OrderType==2?'送机':'包车'}}时间</view>
					<view class="ResInforR">
						<text>
							{{ orderData.OrderDate }}
						</text>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">联系姓名</view>
					<view class="ResInforR">
						{{ orderData.SurName }}{{ orderData.Name }}
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">联系电话</view>
					<view class="ResInforR">{{ orderData.Mobile }}</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">联系方式</view>
					<view class="ResInforR">{{ orderData.ContactWay }}</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">上车地址</view>
					<view class="ResInforR">{{ orderData.GetonAddress }}</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">下车地址</view>
					<view class="ResInforR">{{ orderData.GetoffAddress }}</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">成人</view>
					<view class="ResInforR">{{ orderData.ManNum }}人</view>
				</view>
				<view class="ResInforText row-sb-n" v-if="orderData.ChildNum">
					<view class="ResInforL Lwidth">儿童</view>
					<view class="ResInforR">{{ orderData.ChildNum }}人</view>
				</view>
				<view class="ResInforText row-sb-n" v-if="orderData.BabyNum">
					<view class="ResInforL Lwidth">婴儿</view>
					<view class="ResInforR">{{ orderData.BabyNum }}人</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL Lwidth">备注</view>
					<view class="ResInforR">
						<view style="width: 100%;overflow: hidden;">
							{{ orderData.Remark }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="orderData.OrderStatus==5" style="padding: 0 30rpx;">
				<cancelProgress :datas="orderData"></cancelProgress>
			</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">
							{{ orderData.Num }}
							<text>辆</text>/
							{{ peopleNum }}
							<text style="margin-right: 30rpx">人</text>
							<text class="red">{{orderData.CurrencyCode}} {{ orderData.Money }}
							</text>
						</view>
					</view>
					<view class="form-items" style="border-bottom: none;padding: 20rpx 0;">
						<view class="label"> 明细 </view>
					</view>
					<view class="flex f12 grey" style="margin-bottom: 40rpx">
						<view style="flex: 1">
							<text style="margin-right: 30rpx">车</text>
						</view>
						<view style="text-align: right">
							{{orderData.Num}}辆× {{orderData.CurrencyCode}}{{ orderData.Unit_Price }}
						</view>
					</view>	
					<view class="flex f12 grey" style="margin-bottom: 40rpx" :style="{'color':mainColor+' !important'}"
						v-if="orderData.DiscountsMoney&&orderData.DiscountsMoney>0">
						<view style="flex: 1">
							<text style="margin-right: 30rpx">优惠金额</text>
						</view>
						<view style="text-align: right">
							-{{ orderData.DiscountsMoney}} </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;">
							{{ orderData.CurrencyCode }}
							{{(orderData.Money-orderData.DiscountsMoney).toFixed(2)}}
						</view>
					</view>
				</view>
			</view>

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

		<view class="jz_orderbox flex" v-if="showPayBtn">
			<view style="display: flex">
				<!-- #ifdef MP-DI -->
				<button v-if="orderData.OrderStatus==1||orderData.OrderStatus==2" class="jz_OrderReNow"
					@click="goCancelZK" style="background: #fff; color: #111; border: 1px solid #111"
					:disabled="submitCancel" :loading="submitCancel">
					取消
				</button>
				<button v-if="orderData.OrderStatus==1" class="jz_OrderReNow" style="margin-left: 20rpx;"
					@click="payHotelOrder" :disabled="submit" :loading="submit">
					立即支付
				</button>
				<!-- #endif -->
				<!-- #ifdef MP-AG -->
				<button v-if="orderData.OrderStatus==1" class="jz_OrderReNow"
					@click="goCancel" style="background: #fff; color: #111; border: 1px solid #111"
					:disabled="submitCancel" :loading="submitCancel">
					取消
				</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
	<cancelPrompt v-if="showModal"
		:showModal="showModal" 
		@cancel="cancelModal" 
		:orderNo="orderData.OrderNo"></cancelPrompt>
	</view>
</template>

<script>
	import cancelPrompt from '@/components/cancelPrompt/cancelPrompt.vue'
	import cancelProgress from '@/components/cancelPrompt/cancelProgress.vue'
	export default {
		components: {
			cancelPrompt,
			cancelProgress
		},
		data() {
			return {
				id: 0,
				boxOption: 0,
				titleStyle: {
					opacity: 0,
				},
				mainColor: "",
				Up: 0,
				current: 1,
				scrollTop: 100,
				old: {
					scrollTop: 0
				},
				orderStatus: {
					text: "待支付",
					code: 0,
				},
				showPayBtn: false,
				btnStyle: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#111",
					color: "#FFF",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				orderData: null,
				orderStatus: {
					code: 0,
					text: "",
				},
				showPayBtn: true,
				submitCancel: false,
				submit: false,
				hotelData: null,
				roomRateDetails: null,
				DanWei: '',
				peopleNum: 0,
				roomNum: 0,
				RatePlanList: null,
				HotelMealTypes: [],
				orderMsg: {
					ArrivalTime: '', //预计到达时间
					EmployeeIdStr: "", //销售id
					CheckInDate: "", //到店时间
					RatePlanID: "",
					CheckOutDate: "", //离店时间
					RoomCount: "", //房间数量
					guestLastName: "", //英文姓
					guestFirstName: "", //英文名
					guestAddress: "",
					guestPhoneNumber: "",
					guestEmail: "", //Email
					BookingID: "",
					HotelName: "", //酒店名称
					HotelPic: "", //酒店封面
					GuestList: [],
					TotalPrice: 0, //总价
					CustomerPayMoney: 0,
					DiscountMoney: 0, //优惠
					CouponAllotIds: '', //优惠券Id
					// #ifdef MP-DI
					OrderSource: 7,
					// #endif
					// #ifdef MP-AG
					OrderSource: 5,
					// #endif
					// // #ifdef MP-WEIXIN
					// OrderSource: 5,
					// // #endif
					// #ifdef MP-ALIPAY
					OrderSource: 6,
					// #endif
					OrderForm: 4, //订单来源
					//备注
					guestRequest: "",
					hotelId: '', //酒店Id
					roomType: 0,
					CustomerId: 0, //同行Id
					DirectCustomerId: 0, //直客Id
					Remarks: '', //备注
				},
				customer: {},
				SalePhone: null,
				showModal: false,
			};
		},
		created() {
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
		},
		onLoad(options) {
			this.id = options.orderId;
			if(options.SalePhone) this.SalePhone = options.SalePhone
			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();
		},
		methods: {
			cancelModal(){
				this.showModal = false
			},
			payHotelOrder() {
				let userInfo = uni.getStorageSync("mall_UserInfo");
				var payMsg = {
					OrderNo: this.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(() => {
							uni.redirectTo({
								url: "/pages/jiuzhai/paysuccess?PreferPrice=" +
								(that.orderData.Money-that.orderData.DiscountsMoney).toFixed(2) +
									"&isFrom=6",
							});
						}, 100);
					},
					fail: function(err) {
						that.submit = false;
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
					},
				});
			},
			goCancelZK() {
				let that = this
				if(this.orderData.OrderStatus==2){
					return this.showModal = true
				}
				if (this.submit || this.submitCancel) return;
				wx.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: (tip) => {
						if (tip.confirm) {
							that.submitCancel = true;
							that.apipost(
								"GetCancelOrder_post", {
									OrderNo: that.OrderNo,
								},
								(res) => {
									if (res.resultCode == 1) {
										uni.showToast({
											title: "操作成功",
											icon: "success",
										});
										that.submitCancel = false
										that.getOrderDetail()
									}
								},
								(err) => {
									uni.showToast({
										title: err.message,
										icon: "none",
									});
									that.submitCancel = false
								}
							);
						}
					}
				})
				
			},
			goCancel() {
				let that = this
				if (this.submitCancel) return
				//待付款-直接取消
				if (this.orderData.OrderStatus == 1) {
					wx.showModal({
						title: '提示',
						content: '确定取消订单？',
						success: (tip) => {
							if (tip.confirm) {
								that.submitCancel = true;
								that.apipost(
									"b2b_get_GetB2BAllCancelOrder", {
										ID: that.id,
										OrderTypeStr: "5", 
									},
									(res) => {
										if (res.resultCode == 1) {
											uni.showToast({
												title: "操作成功",
												icon: "success",
											});
											that.getOrderDetail()
										}
									},
									(err) => {
										uni.showToast({
											title: err.message,
											icon: "none",
										});
										that.submitCancel = false
									}
								);
							}
						}
					})
					
				}
			},
			formatStatus(status,Income,TotalPrice,PlatformTax) {
				// #ifdef MP-DI
					if(status==1){
						this.orderStatus.code = 0;
						this.orderStatus.text = "待付款";
						this.showPayBtn = true;
					}else if(status==2){
						this.orderStatus.code = 1;
						this.orderStatus.text = "待出行";
						this.showPayBtn = true;	
					}else if(status==3){
						this.orderStatus.code = 1;
						this.orderStatus.text = "已完成";
						this.showPayBtn = false;	
					}else if(status==4){
						this.orderStatus.code = -1;
						this.orderStatus.text = "已取消";
						this.showPayBtn = false;	
					}else if(status==5&&this.orderData.AfterSalesOrderStatus==1){
						this.orderStatus.code = -2;
						this.orderStatus.text = "等待审批";
						this.showPayBtn = false;	
					}else if(status==5&&this.orderData.AfterSalesOrderStatus==2){
						this.orderStatus.code = 0;
						this.orderStatus.text = "退款中";
						this.showPayBtn = false;	
					}else if(status==5&&this.orderData.AfterSalesOrderStatus==3){
						this.orderStatus.code = -1;
						this.orderStatus.text = "已原路退回";
						this.showPayBtn = false;	
					}
				// #endif
				// #ifdef MP-AG
					// if (status == 2) {
					// 	this.orderStatus.code = -1;
					// 	this.orderStatus.text = "已取消";
					// 	this.showPayBtn = false;
					// } else if (status == 3) {
					// 	this.orderStatus.code = 0;
					// 	this.orderStatus.text = "待付款";
					// 	this.showPayBtn = true;
					// } else if (status == 1&&(Income+PlatformTax)<TotalPrice) {
					// 	this.orderStatus.code = -2;
					// 	this.orderStatus.text = "正常";
					// 	this.showPayBtn = false;
					// } else if (status == 1&&(Income+PlatformTax)==TotalPrice) {
					// 	this.orderStatus.code = 1;
					// 	this.orderStatus.text = "待出行";
					// 	this.showPayBtn = false;
					// }
					if (status == 3) {
						this.orderStatus.code = -1;
						this.orderStatus.text = "已取消";
						this.showPayBtn = false;
					} else if (status == 1) {
						this.orderStatus.code = 0;
						this.orderStatus.text = "待付款";
						this.showPayBtn = true;
					} else if (status == 4) {
						this.orderStatus.code = -2;
						this.orderStatus.text = "已完成";
						this.showPayBtn = true;
					} else if (status == 2&&Income<TotalPrice) {
						this.orderStatus.code = 1;
						this.orderStatus.text = "待付款";
						this.showPayBtn = false;
					} else if (status == 2&&Income==TotalPrice) {
						this.orderStatus.code = 1;
						this.orderStatus.text = "待出行";
						this.showPayBtn = false;
					}
				// #endif
			},
			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() {
				uni.showLoading({
					title: "加载中",
				});
				let msg = {
					OrderId: this.id,
				};
				this.apipost("CarSingle_post_GetTYMyCarOrderInfo", msg,
					(res) => {
						if (res.resultCode == 1) {
							uni.hideLoading();
							this.orderData = res.data
							this.peopleNum = Number(this.orderData.ManNum) + Number(this.orderData.ChildNum) +Number(this.orderData.BabyNum);
							// #ifdef MP-AG
							this.formatStatus(
								res.data.OrderStatus,
								res.data.Income,
								(res.data.Money-res.data.DiscountsMoney).toFixed(2),
							);
							// #endif
							// #ifdef MP-DI
							this.getOrderInfoByIdAndType()
							// #endif
						}
					}, err => {
						uni.showToast({
							title: err.message,
							icon: "none",
						});
						uni.hideLoading();
					}
				);
			},
			getOrderInfoByIdAndType(){
				const parameter={ErpOrderId:this.id,OrderTypeStr:'Vehicle'}
				this.apipost("GetDetailsByErpOrderId_post",parameter,res=>{
					if(res.resultCode==1){
							this.OrderNo = res.data.OrderNo
							this.formatStatus(
								res.data.OrderStatus,
								null,
								null
							);
					}else{
						
					}
				})
			},
			//日期格式化
			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;
			},
		},
	};
</script>

<style scoped>
	@import url("@/asset/css/flex.css");
	/deep/.showModalBox{
		background-color: rgba(0, 0, 0, 0.6);
	}
	.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;
	}
</style>