<style>
	.jz_Reserve{
		padding-bottom: 180rpx;
	}
	.jz_ReserTop {
		width: 100%;
		min-height: 300rpx;
		box-shadow: 0px 2px 15px 0px rgba(76, 76, 76, 0.13);
		background-color: #fff;
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		padding: 40rpx;
	}

	.jz_ReserTitle {
		color: #111111;
		font-weight: 600;
		font-size: 36rpx;
	}

	.jz_ReserIn {
		color: #111;
		font-size: 24rpx;
		font-weight: 500;
	}

	.jz_ReseQue {
		color: #DFBE6E;
		font-size: 24rpx;
		padding-top: 30rpx;
		border-top: 1px solid #E7E7E7;
		margin-top: 20px;
	}

	.jz_ReseQue img {
		width: 16px;
		height: 14px;
		position: relative;
		top: 2px;
		margin-right: 5px;
	}

	.jz_ReseOrder {
		padding: 40rpx;
	}

	.jz_ReDix {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.jz_RedixTitle {
		width: 90px;
		flex-shrink: 0;
	}

	/* .jz_OrderDiv {
		position: fixed;
		width: 90%;
		height: 100rpx;
		background-color: #fff;
		margin: auto;
		bottom: 20px;
		padding: 20rpx;
		left: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
		border-radius: 16px;
		z-index: 999;
	} */
	.jz_orderbox{
		height: 160rpx;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		width: 100vw;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
	.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: 150rpx;
		height: 80rpx;
		background-color: #111111;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-weight: 600;
		font-size: 28rpx;
		border-radius: 16rpx;
	}
	.jz_form{
		margin-top: 60rpx;
		padding:0 45rpx;
	}
	.jz_form .form-items{
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom:1px solid #f5f5f5;
		font-size: 28px;
		font-weight: 500;
	}
	.jz_form .form-items:last-child{
		border-bottom: none;
	}
	.jz_form .form-items .label{
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 60rpx;
		flex-shrink: 0;
	}
	.jz_form .form-items .val{
		flex:1;
	}
	.jz_ReserTop .o-timer{
		height: 100rpx;
		background: #ECF1F4;
		border-radius: 20rpx;
		padding: 0 40rpx;
		margin-bottom: 30rpx;
	}
	.jz_ReserTop .o-timer .time-item{
		font-size: 32rpx;
		font-weight: 800;
	}
/* 	.jz_ReserTop .o-timer .time-item:last-child{
		text-align: right;
	} */
	.jz_ReserTop .o-timer .time-split{
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
		margin:0 20rpx;
	}
	.jz_ReserTop .o-timer .update{
		font-size: 24rpx;
		font-weight: 400;
		text-align: right;
		
		color:#000;
		display: flex;
		align-items: center;
	}
	.jz_Reserve .flex{
		display: flex;
		align-items: center;
	}
	.jz_Reserve .big-title {
		position: relative;
	}
	
	.jz_Reserve .big-title::before {
		display: block;
		width: 71rpx;
		height: 12rpx;
		background: #DFBE6E;
		border-radius: 4rpx;
		content: ' ';
	
		position: absolute;
		left: 0;
		bottom: 6rpx;
		z-index: 1;
	}
	.jz_Reserve .big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1F1F1F;
		position: relative;
		z-index: 2;
	}
	.jz_Reserve .empty-block{
		height: 20rpx;
		background: #ECF1F4;
	}
	.jz_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%;
	}
	.jz_Reserve .grey{
		color:#6E6E6E !important
	}
	.jz_Reserve .f12 {
		font-size:24rpx !important;
	}
	.jz_Reserve .f11 {
		font-size:22rpx !important;
	}
	.jz_Reserve .f14 {
		font-size:28rpx !important;
	}
	.jz_Reserve .regular {
		font-weight: 500 !important;
	}
	.jz_Reserve .sheshi{
		margin-top: 50rpx;
	}
	.jz_Reserve .sheshi .she-title{
		font-size: 28rpx;
		font-weight: 800;
	}
	.jz_Reserve .sheshi .she-content{
		margin-top: 24rpx;
	}
	.jz_Reserve .sheshi .she-content text{
		
		font-size: 24rpx;
		font-weight: 500;
		color: #4A4A4A;
		line-height: 40rpx;
		margin-right: 24rpx;
	}
