<template>
	<view class="content">
		<view class="paymentTop">
			<view class="paymentTop-name">
				需支付金额（元）
			</view>
			<view class="paymentTop-price">
				<text>￥</text>{{applyData.price}}
			</view>
			<view class="paymentTop-text">
				与人方便,与己方便,珍惜时间,请先付款
			</view>
		</view>
		<view class="paymentList">
			<view class="paymentList-label" v-if="couponData" @click="payType('coupon')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/payCoupon.png" mode="widthFix"></image>抵值券
				</view>
				<view class="paymentList-right" @click="couponState = true">
					<view class="paymentList-tips" v-if="Payment == 'wechat'">
						使用优惠券
					</view>
					<view class="paymentList-price" v-else>{{couponData.price}}元</view>
					<image class="paymentList-img" :src="Payment == 'coupon' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="paymentList-label" @click="payType('wechat')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/payWechat.png" mode="widthFix"></image>微信支付
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" :src="Payment == 'wechat' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="paymentList-label" @click="payType('umsMp')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/minPay.png" mode="widthFix"></image>微信支付（银联商务）
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" :src="Payment == 'umsMp' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="paymentList-label" @click="payType('dgwx')" >
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/minPay.png" mode="widthFix"></image>微信支付（汇付）
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" :src="Payment == 'dgwx' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="paymentList-label" @click="payType('umsAli')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/aliPay.png" mode="widthFix"></image>支付宝（银联商务）
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" :src="Payment == 'umsAli' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="paymentList-label" @click="payType('dgAli')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/aliPay.png" mode="widthFix"></image>支付宝（汇付）
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" :src="Payment == 'dgAli' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="paymentBtn" v-if="Payment == 'umsMp'">
			<!-- web.douhuotest.douhuofalv dev=0是线上  dev=1是线下 -->
			<wx-open-launch-weapp
				username="gh_918c81628d6f"
				:path="'pages/pay/pay?type=h5&dev=1&trade_id=' + tradeId + '&token=' + token"
			>
				<script type="text/wxtag-template">
					<style>
						.gobtn {
							width: 280px;
							background-color: #da2b56;
							color: #ffffff;
							border-radius: 5px;
							height: 50px;
							line-height: 50px;
							font-size: 18px;
							border: none;
						}
					</style>
					<button type="default" class="gobtn">打开小程序收银台</button>
				</script>
			</wx-open-launch-weapp>
		</view>
		
		<view class="paymentBtn" v-else-if="Payment == 'dgwx'">
			<button type="default" class="paymentBtn-go" :disabled="disabled" @click="payChickDg">
				打开小程序收银台
			</button>
		</view>
		
		<view class="paymentBtn" v-else>
			<button class="paymentBtn-go" type="default" @click="payClick" :disabled="disabled">立即支付</button>
		</view>
		
		<!-- 抵值券选择 -->
		<view class="couponPop" v-if="couponState"></view>
		<view class="couponEject" :class="{active: couponState}">
			<image class="couponClose" src="@/static/imgs/payClose.png" mode="widthFix" @click="couponState = false"></image>
			<view class="couponEject-title">
				抵值券选择
			</view>
			<scroll-view class="couponEject-list" scroll-y="true" show-scrollbar="false">
				<view class="couponEject-label" v-for="(item, index) in couponArr" :key="index" @click="selectClick(index)">
					<image class="couponSelect" :src="!item.state ? '/static/imgs/paySelect.png' : '/static/imgs/paySelect_active.png'" mode="aspectFill"></image>
					<view class="couponEject-top">
						<view class="couponEject-number">
							{{item.price}}<text>元</text>
						</view>
						<view class="couponEject-head">
							{{item.title}}
							<view class="couponEject-clue">{{item.price_text}}</view>
						</view>
					</view>
					<view class="couponEject-bottom">
						<view class="couponEject-tips">
							抵值券
						</view>
						<view class="couponEject-time">
							{{item.time.interval}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="couponBtn" @click="couponGo">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import { Apply, Wechat } from '@/apis/interfaces/index'
	import { ums, umsState, umsDg } from '@/apis/interfaces/pay'
	export default {
		data() {
			return {
				token		: '',	 	// 登录token
				tradeId		: '',	 	// 微信支付id
				jumpUrlDg   : '',    // 抖巩支付
				Payment 	: 'wechat', // 支付类型
				applyData	: '',    	// 支付数据
				orderNo	    : '',    	// 订单
				couponState : false, 	// 优惠券弹出层
				couponData  : '',    	// 优惠券
				couponArr	: [],    	// 优惠券列表
				disabled    : false, 	// 按钮状态
				getState	: false, 	// 获取订单状态
			}
		},
		onShow() {
			if(this.getState && this.tradeId != ''){
				this.getUmsState(this.tradeId)
			}
			this.token = this.$store.getters.getToken
			this.applyInfo();
		},
		methods: {
			// 查询支付状态
			getUmsState(tradeId){
				uni.showLoading({
					title: '查询支付结果...',
					mask : true
				})
				let outTime;
				let resNumb = 0;
				outTime = setInterval(() => {
					if(resNumb >= 3){
						clearInterval(outTime)
						uni.hideLoading()
						uni.showToast({
							title: "查询支付结果失败",
							icon : "none",
							mask : true
						})
						return
					}
					umsState(tradeId).then(res => {
						resNumb++
						if(res.state === 'success'){
							clearInterval(outTime)
							uni.hideLoading()
							this.$Router.replace({name: 'sheetPoint'})
						}
					}).catch(err => {
						clearInterval(outTime)
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
				}, 2000)
			},
			// 获取9.9预约
			applyInfo() {
			    Apply(this.$Route.query.id).then(res => {
					let newCoupons = res.coupons
					newCoupons.forEach((item, index) => {
						item.state = false
					})
					this.couponData = res.coupon
					this.couponArr  = newCoupons
					this.applyData	= res.apply
					this.orderNo 	= res.apply.order_no
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 选择支付方式
			payType(type) {
				if(this.Payment === type) return
				this.Payment = type
				if(type === 'umsMp'){
					uni.showLoading({
						title: '加载中...',
						mask : true
					})
					this.UMSPay()
				} else if(type === 'dgwx') {
					uni.showLoading({
						title: '加载中...',
						mask : true
					})
					this.dgwxPay()
				}
			},
			
			// 斗拱微信支付
			dgwxPay(){
				let payType = this.Payment == 'dgwx' ? 'mp' : 'mp_alipay'
				umsDg(this.orderNo, {type: payType, app_schema: 'weixin://'}).then(res => {
					let { params, trade_id } = res;
					this.getState = true
					switch (payType){
						case 'mp':
							this.tradeId = trade_id
							this.jumpUrlDg = JSON.parse(params.miniapp_data)
							this.Payment = 'dgwx'
							break;
						case 'mp_alipay':
							this.tradeId = trade_id
							window.location.href = `https://ds.alipay.com/?scheme=` + encodeURIComponent(params.jump_url)
							this.Payment = 'dgwxalipay'
							break;
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 新银联商务支付
			UMSPay(){
				let payType = this.Payment == 'umsMp' ? 'mp' : 'mp_alipay'
				ums(this.orderNo, {type: payType}).then(res => {
					this.getState = true
					switch (payType){
						case 'mp':
							this.tradeId = res.trade_id
							break;
						case 'mp_alipay':
							this.tradeId = res.trade_id
							window.location.href = res.alipay
							break;
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 抖供支付
			payChickDg() {
				window.location.href = this.jumpUrlDg.scheme_code
			},
			
			// 微信支付
			payClick() {
				if(this.Payment === 'umsMp' || this.Payment === 'umsAli'){
					this.UMSPay()
					return
				} else if (this.Payment === 'dgwx' || this.Payment === 'dgAli') {
					this.dgwxPay()
					return
				}
				let newCouponid
				if(this.Payment == 'coupon') {
					newCouponid = this.couponData.coupon_grant_id
				} else {
					newCouponid = ''
				}
				Wechat(this.orderNo, {
					coupon_grant_id	: newCouponid,
					openid  		: this.$store.getters.getOpenId
				}).then(res => {
					// 直接跳到列表
					if(res.canPay == false) {
						this.disabled = true
						uni.showToast({
							title: '支付成功',
							icon: "none"
						})
						setTimeout(()=>{
							this.$Router.replace({name: 'User'})
						},3000)
						return
					}
					// 跳支付
					let wxConfig = JSON.parse(res.wechat)
					this.$wx.chooseWXPay({
						timestamp: wxConfig.timeStamp,
						nonceStr: wxConfig.nonceStr, 
						package: wxConfig.package,
						signType: wxConfig.signType,
						paySign: wxConfig.paySign,
						success: payRes => {
							uni.showToast({
								title: '支付成功',
								icon: "none"
							})
							this.disabled = true
							// 先跳支付成功
							setTimeout(()=>{
								this.$Router.replace({name: 'sheetPoint'})
							},2000)
						},
						cancel: payCancel => {
							// 跳到个人中心
							this.$Router.replace({name: 'User'})
							this.disabled = true
						},
						fail: payfail => {
							uni.showToast({
								title: '取消支付',
								icon: 'none'
							})
							this.disabled = true
							setTimeout(()=>{
								this.$Router.replace({name: 'User'})
							},1000)
						}
					});
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			
			// 优惠券-点击
			selectClick(index) {
				var listData = this.couponArr
				var helpFlag = this.couponArr[index].state
				listData.forEach((item) => {
					item.state = false
				})
				listData[index].state = !helpFlag
				this.couponArr = listData
				this.couponIndex = index
			},
			
			// 选择优惠券
			couponGo() {
				if(this.couponArr[this.couponIndex]) {
					this.couponData = this.couponArr[this.couponIndex]
					this.couponState = false
					return
				}
				uni.showToast({
				    title: '请选择抵值券',
				    icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	    background: #f4f4f4;
		height: 100vh;
		// height: calc(100vh - 44px);
		overflow-y: scroll;
	}
	
	.paymentTop {
		padding: $padding * 4 $padding;
		box-sizing: border-box;
		text-align: center;
		color: #666666;
		.paymentTop-name {
			padding-left: $padding;
			box-sizing: border-box;
		}
		.paymentTop-price {
			color: $mian-color;
			font-size: $title-size + 40;
			font-weight: 600;
			margin: $margin - 10 0;
			text {
				font-size: $title-size + 10;
			}
		}
	}
	
	.paymentList {
		padding: 0 $padding;
		box-sizing: border-box;
		.paymentList-label {
			background-color: #ffffff;
			border-radius: $radius;
			padding: $padding + 10 $padding;
			box-sizing: border-box;
			margin-bottom: $margin + 10;
			display: flex;
			.paymentList-left {
				flex: 1;
				display: flex;
				line-height: 40rpx;
				.paymentList-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: $margin - 10;
				}
			}
			.paymentList-right {
				display: flex;
				.paymentList-price {
					color: $mian-color;
					font-weight: 600;
				}
				.paymentList-tips {
					background-image: linear-gradient(to left, #FF4646, #FF7676);
					height: 44rpx;
					line-height: 44rpx;
					font-size: $title-size-sm;
					color: #ffffff;
					opacity: .9;
					border-radius: $radius * 2;
					padding: 0 10rpx;
				}
				.paymentList-arrow {
					width: 14rpx;
					margin: 10rpx 0 0 20rpx;
				}
				.paymentList-img {
					width: 32rpx;
					height: 32rpx;
					margin-top: 4rpx;
					margin-left: $margin;
				}
			}
		}
	}
	
	.paymentBtn {
		text-align: center;
		padding: 0 $padding 100rpx;
		box-sizing: border-box;
		width: 100%;
		.paymentBtn-go {
			position: relative;
			width: 280px;
			background-color: #da2b56;
			color: #ffffff;
			border-radius: 5px;
			height: 50px;
			line-height: 50px;
			font-size: 18px;
			&[disabled] {
				background-color: #eba5a5;
			}
		}
	}
	
	// 弹出层
	.couponPop {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 11;
	}
	
	.couponEject {
		position: fixed;
		width: 100vw;
		height: 70vh;
		left: 0;
		bottom: -1000%;
		background-color: #ffffff;
		z-index: 12;
		padding: $padding $padding + 20;
		box-sizing: border-box;
		border-radius: $radius + 10 $radius + 10 0 0;
		transition: .2s;
		&.active {
			bottom: 0;
		}
		.couponClose {
			position: absolute;
			right: $margin + 10;
			top: $margin + 10;
			width: 40rpx;
			height: 40rpx;
		}
		.couponEject-title {
			text-align: center;
			font-size: $title-size + 4;
			height: 60rpx;
		}
		.couponEject-list {
			height: calc(100% - 200rpx);
			overflow-y: scroll;
			overflow: hidden;
			margin-top: $margin;
			.couponEject-label {
				background-color: #FFF5EA;
				border-radius: $radius;
				margin-bottom: $margin;
				position: relative;
				&::after,
				&::before {
					position: absolute;
					content: '';
					bottom: 80rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #ffffff;
				}
				&::after {
					left: -15rpx;
				}
				&::before {
					right: -15rpx;
				}
				.couponSelect {
					position: absolute;
					right: 30rpx;
					top: 20%;
					width: 32rpx;
					height: 32rpx;
				}
				.couponEject-top,
				.couponEject-bottom {
					display: flex;
				}
				
				.couponEject-top {
					padding: $padding 0;
					box-sizing: border-box;
					.couponEject-number {
						width: 220rpx;
						text-align: center;
						font-size: $title-size + 25;
						text {
							font-size: $title-size-m;
							padding-left: 5rpx;
						}
					}
					.couponEject-head {
						width: calc(100% - 220rpx);
						padding-left: $padding + 10;
						box-sizing: border-box;
						border-left: 2rpx dashed #fffdf7;
						.couponEject-clue {
							color: #FFA031;
							font-size: $title-size-m;
							margin-top: 10rpx;
						}
					}
				}
				
				.couponEject-bottom {
					padding: $padding - 10 $padding;
					box-sizing: border-box;
					font-size: $title-size-m;
					color: #e17900;
					border-top: 2rpx dashed #fffdf7;
					.couponEject-tips {
						flex: 1;
					}
				}
			}
		}
		.couponBtn {
			height: 94rpx;
			line-height: 94rpx;
			margin: 30rpx 0;
			background-color: #FFA031;
			color: #ffffff;
			border-radius: $radius * 4;
			text-align: center;
			
		}
	}
</style>