<template>
	<view class="content">
		<view class="paymentTop">
			<view class="paymentTop-name">
				需支付金额（元）
			</view>
			<view class="paymentTop-price">
				<text>￥</text>{{payPrice}}
			</view>
			<view class="paymentTop-text">
				与人方便,与己方便,珍惜时间,请先付款
			</view>
		</view>
		<view class="paymentList">
			<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('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('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('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 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>
		
		<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="payMakeBack" :class="{active: payMakePop}" catchtouchmove='true'></view>
		<view class="payMakeCont" :class="{active: payMakePop}" catchtouchmove='true'>
			<image class="payMakeCont-img" src="@/static/imgs/payMakeCont_icon.png" mode="widthFix"></image>
			<view class="payMakeCont-title">
				支付成功
			</view>
			<view class="payMakeCont-price">
				<text>￥</text>{{payPrice}}
			</view>
			<view class="payMakeCont-tips">
				微信支付
			</view>
			<view class="payMakeCont-btn">
				<view class="payMakeCont-go" @click="payMakeSkip">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	const jweixin = require('jweixin-module');
	import { Apply, Wechat, authFollow } from '@/apis/interfaces/index'
	import { ums, umsState } from '@/apis/interfaces/pay'
	import { servicePay, serviceUms, serviceDg, expandPay, expandUms, expandDg, entrustPay, entrustUms, entrustDg, synDiffPay, synDiffUms, synDiffDg } from '@/apis/interfaces/pay'
	export default {
		data() {
			return {
				token		: '',	 	// 登录token
				orderId		: '',	 	// 微信支付id
				jumpUrlDg   : '',    // 抖巩支付
				tradeId		: '',	 	// 微信支付id
				Payment 	: 'wechat', // 支付类型
				applyData	: '',    	// 支付数据
				disabled    : false, 	// 按钮状态
				getState	: false, 	// 获取订单状态
				payMakePop  : false,    // 支付成功弹框
				payPrice	: '',       // 支付金额
				payForm     : '',       // 支付类型
			}
		},
		onShow() {
            console.log(this.$Route.query)
			this.token   = this.$store.getters.getToken
			this.payPrice = this.$Route.query.price
			this.payForm  = this.$Route.query.payForm
			this.orderId  = this.$Route.query.id ?this.$Route.query.id: this.$Route.query.orderId
		},
		methods: {
			// 选择支付方式
			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'
				
				let NewUrl = ''
				// 是否是补差价订单
				if(this.$Route.query.style == 'diff') {
					NewUrl = synDiffDg
				} else {
					let apiUrl = ''
					if(this.payForm == 'service') {
						apiUrl = serviceDg
					} else if (this.payForm == 'expand') {
						apiUrl = expandDg
					} else if (this.payForm == 'entrust') {
						apiUrl = entrustDg
					}
					NewUrl = apiUrl
				}
				NewUrl(this.orderId, {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'
				let NewUrl = ''
				// 是否是补差价订单
				if(this.$Route.query.style == 'diff') {
					NewUrl = synDiffUms
				} else {
					let apiUrl = ''
					if(this.payForm == 'service') {
						apiUrl = serviceUms
					} else if (this.payForm == 'expand') {
						apiUrl = expandUms
					} else {
						apiUrl = entrustUms
					}
					NewUrl = apiUrl
				}
				
				NewUrl(this.orderId, {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() {
				let newOpenId = uni.getStorageSync('openId')
				if(this.Payment === 'umsMp' || this.Payment === 'umsAli'){
					this.UMSPay()
					return
				} else if (this.Payment === 'dgwx' || this.Payment === 'dgAli') {
					this.dgwxPay()
					return
				}
				
				if(newOpenId) {
					let NewUrl = ''
					// 是否是补差价订单
					if(this.$Route.query.style == 'diff') {
						NewUrl = synDiffPay
					} else {
						let apiUrl = ''
						if(this.payForm == 'service') {
							apiUrl = servicePay
						} else if (this.payForm == 'expand') {
							apiUrl = expandPay
						} else {
							apiUrl = entrustPay
						}
						NewUrl = apiUrl
					}
					
					NewUrl(this.$Route.query.id, {
					    openid : newOpenId
					}).then(res => {
					    let wxConfig = JSON.parse(res.wechat)
					    jweixin.config({
					        appId: wxConfig.appId,
					        debug: false,
					        jsApiList: ['chooseWXPay'],
					        signature: wxConfig.signature,
					        nonceStr: wxConfig.nonceStr,
					        timestamp: wxConfig.timestamp,
					    })
					    jweixin.ready(() => {
					        jweixin.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
									
									this.payMakePop = true
					            },
								cancel: payCancel => {
									if(this.payForm == 'service') {
										// 跳到年费单
										this.$Router.replace({name: 'YearOrder'})
									} else if (this.payForm == 'expand') {
										// 跳到拓展单
										this.$Router.replace({name: 'ExpandOrder'})
									} else {
										// 跳到委托单
										this.$Router.replace({name: 'EntrustOrder'})
									}
								},
					            fail: payfail => {
									// 取消支付
									uni.showToast({
									    title: '取消支付',
									    icon: 'none'
									})
									this.disabled = true
									if(this.payForm == 'service') {
										// 跳到年费单
										setTimeout(()=>{
											this.$Router.replace({name: 'YearOrder'})
										},1000)
									} else if (this.payForm == 'expand') {
										// 跳到拓展单
										setTimeout(()=>{
											this.$Router.replace({name: 'ExpandOrder'})
										},1000)
									} else {
										// 跳到委托单
										setTimeout(()=>{
											this.$Router.replace({name: 'EntrustOrder'})
										},1000)
									}
					            }
					        });
					    });
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: "none"
						})
					})
					return
				}
				
				// 获取微信授权信息-获取oppid
				authFollow({
					// url: 'https://web.douhuofalv.com/webWechat/index?id=' + this.$Route.query.id + '&style=' + this.$Route.query.style + '&price=' + this.$Route.query.price
					url: 'https://web.douhuotest.douhuofalv.com/webWechat/index?id=' + this.$Route.query.id + '&style=' + this.$Route.query.style + '&price=' + this.$Route.query.price
				}).then(res => {
				    window.location.href = res
				}).catch(err => {
				    uni.showToast({
				        title: err.message,
				        icon: "none"
				    })
				})
			},
			
			// 支付成功弹出
			payMakeSkip() {
				this.payMakePop = false
				if(this.payForm == 'service') {
					// 跳到年费单
					this.$Router.replace({name: 'YearOrder'})
				} else if (this.payForm == 'expand') {
					// 跳到拓展单
					this.$Router.replace({name: 'ExpandOrder'})
				} else {
					// 跳到委托单
					this.$Router.replace({name: 'EntrustOrder'})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	    background: #f4f4f4;
		height: 100vh;
		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;
			}
		}
	}
	
	// 支付成功弹出
	.payMakeBack {
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
		display: none;
		&.active {
			display: block;
		}
	}
	
	.payMakeCont {
		position: fixed;
		z-index: 1001;
		left: 0;
		bottom: -10000%;
		height: 70vh;
		width: 100vw;
		background-color: #f7f7f7;
		border-radius: 40rpx 40rpx 0 0;
		padding-top: 100rpx;
		box-sizing: border-box;
		text-align: center;
		transition: .2;
		&.active {
			bottom: 0;
		}
		.payMakeCont-img {
			width: 80rpx;
			height: 80rpx;
			margin-left: 40rpx;
		}
		.payMakeCont-title {
			margin: 5rpx 0 30rpx 40rpx;
			font-size: 34rpx;
		}
		.payMakeCont-price {
			font-size: 78rpx;
			font-weight: 600;
			text {
				font-size: 36rpx;
				width: 40rpx;
				display: inline-block;
			}
		}
		.payMakeCont-tips {
			font-size: 28rpx;
			margin-left: 40rpx;
		}
		.payMakeCont-btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			padding: 80rpx 30rpx 100rpx;
			box-sizing: border-box;
			.payMakeCont-go {
				background-color: #da2b56;
				line-height: 98rpx;
				border-radius: 20rpx;
				color: #ffffff;
				font-size: 34rpx;
			}
		}
	}
</style>