<template>
	<view style="background:#F3F1EF; height:100vh;display: flex;flex-direction: column;">
		<scroll-view scroll-y="true" style="height: 1px;flex: 1;box-sizing: border-box;">
			<view class="hotel-order">
				<view class="o-head">
					<view class="o-head-title">{{ HotelInfo.name }}</view>
					<view class="o-timer">
						<view class="row-sb-n">
							<view class="row items-center">
								<view class="time-item">
									{{getDate(dayObj.start)}}<text>{{ getWeek(dayObj.start) }}</text>
								</view>
								<view class="time-itemZhi"><text>-</text></view>
								<view class="time-item">{{getDate(dayObj.end)}}<text>{{ getWeek(dayObj.end) }}</text>
								</view>
								<view class="timeline"></view>
								<view class="time-split">
									<view>{{dayObj.day?dayObj.day:''}}晚</view>
								</view>
							</view>
							<view class="o-detail" @click="goUrl">详情</view>
						</view>
						<view class="room-dateil row items-center">
							<view class="room-name">{{RoomInfo.RoomName_CN?RoomInfo.RoomName_CN:''}}</view>
							<view class="roomline"></view>
							<view class="room-remark">
								{{searchObj.rooms}}间
							</view>
							<view class="roomline"></view>
							<view class="roomPrice">
								{{RoomInfo.Currency}}
								{{orderMsg.TotalPrice}}
							</view>
						</view>
					</view>
				</view>
				<view class="form">
					<view class="row-sb-n visaProductTextBox">
						<view class="row col" style="width:1px;flex: 1;">
							<view class="visaProduct_rColor visaProductTextL">*</view>
							<view class="visaProductTitle">订房信息</view>
						</view>
						<view class="row-sbas-n items-center">
							<view class="col row items-center textCenter visaProductTetx">
								{{orderMsg.RoomCount}}
								间
							</view>
						</view>
					</view>
					<view>
						<view v-for="(item,index) in orderMsg.GuestList" class="form-items row" :key="index">
							<view class="label">
								{{ orderMsg.GuestList.length==1?'住客信息':`房间${index+1}住客` }}
							</view>
							<view class="LastNameBox column val" style="width: 1px;flex: 1;">
								<view class="row items-center" v-for="(sItem,i) in item.GuestInfo" :key="i">
									<input type="text" v-model="sItem.LastName"
										:placeholder="`${sItem.IsAdult?'住客'+(i+1):sItem.Age+'岁儿童'}姓`" />
									<input type="text" v-model="sItem.FirstName"
										:placeholder="`${sItem.IsAdult?'住客'+(i+1):sItem.Age+'岁儿童'}名`" />
								</view>
							</view>
						</view>
						<view class="form-items">
							<view class="label">
								联系姓名
							</view>
							<view class="val row">
								<input type="text" v-model="orderMsg.guestLastName" placeholder="拼音或英文姓" />
								<input type="text" v-model="orderMsg.guestFirstName" placeholder="拼音或英文名" />
							</view>
						</view>
						<view class="form-items">
							<view class="label">联系电话</view>
							<view class="form-itemsL row" @click="showCountry=true">
								<text>+86</text>
								<!--'arrow-up':'arrow-down'-->
								<u-icon name="arrow-down" color="#080A09" size="20" />
							</view>
							<view class="val">
								<input type="text" v-model="orderMsg.guestPhoneNumber" placeholder="输入电话号码" />
							</view>
						</view>
						<view class="form-items">
							<view class="label">E-mail</view>
							<view class="val">
								<input type="text" v-model="orderMsg.guestEmail" placeholder="用于接收信息" />
							</view>
						</view>
						<view class="form-items">
							<view class="label">预计到店</view>
							<view class="val flex form-itemsTime" @click="showtime=true">
								<view style="flex: 1;" class="f14">{{orderMsg.ArrivalTime}} 房间整晚保留</view>
								<u-icon name="arrow" color="#D9D9D9" size="20" />
							</view>
						</view>
					</view>
					<view>
						<textarea class="jz_TextArea" placeholder="请输入备注信息" v-model="orderMsg.Remarks"></textarea>
					</view>
				</view>
				<view class="CouponBox">
					<view class="big-title">
						<text>优惠券</text>
					</view>
					<view style="margin-top: 20px;display: flex; align-items: center;">
						<view style="font-size: 12px;width:1px;flex:1">请选择优惠券</view>
						<view style="display: flex;align-items: center;">
							<text style="color:#F20707;font-size: 12px;" @click="showCouponHandler">
								<text style="flex: 1;"
									v-if="useCouponIds == 0 &&couponList.length>0">{{couponList.length}}张可用优惠券</text>
								<text class="content" style="color:grey" v-else-if="couponList.length==0">暂无优惠券</text>
								<text class="content" v-else
									:style="{ color: mainColor }">已优惠{{currentCoupon.discountMoney}} 元</text>
							</text>
							<u-icon name="arrow" :size="32" color="#111" v-if="couponList.length>0"></u-icon>
						</view>
					</view>
				</view>
				<view class="PriceBox">
					<view class="big-title">
						<text>订单金额</text>
					</view>
					<view class="form" style="margin:20rpx 0 15rpx 0;padding: 0;">
						<view class="form-items PriceZaiXian">
							<view class="label">
								商品总价
							</view>
							<view class="val f14 regular" style="text-align: right;">
								<text style="margin-right: 5rpx;">{{searchObj.peoples}}人</text>
								<text style="margin-right: 5rpx;">{{orderMsg.RoomCount}}间房</text>
								<text style="margin-right: 5rpx;">{{dayObj.day}}晚</text>
								<text class="red">
									{{RoomInfo.Currency}}{{(orderMsg.TotalPrice).toFixed(2)}}
								</text>
							</view>
						</view>
						<view class="form-items PriceMinXi" style="border-bottom: none;">
							<view class="label">
								明细
							</view>
						</view>

						<template
							v-if="roomRateDetails&&roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0">
							<template v-for="subItem in roomRateDetails.RatePlanList">
								<view class="flex f12 grey" style="margin-bottom: 40rpx">
									<view style="flex: 1">
										<text style="margin-right: 30rpx">房间{{subItem.RoomOccupancy.RoomNum}}</text>
									</view>
									<view style="text-align: right">
										{{(subItem.PriceList.length*subItem.PriceList[0].Price).toFixed(2)}}
									</view>
								</view>
							</template>
						</template>
						<view class="flex f12 grey" style="margin-bottom: 40rpx"
							:style="{'color':mainColor+' !important'}" v-if="useCouponIds.length>0">
							<view style="flex: 1">
								<text style="margin-right: 30rpx">优惠券</text>
							</view>
							<view style="text-align: right">
								-¥{{currentCoupon.discountMoney}}</view>
						</view>
						<view class="flex f12">
							<view style="flex: 1">小计</view>
							<view>
								{{RoomInfo.Currency}}
								{{ (orderMsg.TotalPrice-currentCoupon.discountMoney).toFixed(2) }}
							</view>
						</view>
					</view>
				</view>
				<view class="buyTispBox">
					<view class="big-title">
						<text class="">购买说明</text>
					</view>
					<view class="rule">
						<text class="king">
						</text>
						<text v-if="roomRateDetails&&
								roomRateDetails.CancellationPolicyList &&
								roomRateDetails.CancellationPolicyList.length > 0">
							<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)}}-->
										{{itemCancella.Amount}};</template>
								</template>
							</template>
						</text>
					</view>
				</view>
				<view style="height: 27rpx"></view>
			</view>
		</scroll-view>
		<view class="opera-box">
			<view class="box flex">
				<view class="price">
					<text class="f11">{{RoomInfo.Currency}}</text>
					<text>
						{{ (orderMsg.TotalPrice-currentCoupon.discountMoney).toFixed(2) }}
					</text>
				</view>
				<view class="sum-detail">共计 {{orderMsg.RoomCount}}间房</view>
				<u-button :ripple="true" :hair-line="false"
					:disabled="(this.orderMsg&&this.orderMsg.TotalPrice==0)||submit"
					:custom-style="(this.orderMsg&&this.orderMsg.TotalPrice==0)||submit?btnStyle2:btnStyle"
					@click="submitB2COrderHandler" :loading="submit">立即购买</u-button>
			</view>
		</view>
		<u-picker v-model="showtime" mode="time" @confirm='confirm' :params="paramsTime"
			:default-time='orderMsg.ArrivalTime'></u-picker>
		<u-toast ref="uToast" />
		<u-picker mode="selector" v-model="showCountry" :default-selector="[0]" :range="countrys"
			@confirm='(e)=>{changeDown(e,CountryType)}' range-key="label" @input="showCountry=false"></u-picker>

		<coupon v-if="couponList.length > 0 && showCoupon" :price="orderMsg.TotalPrice" :list="couponList"
			:current="useCouponIds" @close="closeCouponHandler" :order="orderMsg" :numberPeople="searchObj.peoples">
		</coupon>
	</view>
