<style lang="scss" scoped>
    @import url("@/asset/css/flex.css");
    .name-ali {
		/*  #ifdef MP-ALIPAY */
		box-sizing: border-box;
		padding-left: 30rpx;
		/* #endif */
	}
    .top-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;
	}
    .jz_TopPrice {
		width: 100%;
		height: auto;
		background-color: #fff;
		position: relative;
		margin-top: -110rpx;
		border-radius: 60rpx 60rpx 0px 0px;
        overflow: hidden;
		z-index: 2;
		padding: 28rpx 31rpx 43rpx 31rpx;
	}
	.jz_Reserve {
		background-color: #ecf1f4;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.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_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 {
		/* #ifdef MP-ALIPAY */
		width: 150rpx;
		/* #endif */
		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;
		width: 115rpx;
	}

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

	.jz_GuestList {
		box-shadow: 0px 2px 15px 0px rgba(76, 76, 76, 0.13);
		padding: 20rpx;
		margin: 25rpx;
		border-radius: 25rpx;
	}

	.jz_GuestList .form-items:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.jz_TextArea {
		height: 50px;
		margin-bottom: 10px;
		width: auto;
		border: 1px solid #dfddd8;
		border-radius: 4px;
		margin: 25rpx;
		padding: 20rpx;
	}
	.visaConfirmOrder_Title{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #080A09;
		padding-top: 27rpx;
		padding-bottom: 22rpx;
		text-align: center;
	}
	.visaCustomerInfor_Title{
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #080A09;
		padding-bottom: 22rpx;
	}
	.visaProduct_l{
		width: 160rpx;
		min-height: 121rpx;
		border-radius: 13rpx;
		overflow: hidden;
		margin-right: 18rpx;
	}
	.visaProduct_r{
		letter-spacing: 2rpx;
	}

	.visaProduct_rTitle{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; 
		overflow: hidden;
	}
	.visaProduct_rTBox{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #080A09;
	}
	.visaProduct_rColor{
		color: #FF3166;
	}
	.visaProductNumBox{
		margin-top: 14rpx;
	}
	.visaProductNum{
		width: 336rpx;
		background: #F7F8FA;
		border-radius: 14rpx;
		padding: 14rpx 26rpx;
	}
	.visaProductNum_Title{
		font-weight: 500;
		font-size: 20rpx;
		color: #757776;
		padding-bottom: 12rpx;
	}
	.visaProductNumR{
		margin-left: 14rpx;
	}
	.visaProductTetx{
		font-size: 28rpx;
	}
	.visaProductTextBox{
		padding: 39rpx 0 21rpx 0;
		font-family: PingFang SC;
	}
	.visaProductTitle{
		font-weight: 800;
		font-size: 28rpx;
	}
	.visaProductTextL{
		font-size: 35rpx;
		font-weight: bold;
	}
	.visaProductTextR{
		font-size: 20rpx;
		margin-left: 24rpx;
	}
	.Updatecustomer{
		font-weight: bold;
		font-size: 24rpx;
		color: #080A09;
		padding-top: 36rpx;
	}
	.visaProductCount{
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.addPnum{
		padding: 9rpx 10rpx;
	}
	
</style>
<template>
	<view class="jz_Reserve" style="padding-bottom: 171rpx;">
		<scroll-view scroll-y="true" style="height: 1px; flex: 1; box-sizing: border-box;" @scroll="scroll">
			<view class="jz_TopImg">
				<view class="media" :style="{ opacity: 100 - boxOption + '%' }">
					<u-swiper :list="[dataList.CoverImageList[0]]" :effect3d="false" :height="535" :interval="5000" :border-radius="0"
					 name="Url"></u-swiper>
					<view class="sharebox" v-if=" hideshare == false && shareData && shareData.IsShow && (shareData.Data.MaxShare>0|| shareData.Data.MyBuyCommission>0)"
					 :style="{top:topheight+'px'}">
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view @click="updateUser" :style="[titleStyle, { opacity: '100% !important' }]" style="position: fixed; top: 0; left: 0; padding-left: 6rpx">
						<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx"></u-icon>
					</view>
					<!-- #endif -->
				</view>
				<view class="top-title" :style="[titleStyle]">
					<view @click="updateUser">
						<!-- #ifdef MP-WEIXIN -->
						<u-icon name="arrow-left" size="44"></u-icon>
						<!-- #endif -->
					</view>
					<view style="margin-left: 30rpx;text-align: left;width: 60vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; "
					 class="name-ali">{{ dataList.Name }}</view>
				</view>
			</view>
			<view class="jz_TopPrice">
                <view class="visaConfirmOrder_Title">确认订单</view>
                <view class="visaCustomerInfor_Title">客户资料</view>
				<view class="row visaProduct">
					<view class="visaProduct_l">
						<image style="width: 160rpx;height: 100%;" mode="aspectFill" :src="dataList.CoverImageList[0].Url"></image>
					</view>
					<view class="col column visaProduct_r">
						<view class="visaProduct_rTitle">{{ dataList.Name }}</view>
						<view class="row visaProduct_rTBox" style="padding: 17rpx 0 11rpx 0;"
						v-if="dataList.SendCityName||dataList.ManageDuration">
							<view class="" v-if="dataList.SendCityName" style="padding-right: 29rpx;">
								送签地：<text class="visaProduct_rColor">{{ dataList.SendCityName }}</text>
							</view>
							<view class="visaProduct_rColor" v-if="dataList.ManageDuration">
								收齐资料后需{{ dataList.ManageDuration }}个工作日
							</view>
						</view>
						<view class="visaProduct_rTBox" v-if="dataList.VisaValidity">
							有效期：<text class="visaProduct_rColor">{{ dataList.VisaValidity }}</text>
						</view>
					</view>
				</view>
				<view class="row visaProductNumBox">
					<view class="visaProductNum column">
						<view class="visaProductNum_Title">人数</view>
						<view class="row-sbas-n items-center">
							<view class="row-sbas-n items-center">
								<view class="addPnum" @click="orderMsg.AdultPeopleNum>1?editNum(1):''">
									<image v-if="orderMsg.AdultPeopleNum>1" style="width: 27rpx;height: 27rpx;display: block;" 
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638751245939665786.png" />
									<image v-else style="width: 27rpx;height: 27rpx;display: block;" 
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638755711218891689.png" />
								</view>
								<view class="col row items-center textCenter">
									<input type="number" class="visaProductTetx visaProduct_rColor" 
									v-model="orderMsg.AdultPeopleNum" 
									disabled
									placeholder="输入" />
								</view>
								<view class="addPnum" @click="editNum()">
									<image style="width: 27rpx;height: 27rpx;display: block;" 
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638751245974558349.png" />
								</view>
							</view>
							<view style="margin-left: 101rpx;">人</view>
						</view>
					</view>
					<view class="visaProductNum visaProductNumR column">
						<view class="visaProductNum_Title">入境日期</view>
						<picker class="visaProductTetx" mode="date" 
						v-model="orderMsg.EnterCountryTime" @change="bindDateChange"
						>
							<view class="row-sbas-n items-center">
								<view class="visaProductTetx">
									<template v-if="orderMsg.EnterCountryTime">
										{{ orderMsg.EnterCountryTime }}
									</template>
									<text v-else style="color: #757776;">选择日期</text>
								</view>
								<image style="width: 28rpx;height: 28rpx;display: block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638751246003757627.png" />
							</view>
						</picker>
					</view>
				</view>
				<view class="row items-center visaProductTextBox">
					<view class="visaProduct_rColor visaProductTextL">*</view>
					<view class="visaProductTitle">订购人信息</view>
					<view v-if="tipsText" class="row visaProduct_rColor visaProductTextR items-center">
						<view>{{tipsText}}</view>
						<img style="width: 19rpx;height: 19rpx;margin-left: 5rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638751271514841634.png"/>
					</view>
				</view>
				<view class="row visaProductNumBox">
					<!-- <view class="visaProductNum column">
						<view class="visaProductNum_Title">请输入名</view>
						<view class="row-sbas-n items-center">
							<input class="visaProductTetx" v-model="customer.customerName" />
						</view>
					</view> -->
					<view class="visaProductNum column">
						<view class="visaProductNum_Title">请输入姓名</view>
						<view class="row-sbas-n items-center">
							<input class="visaProductTetx" v-model="orderMsg.RelationName" />
						</view>
					</view>
					<view class="visaProductNum visaProductNumR column">
						<view class="visaProductNum_Title">国家/地区</view>
						<view class="row-sbas-n items-center" @click="CountryType=1,showCountry=true">
							<view class="visaProductCount">{{ optionsTitle[0] }}</view>
							<u-icon
							:name="CountryType==1&&showCountry?'arrow-up':'arrow-down'" 
                        	color="black" size="30" />
						</view>
					</view>
				</view>
				<view class="row visaProductNumBox">
					<view class="visaProductNum column">
						<view class="visaProductNum_Title">电话
							<text style="font-weight: bold;font-size: 20rpx;color: #B99846;">
								{{ customer.PhoneCountryStr }}
							</text>
						</view>
						<view class="row-sbas-n items-center">
							<input class="visaProductTetx" v-model="customer.contactNumber" />
						</view>
					</view>
					<view class="visaProductNum visaProductNumR column">
						<view class="visaProductNum_Title">邮箱地址</view>
						<view class="row-sbas-n items-center">
							<input class="visaProductTetx" v-model="customer.Mailbox" placeholder="输入邮箱地址"/>
						</view>
					</view>
				</view>
				<!-- <view class="row visaProductNumBox">
					
				</view> -->
				<view class="row items-center visaProductTextBox">
					<view class="visaProduct_rColor visaProductTextL"></view>
					<view class="visaProductTitle">收件信息</view>
				</view>
				<view class="row-aic-n visaProductNumBox" >
					<view class="visaProductNum column" style="width: 210rpx;">
						<view class="visaProductNum_Title">收件人</view>
						<view class="row-sbas-n items-center">
							<input class="visaProductTetx" v-model="orderMsg.Receiver" placeholder="输入收件人"/>
						</view>
					</view>
					<view class="row visaProductNumR col" style="width: auto;background: #F7F8FA;border-radius: 14rpx">
						<view class="visaProductNum column" style="width: 180rpx;">
							<view class="visaProductNum_Title">国家/地区</view>
							<view class="row-sbas-n items-center" @click="CountryType=2,showCountry=true">
								<view class="visaProductCount">{{ optionsTitle[1] }}</view>
								<u-icon
								:name="CountryType==2&&showCountry?'arrow-up':'arrow-down'" 
								color="black" size="30" />
							</view>
						</view>
						<view style="width: 1rpx;position: relative;">
							<view style="width: 1rpx;height:27rpx;background: #ddd;position: absolute;bottom:20rpx"></view>
						</view>
						<view class="visaProductNum column" style="width: 1px;flex: 1;">
							<view class="visaProductNum_Title">电话
								<text style="font-weight: bold;font-size: 20rpx;color: #B99846;">
									+ {{ orderMsg.RelationPhoneType }}
								</text>
							</view>
							<view class="row-sbas-n items-center">
								<input class="visaProductTetx" v-model="orderMsg.ReceiverPhone" placeholder="输入电话"/>
							</view>
						</view>
					</view>
				</view>
				<view class="row visaProductNumBox">
					<view class="visaProductNum column">
						<view class="visaProductNum_Title">省</view>
						<view class="row-sbas-n items-center" @click="showProvince=true">
							<view class="visaProductCount">
								<template v-if="optionsTitle[2]">
									{{ optionsTitle[2] }}
								</template>
								<text v-else style="color: #757776;">选择省</text>
							</view>
							<u-icon
							:name="CountryType==1&&showCountry?'arrow-up':'arrow-down'" 
                        	color="black" size="30" />
						</view>
					</view>
					<view class="visaProductNum visaProductNumR column">
						<view class="visaProductNum_Title">选择市</view>
						<view class="row-sbas-n items-center" @click="showCity=true">
							<view class="visaProductCount">
								<template v-if="optionsTitle[3]">
									{{ optionsTitle[3] }}
								</template>
								<text v-else style="color: #757776;">市</text>
							</view>
							<u-icon
							:name="CountryType==1&&showCountry?'arrow-up':'arrow-down'" 
                        	color="black" size="30" />
						</view>
					</view>
				</view>
				<view class="row visaProductNumBox">
					<view class="visaProductNum visaProductNumR column col" style="margin-left: 0;">
						<view class="visaProductNum_Title">详细地址</view>
						<view class="row-sbas-n items-center">
							<textarea class="visaProductTetx" auto-height v-model="orderMsg.ReceiverAddress" placeholder="输入详细地址"/>
						</view>
					</view>
				</view>
				<view class="row visaProductNumBox">
					<view class="visaProductNum visaProductNumR column col" style="margin-left: 0;">
						<view class="visaProductNum_Title">备注</view>
						<view class="row-sbas-n items-center">
							<textarea class="visaProductTetx" auto-height v-model="orderMsg.Remark" placeholder="输入备注"/>
						</view>
					</view>
				</view>
				<!-- <view style="height: 150rpx;"></view> -->
			</view>
			<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>

			<u-picker mode="selector" v-model="showProvince" :default-selector="[0]" 
			:range="provinceList" @confirm='(e)=>{changeDown(e,3)}'
		 	range-key="label" @input="showProvince=false"></u-picker>

			<u-picker mode="selector" v-model="showCity" :default-selector="[0]" 
			:range="cityList" @confirm='(e)=>{changeDown(e,4)}'
		 	range-key="label" @input="showProvince=false"></u-picker>
			<template v-if="couponList.length>0">

			<view class="empty-block"></view>
			<view style="padding: 50rpx 40rpx;background: #fff;">
				<view class="big-title">
					<text>优惠券</text>
				</view>
				<view style="margin-top: 30px;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>
							<!-- <u-icon name="ellipsis" size="36" v-if="couponList.length > 0"></u-icon> -->
						</text>
						<u-icon name="arrow" :size="32" color="#111" v-if="couponList.length>0"></u-icon>
					</view>
				</view>
			</view>
			<view class="empty-block"></view>

			
			<view class="empty-block"></view>
			</template>
			<coupon v-if="couponList.length > 0 && showCoupon" :price="price" :list="couponList" :current="useCouponIds" @close="closeCouponHandler" :current-price="realCurrentPriceInfo" :order="orderMsg"></coupon>
			<view style="padding: 50rpx 40rpx;background: #fff;" v-if="tips != ''&&tips!=null">
				<view class="big-title">
					<text>重要提示</text>
				</view>
				<view class="sheshi">
					<view class="she-content">
						<text>{{ tips }}</text>
					</view>
				</view>
			</view>

		
		</scroll-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;font-family: nav-font;">
					{{(price-currentCoupon.discountMoney).toFixed(2)}}</text>
					<text style="color: #6e6e6e; font-size: 24rpx;font-family: microsoft yahei ui light;">共计{{ orderMsg.AdultPeopleNum }}人</text>
				</view>
				<view style="display: flex; margin-top: -2px">
					<button class="jz_OrderReNow" @click="goPay()" :disabled="submit" :loading="submit">
						立即预定
					</button>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<subscribe-msg />
		<!-- #endif -->
		<u-popup v-model="showPz" mode="center" :mask-close-able="false" custom-style="padding:0;background:none;">
			<view style="height: 802rpx;width: 570rpx;">
				<view style="position: relative; width:100%;height:517rpx;background-repeat: no-repeat; background-size: 100% auto; background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638731507896933295.png);">
					<view style="position: absolute;top:233rpx;left:244rpx;">
						<text style="font-size: 89rpx;color: #FFFFFF;text-shadow: 0rpx 2rpx 7rpx rgba(144,5,0,0.44);">{{pzCoupon.expansionModel.denomination}}</text>
						<text style="font-weight: bold;font-size: 28rpx;color: #FFFFFF;margin-left: 6rpx;">元</text>
					</view>
					<view style="position: absolute;top:318rpx;left:82rpx;">
						<text style="font-size: 54rpx;color: #FF0063;text-shadow: 0rpx 2rpx 7rpx rgba(144,5,0,0.44);">
							{{pzCoupon.realDenomination}}
						</text>
						<text style="font-weight: bold;font-size: 22rpx;color: #FF0063;margin-left: 6rpx;">元</text>
					</view>
					<view style="position: absolute;top:380rpx;left:250rpx; text-align: center; width: 240rpx;">
						<text style="font-weight: bold;font-size: 24rpx;color: #FDE4D5;text-shadow: 0rpx 2rpx 0rpx rgba(67,12,7,0.17);">
							{{pzCoupon.remark}}
						</text>
					</view>
				</view>
				<view style="text-align: center;">
					<image @click="usePzCouponHandler" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638731507894902113.png" mode="widthFix" style="width: 281rpx;height: 123rpx;"></image>
				</view>
				<view style="text-align: center;margin-top: 106rpx;">
					<image @click="()=>showPz=false" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638731507894526128.png" mode="widthFix" style="width: 52rpx;height: 52rpx;"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import json from "../airTicket/components/sign/day.js";
	import coupon from '@/components/coupon/index';
	import { gegerateDates,getBeforeDate,getDateWeek } from "../airTicket/dates.js";
	export default {
		components: {
			coupon
		},
		data() {
			return {
				submit: false,
				pageTitle: "订单填写",
				lineId: 0,
				orderMsg: {
					IsNeedInvoice: 0,//	是否需要发票 ，0-默认	
					InvoiceName: '',//	发票名称		
					InvoiceType: 0,//	发票类型1-个人，2-企业，3-非企业性单位
					// InvoiceTypeObj:'',	
					DutyParagraph: '',//	税号		
					Receiver: '',//	收件人		
					ReceiverPhone: '',//	收件人电话		
					ReceiverProvince: '',//	收件人省		
					ReceiverProvinceId: '',
					// ReceiverProvinceObj: '',
					ReceiverCity: '',//	收件人市
					ReceiverCity: '',//	收件人市		
					ReceiverAddress: '',//	收件人地址		
					RelationPhoneType: 2,//	手机号码归属国家
					// RelationPhoneTypeObj: '',
					EnterCountryTime: '',//	入境时间
					AdultPeopleNum: 1,
					ChildPeopleNum: null,
					Remark: '',
					PeopleNum: 0,
					RelationName: '',
				},
				activity: {},
				price: 0,
				currentPriceInfo: {},
				total: 0,
				
				customer: {},
				tips: "",
				GuestList: [],
				couponList: [],
				showCoupon: false,
				useCouponIds: [],
				currentCoupon: {
					discountMoney: 0
				},
				mainColor: '',
				realCurrentPriceInfo: {},
				customer: {},
				CreateBy: 0,
				showPz:false,
				pzCoupon:null,
				boxOption: 0,
                titleStyle: {},
                dataList: {},
				optionsTitle: ['','','',''],
				areaCodes: [],
				countrys: [],
				showCountry: false,
				CountryType: 1,
				showProvince: false,
				showCity: false,
				provinceList: [],
				cityList: [],
				tipsText: '',
				userInfo:{},
			};
		},
		created() {
			uni.setNavigationBarTitle({
				title: "订单支付预览",
			});
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
		},
		onLoad(option) {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: 0,
					};
					that.topheight = 55 + res.statusBarHeight
				},
			});
			this.mainColor = this.$uiConfig.mainColor;

			this.customer = uni.getStorageSync("b2b_user");
			this.customer.Mailbox = ''
			this.calcMoney()
			if (option.id) {
				this.orderMsg.Pid = option.id
				this.getDetails(option.id);
			}
			if (option.CreateBy) {
				this.CreateBy = option.CreateBy
			}
			this.getUserCouponList();
			this.initCountry()
		},
		methods: {
			editNum(type) {
				if (type == 1) {
					if(this.orderMsg.AdultPeopleNum>1)this.orderMsg.AdultPeopleNum--;	
				}else {
					this.orderMsg.AdultPeopleNum++;	
				}	
				this.calcMoney()
			},
			//市
			getCity() {
				this.apipost('dict_post_Destination_GetChildList', {
					Id: this.orderMsg.ReceiverProvinceId,
					"level": 2
				}, r => {
					if (r.resultCode == 1) {
						this.cityList = []
						for (let i = 0; i < r.data.length; i++) {
							let Count = r.data[i]
							let obj = {
								...Count,
								value: Count.ID,
								label: Count.Name,
							}
							this.cityList.push(obj)
						}
					}
				}, err => {})
			},
			changeDown(e,type){
				let i = [e]
				if(type == 1){
					this.customer.count = this.countrys[i].ID
					this.optionsTitle[0] = this.countrys[i].Name
					this.customer.PhoneCountryStr = '+'+this.countrys[i].PhoneCode
				}
				if(type == 2){
					this.orderMsg.RelationPhoneType = '+'+this.countrys[i].PhoneCode
					this.optionsTitle[1] = this.countrys[i].Name
				}
				if(type == 3){
					this.orderMsg.ReceiverProvince = this.provinceList[i].Name
					this.orderMsg.ReceiverProvinceId = this.provinceList[i].ID
					this.optionsTitle[2] = this.provinceList[i].Name
					this.orderMsg.ReceiverCity = ''
					this.optionsTitle[3] = ''
					this.getCity()
				}
				if(type == 4){
					this.orderMsg.ReceiverCity = this.cityList[i].Name
					this.optionsTitle[3] = this.cityList[i].Name
				}
			},
			initCountry() {
				this.apipost('dict_post_Destination_GetChildList', {
					Id: 2,
					"level": 1
				}, r => {
					if (r.resultCode == 1) {
						for (let i = 0; i < r.data.length; i++) {
							let Count = r.data[i]
							let obj = {
								...Count,
								value: Count.ID,
								label: Count.Name,
							}
							this.provinceList.push(obj)
						}
					}
				}, err => {})
				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)
					}
					if(!this.customer.count){
						this.customer.count = this.countrys[0].ID;
						this.optionsTitle[0] = this.countrys[0].Name
						this.customer.PhoneCountryStr = '+'+this.countrys[0].PhoneCode
					}
					
					this.orderMsg.RelationPhoneType = this.countrys[0].PhoneCode;
					this.optionsTitle[1] = this.countrys[0].Name
					this.areaCodes = r.data.phoneCountList;
					this.changeCountry(this.customer.count);
					this.areaCodes.forEach((x) => {
						let temp = this.countrys.find((y) => y.ID == x.ID);
						x.EnName = `${temp.EnName}(${x.PhoneCode})`;
					});
					this.customer.count =
					this.customer.count == 0
						? this.countrys[0].ID
						: this.customer.count;
					this.changeCountry(this.customer.count);
				});
			},
			changeCountry(id) {
				this.customer.PhoneCountry = this.areaCodes.find(
					(x) => x.ID == id
				).PhoneCode;
				this.customer.PhoneCountryStr = "+" + this.customer.PhoneCountry;
			},
			bindDateChange(e) {
				let dates = getBeforeDate(-this.dataList.BookAdvance, new Date())
				if(e.detail.value<dates){
					uni.showToast({
						title: `请选择大于等于${dates}的日期`,
						icon: "none",
					});
					return;
				}
				this.orderMsg.EnterCountryTime =  e.detail.value
			},
			scroll(e) {
				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();
			},
			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;
			},
			getUserCouponList() {
				let couponParams = {
					"lineId": '', //线路ID
					"lineteamId": 0, //系列ID
					"userId": this.customer.accountId, 
					"CouponsUseScope": 3, //特定使用平台(当地游=8   跟团游=2 小包团=10)
					"isExpansion": 0, //是否启动膨胀金1-是
					"CustomerType": 0, //客户类型 0-同行，1-直客
					"TCID": '',
				}
				this.apipost(
					"coupon_post_GetUserCanUseCouponList", couponParams,
					(res) => {
						if (res.resultCode == 1) {
							console.log("coupon_post_GetUserCanUseCouponList_res", res);
							this.couponList = res.data
							this.calcPzCouponHandler()
						}
					},
					(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
			},
			changecheckbox(e, index, item) {
				if (item.IsHightSchool) {
					let newObj = JSON.parse(JSON.stringify(item));
					newObj.IsHightSchool = false;
					this.$set(this.GuestList, index, newObj);
				} else {
					let newObj = JSON.parse(JSON.stringify(item));
					newObj.IsHightSchool = true;
					this.$set(this.GuestList, index, newObj);
				}
			},
			//获取详情
			getDetails(id) {
				uni.showLoading({
					title: '加载中'
				});
				this.apipost(
					"b2c_get_GetB2CVisaProductInfo", {
						Pid: id,
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
                            this.dataList = res.data
							this.tips = res.data.VisaProductInfo.ImportantTip;
							let dates = getBeforeDate(-res.data.BookAdvance, new Date())
							
							this.orderMsg.EnterCountryTime = dates
							this.calcMoney()
							// this.getCouponActivityHandler(res.data)
						}
					},
					(err) => {
						uni.hideLoading()
					}
				);
			},
			getCouponActivityHandler(d) {
				uni.hideLoading();
				let msg = {
					TCID: d.currentPriceInfo.tcid,
					CustomerId: this.customer.customerId,
					OrderId: 0,
					StratDate: d.currentPriceInfo.startDate,
					OrderGuest: this.total,
					lineId: d.lineId
				}
				this.apipost("coupon_post_GetAutoCouponOrder", msg, (res) => {
						if (res.resultCode == 1) {
							this.activity = res.data
						}
					},
					(err) => {
						uni.hideLoading()
					}
				);
			},
			updateUser() {
				uni.navigateBack({
					delta: 1,
				});
			},
			//计算价格
			calcMoney() {
				var price = 0;
				// #ifdef MP-DI
				price = this.dataList.VisaB2CPrice;
				// #endif
				// #ifdef MP-AG
					price = this.dataList.VisaPrice;
				// #endif
				let money = price * this.orderMsg.AdultPeopleNum;

				this.price = money;
			},
			//去支付
			goPay() {
				if (this.orderMsg.EnterCountryTime == "") {
				    uni.showToast({
				      title: `请选择入境日期`,
				      icon: "none",
				    });
				    return;
				}
				this.tipsText = ''
				if (this.orderMsg.RelationName == "") {
					this.tipsText = '请输入姓名'
				    return;
				}
				if (this.customer.PhoneCountryStr == "") {
					this.tipsText = '请选择国家/地区'
				    return;
				}
				if (this.customer.contactNumber == "") {
					this.tipsText = '请输入电话'
				    return;
				}
				if (this.customer.contactNumber&&this.customer.contactNumber.length<11) {
					this.tipsText = '请输入正确的电话'
				    return;
				}
				if (this.customer.Mailbox == "") {
					this.tipsText = '请输入邮箱地址'
					uni.showToast({
				      title: `请输入邮箱地址`,
				      icon: "none",
				    });
				    return;
				}
				let  email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
				if (!email.test(this.customer.Mailbox)) {
					this.tipsText = '请输入正确的邮箱地址'
					uni.showToast({
				      title: `请输入正确的邮箱地址`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.Receiver == "") {
				    uni.showToast({
				      title: `请输入收件人`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.RelationPhoneType == "") {
				    uni.showToast({
				      title: `请选择收件人国家/地区`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.ReceiverPhone == "") {
				    uni.showToast({
				      title: `请输入收件人电话`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.ReceiverPhone&&this.orderMsg.ReceiverPhone.length<11) {
					uni.showToast({
				      title: `请输入正确的收件人电话`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.RelationPhoneType == "") {
				    uni.showToast({
				      title: `请选择收件人国家/地区`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.ReceiverProvince == "") {
				    uni.showToast({
				      title: `请选择省`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.ReceiverCity == "") {
				    uni.showToast({
				      title: `请选择市`,
				      icon: "none",
				    });
				    return;
				}
				if (this.orderMsg.ReceiverAddress == "") {
				    uni.showToast({
				      title: `请输入收件人地址`,
				      icon: "none",
				    });
				    return;
				}
				// #ifdef MP-AG
					if(!this.CreateBy){
						uni.showToast({
						title: `服务人员为空，请联系服务人员！`,
						icon: "none",
						});
						return
					}
				// #endif
				
				this.submit = true;
				let mall_customer = uni.getStorageSync("mall_customer");
				this.basedataObj = uni.getStorageSync("basedata").mall;

				var price = (this.price-this.currentCoupon.discountMoney).toFixed(2)
				let CouponAllotIds = ''
				if(this.useCouponIds.length>0){
					CouponAllotIds = this.useCouponIds.join(',')
				}
				let msg = {
					Id: 0,
					VisaId: this.orderMsg.Pid,
					AdultPeopleNum: this.orderMsg.AdultPeopleNum,//大人
					ChildPeopleNum: '',//小孩
					TotalPrice: this.price,//总价
					CustomerId: this.customer.customerId,//客户id
					CreateBy: this.CreateBy,//销售
					// #ifdef MP-DI
					OrderSource: 7,
					// #endif
					// #ifdef MP-AG
					OrderSource: 5,//1-ERP,2-B2B订单，3-B2C订单，4wap 5同业  6支付宝
					// #endif
					EnterCountryTime: this.orderMsg.EnterCountryTime,//入境时间
					GuestList: [],//this.guests
					VisaOrderRelation:{
						RelationName: this.orderMsg.RelationName ,//customer.customerName   customer.name联系名称	
						RelationPhone: this.customer.contactNumber,//	电话	
						RelationEmail: this.customer.Mailbox,//	邮箱		
						IsNeedInvoice: this.orderMsg.IsNeedInvoice,//	是否需要发票 ，0-默认	
						InvoiceName: this.orderMsg.InvoiceName,//	发票名称		
						InvoiceType: this.orderMsg.InvoiceType,//	发票类型1-个人，2-企业，3-非企业性单位	
						DutyParagraph: this.orderMsg.DutyParagraph,//	税号		
						Receiver: this.orderMsg.Receiver,//	收件人		
						ReceiverPhone: this.orderMsg.ReceiverPhone,//	收件人电话		
						ReceiverProvince: this.orderMsg.ReceiverProvince,//	收件人省		
						ReceiverCity: this.orderMsg.ReceiverCity,//	收件人市		
						ReceiverAddress: this.orderMsg.ReceiverAddress,//	收件人地址		
						RelationPhoneType: this.orderMsg.RelationPhoneType,//	手机号码归属国家
					},
					OrderForm: 0,//1电脑端
					// #ifdef MP-DI
					ClientType: 2,//客户类型 1同业 2直客
					// #endif
					// #ifdef MP-AG
					ClientType: 1,
					// #endif
					Remark: this.orderMsg.Remark,
					CouponAllotIds: CouponAllotIds,
				};
				this.apipost(
					"b2b_get_SetB2BVisaOrder",
					msg,
					(res) => {
						if (res.resultCode == 1) {
							if (this.isUpdateUserInfo) {
								this.setUserInfoHandler();
							}
							const tempData = res.data
							if(tempData.CounponList && tempData.CounponList.length>0){
								uni.setStorageSync('coupons',tempData.CounponList)
							}
							uni.showToast({
								title: '订单创建成功.',
								icon: 'none'
							})
							uni.redirectTo({
								url: "/pages/visa/visa_MyOrder",
							});
						} else {
							uni.showToast({
								title:res.message,
								icon:'none',
								duration:3000
							})
						}
						this.submit = false;
					},
					(e) => {
						this.submit = false;
						uni.showToast({
							title:e.message,
							icon:'none',
							duration:3000
						})
					}
				);
			},
			setUserInfoHandler() {
				this.apipost("UpdateUserInfo_post", {
					Mailbox: '',
					Surname:'',//姓，
					Name:'',//名，
					EnSurname:'',//英文-姓，
					EnName:'',//英文名，
					Moblie:'',//手机号码，
					Countr:'',//国家，
					Appellation:'',//称谓，
					PhoneCountry:'',//手机号所属国家，
					BirthDate:'',//生日
				}, (r) => {
					console.log(r,'-----同步会员接口');
				});
			},
			// #ifdef MP-WEIXIN
			//微信支付
			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_customer").OpenId,
						},
					},
					(res) => {
						try {
							this.orderInfo = JSON.parse(res.data);
							// this.Pay(OrderId);
							this.subscribeMsg(OrderId);
						} catch (e) {
							uni.showToast({
								title: '无法正常拉取微信支付，你可以稍后重试或联系销售人员线下转款',
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/jiuzhai/jz_SureOrder?orderId=" + OrderId
								});
							}, 1000);
						}
					},
					(err) => {
						console.log(err)
					}
				);
			},
			subscribeMsg(OrderId) {
				const that = this;
				let tempObj = [];
				var basedataObj = uni.getStorageSync("basedata");
				if (basedataObj && basedataObj.mall && basedataObj.mall.wechatmessage && basedataObj.mall.wechatmessage.length > 0) {
					tempObj = basedataObj.mall.wechatmessage;
				}
				let tmplIds = [];
				if (tempObj && tempObj.length > 0) {
					tempObj.forEach((x) => {
						if (x.Name == "下单成功提醒" || x.Name == "订单取消提醒") {
							tmplIds.push(x.MessageId);
						}
					});
				}
				uni.requestSubscribeMessage({
					tmplIds: tmplIds,
					complete(res) {
						that.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=" +
									this.price +
									"&isFrom=1",
							});
						}, 100);
					},
					fail: function(err) {
						console.log("fail:", err);
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/jiuzhai/jz_SureOrder?orderId=" + OrderId,
							});
						}, 100);
					},
				});
			},
			// #endif
			// #ifdef MP-ALIPAY
			//支付宝支付
			querenAli(data) {
				let that = this;
				uni.showLoading({
					title: "支付中",
				});
				let url = "/api/WeChatPay/GetTravlePayInfo";
				let GoodsName = this.currentPriceInfo.title;
				this.request2({
						url: url,
						data: {
							OrderId: data.OrderId,
							GoodsName: GoodsName,
							OrderPayType: 2,
							OpenId: uni.getStorageSync("mall_customer").OpenId,
						},
					},
					(res) => {
						this.orderInfo = JSON.parse(res.data);
						if (res.data) {
							that.$utils.SubscribeMsgAli(() => {
								that.PayAli(res.data, data);
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: "获取交易号失败",
								duration: 2000,
							});
						}
					}
				);
			},
			PayAli(tradeNO, data) {
				let that = this;
				my.tradePay({
					tradeNO: tradeNO,
					success: function(res) {
						console.log("success", res);
						const list = ["9000"];
						if (list.includes(res.resultCode)) {
							let cbObj = {
								TradeNo: tradeNO,
								OrderNo: data.OrderNo,
								OrderId: data.OrderId,
								preferPrice: data.PreferPrice,
							};
							that.payAliCallback(cbObj);
						} else {
							uni.hideLoading();
							uni.showToast({
								title: "支付失败",
								icon: "none",
							});
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/jiuzhai/jz_MyOrder",
								});
							}, 1000);
						}
					},
					fail: function(err) {
						console.log("fail:", err);
						uni.hideLoading();
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/jiuzhai/jz_MyOrder",
							});
						}, 1000);
					},
				});
			},
			payAliCallback(obj) {
				this.request2({
						url: "/api/AliPay/ALiPayCallBackDmcNotify",
						data: {
							OrderNo: obj.OrderNo,
							OrderId: obj.OrderId,
							UserId: uni.getStorageSync("mall_customer").UserId,
							TradeNo: obj.TradeNo,
							ProjectType: 2,
							PreferPrice: obj.preferPrice,
						},
					},
					(res) => {
						console.log("cb", res);
						this.submit = false;
						uni.redirectTo({
							url: "/pages/jiuzhai/paysuccess?PreferPrice=" +
								obj.preferPrice +
								"&isFrom=1",
						});
						uni.hideLoading();
					},
					(err) => {
						this.submit = false;
						console.log("cb2", err);
						uni.hideLoading();
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/jiuzhai/jz_MyOrder",
							});
						}, 1000);
					}
				);
			},
			// #endif
		},
	};
</script>