</style>
<template>
	<view class="jz_Reserve">
		<view class="jz_ReserTop">
			<view class="o-timer flex">
				<view class="time-item">{{getDate(currentPriceInfo.startDate)}} {{getWeek(currentPriceInfo.startDate)}}</view>
				<view class="time-split">
					<view>{{currentPriceInfo.dayNum}}天</view>
				</view>
				<view class="time-item" style="font-size: 26rpx;font-weight: 500;flex:1;">
					<text v-if="orderMsg.ManNum>0">{{orderMsg.ManNum}}成人</text>
					<text v-if="orderMsg.ChirdNoBedNum+orderMsg.ChirdNeedBedNum>0">{{orderMsg.ChirdNoBedNum+orderMsg.ChirdNeedBedNum}}儿童</text>
					<text v-if="orderMsg.BabyNum>0">{{orderMsg.BabyNum}}婴儿</text>
				</view>
				<view class="update" @click="updateUser">
					<text style="margin-right: 8rpx;">修改</text>
					<u-icon name="arrow" size="20" />
				</view>
			</view>
			<view class="jz_ReserTitle">
				{{currentPriceInfo.title}}
			</view>
			<view class="jz_ReserIn" style="margin:33rpx 0 18rpx 0">
				<!-- {{currentPriceInfo.startCityName}}出发 {{currentPriceInfo.startDate}} -->
				{{ltName}}
			</view>
			<view class="big-title">
				<text>{{currentPriceInfo.startCityName}}出发</text>
			</view>
			<view class="jz_ReseQue">
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png" />即时确认：本产品付款后可快速确认，放心期待您的旅行
			</view>
		</view>
		<view class="jz_form">
			<view class="form-items">
				<view class="label">游客姓名</view>
				<view class="val">
					<input type="text" v-model="contactName" placeholder="若是多人,输入代表人员即可" />
				</view>
			</view>
			<view class="form-items">
				<view class="label">联系电话</view>
				<view class="val">
					<input type="text" v-model="contactMobile" placeholder="输入电话号码" />
				</view>
			</view>
		</view>
		<view class="empty-block"></view>
		<!-- <view class="jz_ReseOrder">
			<view class="jz_ReDix">
				<view class="jz_RedixTitle">成人：</view>
				<u-number-box v-model="orderMsg.ManNum" :input-width="300" :input-height="60" @change="changeMan()"></u-number-box>
			</view>
			<view class="jz_ReDix">
				<view class="jz_RedixTitle">儿童不占床：</view>
				<u-number-box v-model="orderMsg.ChirdNoBedNum" :input-width="300" :input-height="60" @change="changeChirdNoBedNum()"></u-number-box>
			</view>
			<view class="jz_ReDix">
				<view class="jz_RedixTitle">儿童占床：</view>
				<u-number-box v-model="orderMsg.ChirdNeedBedNum" :input-width="300" :input-height="60" @change="changeChirdNeedBedNum()"></u-number-box>
			</view>
			<view class="jz_ReDix">
				<view class="jz_RedixTitle">婴儿：</view>
				<u-number-box v-model="orderMsg.BabyNum" :input-width="300" :input-height="60" @change="changeBabyNum()"></u-number-box>
			</view>
		</view> -->
		<view style="padding:50rpx 40rpx">
			<view class="big-title">
				<text>费用明细</text>
			</view>
			<view class="jz_form" style="margin:40rpx 0;padding: 0;">
				<view class="form-items">
					<view class="label">
						在线支付
					</view>
					<view class="val f14 regular" style="text-align: right;">
						<text style="margin-right: 30rpx;">{{total}}人</text>
						<text class="red">￥{{price}}</text>
					</view>
				</view>
				<view class="form-items" style="border-bottom: none;">
					<view class="label">
						明细
					</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;">{{orderMsg.ManNum}}人 × ¥{{$utils.getretailer()? currentPriceInfo.b2BPrice:currentPriceInfo.b2CPrice}}</view>
				</view>
				<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.ChirdNeedBedNum>0">
					<view style="flex:1">
						<text style="margin-right: 30rpx;">儿童(占床)</text>
					</view>
					<view style="text-align: right;">{{orderMsg.ChirdNeedBedNum}}人 × ¥{{($utils.getretailer()? currentPriceInfo.b2BPrice:currentPriceInfo.b2CPrice)+(currentPriceInfo.childNeedPrice?currentPriceInfo.childNeedPrice:0)}}</view>
				</view>
				<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.ChirdNoBedNum>0">
					<view style="flex:1">
						<text style="margin-right: 30rpx;">儿童(不占床)</text>
					</view>
					<view style="text-align: right;">{{orderMsg.ChirdNoBedNum}}人 × ¥{{($utils.getretailer()? currentPriceInfo.b2BPrice:currentPriceInfo.b2CPrice)-(currentPriceInfo.childNoNeedPrice?currentPriceInfo.childNoNeedPrice:0)}}</view>
				</view>
				<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.BabyNum>0">
					<view style="flex:1">
						<text style="margin-right: 30rpx;">婴儿</text>
					</view>
					<view style="text-align: right;">
						{{orderMsg.BabyNum}}人 × ¥{{currentPriceInfo.babyPrice?currentPriceInfo.babyPrice:0}}</view>
				</view>
				<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.ChirdNum>0&&currentPriceInfo.babyChargePrice&&currentPriceInfo.babyChargePrice>0">
					<view style="flex:1">
						<text style="margin-right: 30rpx;">儿童(附加费)</text>
					</view>
					<view style="text-align: right;">
						{{orderMsg.ChirdNum}}人 × ¥{{currentPriceInfo.babyChargePrice}}</view>
				</view>
			</view>
			
			
		</view>
		<view class="empty-block"></view>
		<view style="padding:50rpx 40rpx" v-if="tips!=''">
			<view class="big-title">
				<text>重要提醒</text>
			</view>
			<view class="sheshi">
				<view class="she-content">
					<text>{{tips}}</text>
				</view>
			</view>
		</view>
		<view class="jz_orderbox">
			<view class="jz_OrderDiv">
				<view style="color:#FF3166;font-weight:bold;">
					<text style="font-size:22rpx;">¥</text>
					<text style="font-size:40rpx;margin:0 20rpx 0 5rpx;">{{price}}</text>
					<text style="color:#6E6E6E;font-size:24rpx;">共计{{total}}人</text>
				</view>
				<view style="display:flex;margin-top:-2px;">
					<view class="jz_OrderReNow" @click="goPay()">
						<text v-if="!submit">立即支付</text>
						<u-loading v-if="submit" size="32" color="#f5f5f5"></u-loading>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				submit:false,
				pageTitle: '订单填写',
				orderMsg: {
					ManNum: 0, //成人
					ChirdNoBedNum: 0, //儿童不占床
					ChirdNeedBedNum: 0, //儿童占床
					BabyNum: 0, //婴儿
					ChirdNum: 0, //儿童数量
				},
				price: 0,
				currentPriceInfo: {},
				total: 0,
				YSeatNum:0,
				ESeatNum: 0,
				FSeatNum: 0,
				sumSeat:0,
				userInfo:{},
				ltName:'',
				tips:"",
				contactMobile:"",
				contactName:"",
				orderInfo:{},
				orderData:""
			};
		},
		created() {
			uni.setNavigationBarTitle({
				title:"订单支付预览"
			})
		},
		onLoad(option) {
			if (option.currentPriceInfo) {
				this.currentPriceInfo = JSON.parse(decodeURIComponent(option.currentPriceInfo))
				let t=JSON.parse(decodeURIComponent(option.seat))
				this.orderMsg.ManNum=t.crCount
				this.orderMsg.ChirdNeedBedNum=t.etCount
				this.orderMsg.ChirdNoBedNum=t.etbCount
				this.orderMsg.BabyNum=t.yeCount
				this.tips=decodeURIComponent(option.tips)
				this.calcMoney();
				this.ltName=option.ln
			}
		},
		methods: {
			updateUser(){
				uni.navigateBack({
					delta: 1,
				});
			},
			getWeek(date) {
				 var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				 var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Date
				 return '周'+week;
			},
			getDate(date){
				if(date){
					let arr = date.split('-');
					return arr[1]+'月'+arr[2]+'日'
				}
			},
			//改变成人
			changeMan(e) {
				this.orderMsg.ManNum = e.value;
				this.calcMoney();
			},
			//改变儿童不占床
			changeChirdNoBedNum(e) {
				this.orderMsg.ChirdNoBedNum = e.value;
				this.calcMoney();
			},
			//改变儿童占床
			changeChirdNeedBedNum(e) {
				this.orderMsg.ChirdNeedBedNum = e.value;
				this.calcMoney();
			},
			//改变婴儿
			changeBabyNum(e) {
				this.orderMsg.BabyNum = e.value;
				this.calcMoney();
			},
			//计算价格
			calcMoney() {
				var price=0;
				if(this.$utils.getretailer()){
					price = this.currentPriceInfo.b2BMemberPrice;
				}else{
					price = this.currentPriceInfo.b2CMemberPrice;
				}
				this.orderMsg.ChirdNum = parseInt(this.orderMsg.ChirdNoBedNum) + parseInt(this.orderMsg.ChirdNeedBedNum);
				//计算总人数
				this.total = parseInt(this.orderMsg.ManNum) + parseInt(this.orderMsg.ChirdNum);
				this.sumSeat = this.total;

				let money = price * this.orderMsg.ManNum
				money += price * this.orderMsg.ChirdNum
				money += (this.currentPriceInfo.babyChargePrice?this.currentPriceInfo.babyChargePrice:0) * this.orderMsg.ChirdNum
				money += (this.currentPriceInfo.babyPrice?this.currentPriceInfo.babyPrice:0) * this.orderMsg.BabyNum
				money += (this.currentPriceInfo.childNeedPrice?this.currentPriceInfo.childNeedPrice:0) * this.orderMsg.ChirdNeedBedNum
				if (this.orderMsg.ChirdNoBedNum > 0) {
					money -= (this.currentPriceInfo.childNoNeedPrice?this.currentPriceInfo.childNoNeedPrice:0) * this.orderMsg.ChirdNoBedNum
				}
				this.price = money

			},
			//去支付
			goPay() {
				if(this.contactName==''){
					uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					});
				}else if(this.contactMobile==''){
					uni.showToast({
						title: '请输入联系人电话',
						icon: 'none'
					});
				}else{
					this.submit=true
					this.userInfo = uni.getStorageSync('mall_UserInfo');
					this.basedataObj = uni.getStorageSync('basedata').mall;
					var CustomerId = 0;
					var ContactName = this.contactName;
					var ContactMobile = this.contactMobile;
					var CustomerType = 3;
					var price=0;
					if(this.$utils.getretailer()){
						CustomerId =  this.basedataObj.virtualB2BCustomerId;
						CustomerType = 1;
						price = this.currentPriceInfo.b2BMemberPrice;
					}else{
						price = this.currentPriceInfo.b2CMemberPrice;
					}
					let msg = {
						OrderId: 0,
						TCID: this.currentPriceInfo.tcid,
						CustomerType: CustomerType,
						GroupType: 1,
						ContactName: ContactName,
						ContactMobile: ContactMobile,
						CustomerId: CustomerId,
						DepartureCityId: 262,
						IsIntermodal: 2,
						Unit_Price: price,
						TC_Price: price,
						ManNum: this.orderMsg.ManNum,
						ChirdNum: this.orderMsg.ChirdNum,
						ChirdNeedBedNum: this.orderMsg.ChirdNeedBedNum,
						BabyNum: this.orderMsg.BabyNum,
						OldPeopleNum: 0,
						SingleRoomNum: 0,
						PreferPrice: this.price,
						YSeatNum: this.total,
						ESeatNum: 0,
						FSeatNum: 0,
						Commission: 0, //todo 提成
						ClientSource: 2,
						BrandId: 0,
						TradeWay: 0,
						PlatformOrder: '',
						GuestNum: this.orderMsg.ManNum + this.orderMsg.ChirdNum+this.orderMsg.BabyNum,
						IsChildrenTour: this.currentPriceInfo.isSupportChildren,
						IsBirdDiscount: this.zaoniao > 0 ? 1 : 2,
						PredictRoomNum: 1,
						BigRoomNum: 0,
						TripleRoomNum: 0,
						TradeDate: this.currentPriceInfo.startDate,
						CostType: 0,
						MinOrderPrice: 0,
						Remarks: '',
						VisaNum: this.orderMsg.ManNum + this.orderMsg.ChirdNum,
						SafeNum: this.orderMsg.ManNum + this.orderMsg.ChirdNum,
						AirticketNum: 0,
						ReturnArriveCityId: 262,
						IsReturnIntermodal: 2,
						GoCityTime: '',
						BackCityTime: '',
						ScenicRefundArr: [],
						CommissionSharePeople: 0,
						CommissionShareMoney: 0,
						OrderSource: 2,
						MiniAppUserId:this.userInfo.UserId
					}
					this.apipost("sellorder_post_SetOrderInfoForB2B", msg,
						res => {
							if (res.resultCode == 1) {
								let data = res.data;
								data.CoverImg = this.currentPriceInfo.CoverImg;
								let myData = JSON.stringify(data);
								this.orderData=encodeURIComponent(myData)
								this.queren(data.OrderId)
							} else {

							}
							this.submit=false
						},
						e=>{
							this.submit=false
						}
					);
				}
			},
			queren(OrderId){
				let url='/api/WeChatPay/GetTravlePayInfo'
				let GoodsName = this.currentPriceInfo.title;
					GoodsName = GoodsName.slice(0, 10)
				this.request2({
						url: url,
						data: {
							OrderId:OrderId,
							GoodsName:GoodsName,
							OrderPayType:1,
							OpenId:uni.getStorageSync('mall_UserInfo').OpenId,
						}
					},
					res => {
						this.orderInfo = JSON.parse(res.data);
						this.Pay(OrderId)
					}
				);
			},
			Pay(OrderId){
				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) {
						console.log('success', res);
						uni.showToast({
							title: "支付成功"
						})
						setTimeout(()=>{
							uni.redirectTo({
							  url: '/pages/jiuzhai/paysuccess?PreferPrice='+price
							});
						}, 100 )
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败",
							icon:"none"
						})
						setTimeout(()=>{
							uni.redirectTo({
								url: "/pages/jiuzhai/jz_SureOrder?orderId="+OrderId
							});
						}, 100 )
					}
				});
			}
		}

	};
</script>