</template>

<script>
	import coupon from '@/components/coupon/index';
	export default {
		components: {
			coupon
		},
		data() {
			return {
				btnStyle: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#111",
					color: "#FFF",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				btnStyle2: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#eee",
					color: "#000",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				RoomInfo: {},
				dayObj: {},
				HotelInfo: {},
				orderMsg: {
					ArrivalTime: '14:00', //预计到达时间
					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: '', //备注
				},
				showtime: false,
				paramsTime: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				tipsText: '',
				showCountry: false,
				countrys: [],
				couponList: [],
				showCoupon: false,
				useCouponIds: [],
				currentCoupon: {
					discountMoney: 0
				},
				showPz: false,
				pzCoupon: null,
				searchObj: null,
				mainColor: '',
				activeStyle: '',
				params: {
					sort: 1,
					displayFrom: 1,
					CheckInDate: "",
					CheckOutDate: "",
					searchroomGroup: [],
					ratePlanID: "",
					imgUrl: "",
					RoomCount: 1,
					ChildCount: 0,
					AdultCount: 1,
					OccupancyDetails: [],
					hotelId: 0
				},
				roomRateDetails: {},
				dataList: {},
				customer: {},
				CreateBy: 0,
				submit: false,
				orderInfo: null,
				price: 0,
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "订单支付预览",
			});
			this.customer = uni.getStorageSync("b2b_user")
			if (options.searchObj) {
				this.searchObj = JSON.parse(options.searchObj)
			}
			if (options.HotelInfo) {
				this.HotelInfo = JSON.parse(options.HotelInfo);
				this.orderMsg.hotelId = this.HotelInfo.hotelid;
				this.orderMsg.HotelName = this.HotelInfo.name;
				if (this.HotelInfo.images && this.HotelInfo.images.length > 0) {
					this.orderMsg.HotelPic = this.HotelInfo.images[0].Path;
				}
			}
			if (options.RoomInfo) {
				this.RoomInfo = JSON.parse(options.RoomInfo)
			}

			if (options.CreateBy) {
				this.CreateBy = options.CreateBy
			}
			this.orderMsg.ProductId = this.RoomInfo.RoomTypeID;
			this.orderMsg.RatePlanID = this.RoomInfo.RatePlanID
			this.orderMsg.RoomCount = this.searchObj.rooms
			this.getGroupData()
			this.price = this.RoomInfo.Currency + this.RoomInfo.RatePlanPrice
			this.getUserCouponList()
			this.CalTotalPrice();
			this.GetCountryInfo()
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
		},
		mounted() {
			uni.getStorage({
				key: "Time",
				success: (res) => {
					let obj = JSON.parse(res.data);
					this.dayObj = obj
					this.orderMsg.CheckInDate = this.dayObj.start;
					this.orderMsg.CheckOutDate = this.dayObj.end;
					this.params = {
						sort: 1,
						displayFrom: 1,
						CheckInDate: this.orderMsg.CheckInDate,
						CheckOutDate: this.orderMsg.CheckOutDate,
						searchroomGroup: this.searchObj.searchroomGroup,
						ratePlanID: this.orderMsg.RatePlanID,
						imgUrl: "",
						RoomCount: this.orderMsg.RoomCount,
						ChildCount: this.searchObj.childrenNumberZC,
						AdultCount: this.searchObj.adultsNumber,
						OccupancyDetails: [],
						hotelId: this.orderMsg.hotelId
					}
					this.initHotel()
				},
			});
		},
		methods: {
			getGroupData() {
				this.orderMsg.GuestList = [];
				this.searchObj.searchroomGroup.forEach((item, index) => {
					var guestInfoList = [];
					let allprople = Number(item.numberOfAdults) + Number(item.numberOfChildren)
					for (let i = 0; i <= Number(item.numberOfAdults) - 1; i++) {
						let obj = {
							IsAdult: 1,
							LastName: "",
							FirstName: "",
							Age: ""
						};
						guestInfoList.push(obj);
					}
					for (let i = 0; i <= Number(item.numberOfChildren) - 1; i++) {
						let obj = {
							IsAdult: 0,
							LastName: "",
							FirstName: "",
							Age: item.ChildAgeTexts[i]
						};
						guestInfoList.push(obj);
					}
					var obj = {
						RoomNum: index + 1,
						numberOfAdults: item.numberOfAdults,
						numberOfChildren: item.numberOfChildren,
						ChildAgeDetails: item.ChildAgeDetails != '' ? item.ChildAgeDetails : 1,
						GuestInfo: guestInfoList
					};
					this.orderMsg.GuestList.push(obj);
				});
			},
			getWeek(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				return "周" + week;
			},
			submitB2COrderHandler() {
				const error = this.validate()
				if (error != '') {
					uni.showToast({
						icon: 'none',
						title: error
					})
					return
				}
				if (this.submit) return;
				this.submit = true;
				let userInfo = uni.getStorageSync("mall_UserInfo");
				let guestInfo = `成人x${this.searchObj.adultsNumber}; `;
				if (this.orderMsg.ChirdNeedBedNum > 0) {
					guestInfo += `儿童${this.searchObj.childrenNumberZC}; `;
				}
				let msg = {
					SurName: this.orderMsg.guestLastName,
					Name: this.orderMsg.guestFirstName,
					ContactNumber: this.orderMsg.guestPhoneNumber,
					Mailbox: this.orderMsg.guestEmail,
					GoodsId: this.HotelInfo.hotelid,
					GoodsName: this.HotelInfo.name,
					GoodsPic: "",
					GoodsType: 9,
					OrderMake: `${this.orderMsg.CheckInDate}入住；${this.orderMsg.CheckOutDate}离店 ${guestInfo}`,
					TotalPrice: this.orderMsg.TotalPrice,
					PreferentialPrice: this.currentCoupon.discountMoney,
					CouponAllotIds: "",
					ErpOrderId: 0,
					Country: 0,
					PlatformTax: 0,
					Income: 0,
					Refund: 0,
					MallBaseId: userInfo.MallBaseId,
					CreateBy: 0,
					// #ifdef MP-DI
					DOrderType: 1,
					// #endif
					// #ifdef MP-AG
					DOrderType: 2,
					OpenId: userInfo.OpenId ? userInfo.OpenId : "",
					// #endif
					DiDaHotelParams: {},
					CustomerId: 0,
				};
				let CouponAllotIds = ''
				if (this.useCouponIds.length > 0) {
					CouponAllotIds = this.useCouponIds.join(',')
				}
				msg.CouponAllotIds = CouponAllotIds;
				if (this.HotelInfo.images && this.HotelInfo.images.length > 0) {
					msg.GoodsPic = this.HotelInfo.images[0].Path;
				}
				//道旅酒店参数
				let that = this;

				//直客
				// #ifdef MP-DI
				if (this.customer.salesBaseInfo && this.customer.salesBaseInfo.employeeId) {
					msg.CreateBy = this.customer.salesBaseInfo.employeeId;
				}
				that.orderMsg.DirectCustomerId = this.customer.customerId;
				msg.CustomerId = this.customer.customerId;
				if (this.customer && this.customer.erpBaseInfo && this.customer.erpBaseInfo.employeeId) {
					that.orderMsg.EmployeeIdStr = this.customer.erpBaseInfo.employeeId;
				}
				// #endif

				//同行
				// #ifdef MP-AG
				that.orderMsg.CustomerId = this.customer.customerId
				msg.CustomerId = this.customer.customerInfoChildrenId;
				if (this.customer && this.customer.salesBaseInfo && this.customer.salesBaseInfo.employeeId) {
					that.orderMsg.EmployeeIdStr = this.customer.salesBaseInfo.employeeId;
				}
				// #endif
				this.orderMsg.CouponAllotIds = CouponAllotIds;
				msg.DiDaHotelParams = this.orderMsg;
				//道旅参数END
				this.apipost("AddOrderInfo_post", msg, (res) => {
					this.submit = false;
					if (res.resultCode == 1) {
						this.orderInfo = JSON.parse(res.data.sPayInfo)
						uni.showToast({
							icon: 'none',
							title: '订单创建成功'
						})
						this.goPayHandler(res.data);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000
						})
					}
				}, (fail) => {
					uni.showToast({
						title: fail.message,
						icon: 'none',
						duration: 3000
					})
					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/hotel/orderdetails?orderId=" + item.ErpOrderId,
							});
						}, 100);
					},
					fail: function(err) {
						that.submit = true;
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/hotel/orderdetails?orderId=" + item.ErpOrderId,
							});
						}, 100);
					},
				});
			},
			//日期格式化
			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;
			},
			initHotel() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.submit = true
				this.apipost(
					"dmc_post_GetDiDaPriceConfirm", this.params,
					res => {
						if (res.resultCode == 1) {
							this.submit = false
							uni.hideLoading();
							this.dataList = res.data.PriceDetails;
							this.roomRateDetails = res.data.PriceDetails.HotelList[0];
							this.orderMsg.BookingID = res.data.PriceDetails.ReferenceNo;
							this.orderMsg.checkInTime = res.data.PriceDetails.CheckInDate;
							this.orderMsg.TotalPrice = this.roomRateDetails.TotalPrice
							if (this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList.length > 0) {
								this.orderMsg.roomType = this.roomRateDetails.RatePlanList[0].BedType
							}
						}
					}, err => {
						uni.hideLoading();
						uni.showToast({
							title: err.message,
							icon: 'none',
						})
					});
			},
			getPrice(price) {
				return Math.ceil(price);
			},
			goUrl() {
				uni.navigateTo({
					url: `/pages/hotel/orderInfor?msg=${encodeURIComponent(JSON.stringify(this.params))}&dayObj=${JSON.stringify(this.dayObj)}&searchObj=${JSON.stringify(this.searchObj)}&HotelInfo=${JSON.stringify(this.HotelInfo)}`
				})
			},
			showCouponHandler() {
				this.showCoupon = this.couponList.length > 0;
			},
			closeCouponHandler(e) {
				if (e != -1) {
					this.useCouponIds = e;
					//叠加使用优惠券
					let TotalDiscountAmount = 0
					this.couponList.forEach(x => {
						let findIndex = this.useCouponIds.findIndex(y => x.id == y)
						if (findIndex != -1) {
							let discountMoney = 0
							if (x.couponsType == 1) {
								discountMoney = x.denomination
							} else {
								discountMoney = (parseFloat(this.price) * (1 - parseFloat(x.denomination / 10)))
									.toFixed(2)
							}
							TotalDiscountAmount += discountMoney
						}
					})
					if (TotalDiscountAmount) this.currentCoupon.discountMoney = TotalDiscountAmount
					else this.currentCoupon.discountMoney = 0
				} else {
					this.currentCoupon.discountMoney = 0
					this.useCouponIds = []
				}
				this.showCoupon = false;
			},
			calcMaxCouponHandle() {
				if (this.couponList && this.couponList.length > 0) {
					let maxCouponId = 0
					let discount = 0
					const money = this.price
					this.couponList.forEach(x => {
						if (x.couponsType == 1 && x.denomination > discount && (this.orderMsg.AdultPeopleNum >= x
								.orderGuestNum || !x.orderGuestNum)) {
							discount = x.denomination
							maxCouponId = x.id
						}
						if (x.couponsType == 2) {
							let disMoney = money * (1 - x.denomination)
							if (discount < disMoney && (this.orderMsg.AdultPeopleNum >= x.orderGuestNum || !x
									.orderGuestNum)) {
								discount = disMoney
								maxCouponId = x.id
							}
						}
					})
					if (maxCouponId > 0) this.closeCouponHandler([maxCouponId])
					else this.closeCouponHandler(-1)
				}
			},
			getUserCouponList() {
				let couponParams = {
					"lineId": '', //线路ID
					"lineteamId": 0, //系列ID
					"userId": this.customer.accountId,
					"CouponsUseScope": 9, //酒店
					"isExpansion": 0, //是否启动膨胀金1-是
					// #ifdef MP-DI
					"CustomerType": 1, //客户类型 0-同行，1-直客
					// #endif
					// #ifdef MP-AG
					"CustomerType": 0, //客户类型 0-同行，1-直客
					// #endif
					"TCID": '',
				}
				this.apipost(
					"coupon_post_GetUserCanUseCouponList", couponParams,
					(res) => {
						if (res.resultCode == 1) {
							this.couponList = res.data
							this.calcMaxCouponHandle()
						}
					},
					(err) => {
						console.log("coupon_post_GetUserCanUseCouponList_err", err);
					}
				);
			},
			usePzCouponHandler() {
				this.showPz = false
				this.closeCouponHandler([this.pzCoupon.id])
				this.pzCoupon = null
			},
			calcPzCouponHandler() {
				this.couponList.forEach((x) => {
					if (x.expansionModel.denomination > 0) {
						if (this.pzCoupon && this.pzCoupon.expansionModel.denomination < x.expansionModel
							.denomination)
							this.pzCoupon = x
						else
							this.pzCoupon = x
						x.realDenomination = x.denomination
						x.denomination = x.expansionModel.denomination
					}
				})
				this.showPz = this.pzCoupon ? true : false
			},
			GetCountryInfo() {
				this.apipost("GetCountryInfo_post", {}, (r) => {
					for (let i = 0; i < r.data.phoneCountList.length; i++) {
						let Count = r.data.phoneCountList[i]
						let obj = {
							...Count,
							value: Count.ID,
							label: Count.Name,
						}
						this.countrys.push(obj)
					}
				})
			},
			changeDown(e) {
				let i = [e]
			},
			addGuest(index) {
				this.orderMsg.GuestList[index].GuestInfo.push({
					LastName: "",
					FirstName: "",
					Age: ""
				})
			},
			deleteGuest(index, index1) {
				this.orderMsg.GuestList[index].GuestInfo.splice(index1, 1)
			},
			editNum(type) {
				if (type == 1) {
					if (this.orderMsg.RoomCount > 1) {
						this.orderMsg.RoomCount--;
						this.orderMsg.GuestList.splice(this.orderMsg.GuestList.length - 1, 1)
					}
				} else {
					this.orderMsg.RoomCount++;
					this.orderMsg.GuestList.push({
						RoomNum: this.orderMsg.GuestList.length + 1,
						numberOfAdults: 2,
						numberOfChildren: 0,
						ChildAgeDetails: '',
						GuestInfo: [{
							LastName: "",
							FirstName: "",
							Age: ""
						}]
					})
				}
				this.searchObj.rooms = this.orderMsg.GuestList.length
				this.CalTotalPrice();
			},
			getDate(date) {
				if (date) {
					let arr = date.split('-');
					return arr[1] + '月' + arr[2] + '日'
				}
			},
			//选择时间
			confirm(val) {
				this.orderMsg.ArrivalTime = val.hour + ':' + val.minute;
			},
			//计算总价
			CalTotalPrice() {
				this.price = this.orderMsg.TotalPrice * this.orderMsg.RoomCount
			},
			validate() {
				let email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
				let msg = ''
				for (let i = 0; i < this.orderMsg.GuestList.length; i++) {
					for (let j = 0; j < this.orderMsg.GuestList[i].GuestInfo.length; j++) {
						if (this.orderMsg.GuestList[i].GuestInfo[j].LastName == '') {
							return msg = '请输入住客姓'
						}
						if (this.orderMsg.GuestList[i].GuestInfo[j].FirstName == '') {
							return msg = '请输入住客名'
						}
					}
				}
				if (this.orderMsg.SurName == '') {
					msg = '请输入姓'
				} else if (this.orderMsg.Name == '') {
					msg = '请输入名'
				} else if (this.orderMsg.guestPhoneNumber == '') {
					msg = '请输入联系电话'
				} else if (this.orderMsg.guestPhoneNumber && this.orderMsg.guestPhoneNumber.length != 11) {
					msg = '请输入正确的电话号码'
				} else if (this.orderMsg.guestEmail == '' || !this.orderMsg.guestEmail) {
					msg = '请输入邮箱地址'
				} else if (!email.test(this.orderMsg.guestEmail)) {
					msg = '请输入正确的邮箱地址'
				} else if (this.orderMsg.CheckInDate == '') {
					msg = '入住时间不能为空'
				} else if (this.orderMsg.CheckOutDate == '') {
					msg = '离店时间不能为空'
				}
				return msg
			},
		}
	}
</script>

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

	.hotel-order {
		color: #111111;
	}

	.opera-box {
		background-color: #FFF;
		padding: 20rpx 45rpx 40rpx 45rpx;
		/* 	position: fixed;
		bottom: 0;
		left: 0;
		right: 0; */
		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;
	}

	.hotel-order .red {
		color: #D91818 !important
	}

	.hotel-order .grey {
		color: #6E6E6E !important
	}

	.hotel-order .form {
		margin-top: 60rpx;
		padding: 0 19rpx 44rpx 19rpx;
		background: #fff;
		border-radius: 18rpx;
		margin: 28rpx 31rpx;
	}

	.hotel-order .form .form-items {
		display: flex;
		align-items: center;
		padding: 22rpx 15rpx;
		font-size: 28px;
		font-weight: 500;
		color: #303133;
	}

	.hotel-order .form .form-items:first-child {
		padding: 10rpx 10rpx 20rpx 15rpx;
	}

	.hotel-order .form .form-items .label {
		width: 130rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-right: 57rpx;
		flex-shrink: 0;
	}

	.hotel-order .form .form-items .val {
		flex: 1;
	}

	.hotel-order .sheshi {
		margin-top: 50rpx;
	}

	.hotel-order .sheshi .she-title {
		font-size: 28rpx;
		font-weight: 800;
	}

	.hotel-order .sheshi .she-content {
		margin-top: 24rpx;
	}

	.hotel-order .sheshi .she-content text {

		font-size: 24rpx;
		font-weight: 500;
		color: #4A4A4A;
		line-height: 40rpx;
		margin-right: 24rpx;
	}

	.hotel-order .form .form-items .val input {
		border: none;
		padding: 0;
		margin: 0;
		outline: none;
		height: 38rpx;
		line-height: 38rpx;
		font-size: 28rpx;
		font-weight: 500;
		width: 100%;
	}

	.hotel-order .king {
		color: #DFBE6E !important;
	}

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

	.f11 {
		font-size: 22rpx !important;
	}

	.hotel-order .f14 {
		font-size: 28rpx !important;
	}

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

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

	.hotel-order .empty-block {
		height: 20rpx;
		background: #ECF1F4;
	}

	.hotel-order .flex-wrap {
		flex-wrap: wrap;
	}

	.hotel-order .o-head {
		padding: 20rpx 31rpx 46rpx 31rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
		border-radius: 0px 0px 40rpx 40rpx;
	}

	.hotel-order .o-head .o-timer {
		background: #ECF1F4;
		border-radius: 18rpx;
		padding: 30rpx 30rpx;
	}

	.hotel-order .o-head .o-timer .time-item {
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
	}

	.hotel-order .o-head .o-timer .time-item text {
		margin-left: 5rpx;
	}

	.hotel-order .o-head .o-timer .time-itemZhi {
		font-size: 32rpx;
		color: #080A09;
		padding: 0 10rpx;
	}

	.hotel-order .o-head .o-timer .timeline {
		width: 1rpx;
		height: 24rpx;
		background: #BCBCBC;
		background: #BCBCBC;
		margin-left: 18rpx;
		margin-right: 18rpx;
	}

	.hotel-order .o-head .o-timer .time-split {
		font-weight: 800;
		font-size: 32rpx;
		text-align: center;

	}

	.hotel-order .o-head .room-name {
		font-weight: 500;
		font-size: 28rpx;
		color: #1D1D20;
	}

	.hotel-order .o-head .room-remark {
		font-weight: 500;
		font-size: 28rpx;
		color: #1D1D20;
		flex-shrink: 0;
	}

	.hotel-order .o-head .rule {
		font-size: 22rpx;
		font-weight: 500;
		color: #6E6E6E;
		margin-top: 18rpx;
	}

	.hotel-order .big-title {
		position: relative;
	}

	.hotel-order .big-title::before {
		// display: block;
		// width: 71rpx;
		// height: 12rpx;
		// background: #DFBE6E;
		// border-radius: 4rpx;
		// content: ' ';

		// position: absolute;
		// left: 0;
		// bottom: 6rpx;
		// z-index: 1;
	}

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

	.o-head-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
		margin-bottom: 20rpx;
	}

	.o-detail {
		font-weight: 800;
		font-size: 32rpx;
		color: #B99846;
	}

	.room-dateil {
		margin-top: 3rpx;
	}

	.roomline {
		width: 1rpx;
		height: 24rpx;
		background: #BCBCBC;
		margin-left: 14rpx;
		margin-right: 14rpx;
	}

	.roomPrice {
		font-weight: 500;
		font-size: 28rpx;
		color: #1D1D20;
		flex-shrink: 0;
	}

	.visaProductTextBox {
		padding: 29rpx 0 21rpx 0;
		font-family: PingFang SC;
	}

	.visaProductTitle {
		font-weight: 800;
		font-size: 32rpx;
	}

	.visaProductTextL {
		font-size: 35rpx;
		font-weight: bold;
	}

	.visaProductTextR {
		font-size: 20rpx;
		margin-left: 24rpx;
	}

	.visaProduct_rColor {
		color: #FF3166;
	}

	.addPnum {
		padding: 9rpx 10rpx;
	}

	.addPnumL {
		margin-right: 17rpx;
	}

	.addPnumR {
		margin-left: 17rpx;
	}

	.visaProductTetx {
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09;
	}

	.form-itemsTime {
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09;
	}

	.form-itemsL text {
		font-weight: bold;
		font-size: 28rpx;
		color: #B99846;
		margin-right: 26rpx;
	}

	.CouponBox {
		margin: 0 31rpx 32rpx 31rpx;
		padding: 18rpx 34rpx 35rpx 34rpx;
		background: #fff;
		border-radius: 18rpx;
	}

	.PriceBox {
		margin: 0 31rpx 32rpx 31rpx;
		padding: 18rpx 34rpx 35rpx 34rpx;
		background: #fff;
		border-radius: 18rpx;
	}

	.PriceZaiXian {
		border-bottom: 1rpx solid #F0F0F0;
	}

	.PriceZaiXian .label {
		font-weight: bold;
	}

	.hotel-order .form .form-items.PriceZaiXian {
		padding: 0;
		padding-top: 15rpx;
		padding-bottom: 20rpx;
	}

	.hotel-order .form .form-items.PriceMinXi {
		padding: 0;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.PriceTole {
		color: #BFB9B9;
	}

	.buyTispBox {
		border-radius: 18rpx;
		background: #fff;
		margin: 0 31rpx 27rpx 31rpx;
		padding: 37rpx 18rpx 47rpx 18rpx;
	}

	.buyTispBox .big-title {
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
		margin-bottom: 37rpx;
	}

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

	.LastNameBox view {
		margin-bottom: 20rpx;
	}

	.LastNameBox view:last-child {
		margin-bottom: 0;
	}

	.jz_TextArea {
		height: 50px;
		margin-bottom: 10px;
		width: auto;
		border: 1px solid #dfddd8;
		border-radius: 4px;
		margin: 0 10rpx;
		padding: 20rpx;
	}
</style>