<template>
	<view class="content">
		<view class="paymentTop">
			<view class="paymentTop-name">
				需支付金额（元）
			</view>
			<view class="paymentTop-price">
				<text>￥</text>{{payPrice}}
			</view>
			<view class="paymentTop-text">订单号：{{orderNo}}</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('umsMp')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/2a4ea8f9f714e39088648383d5c52f32.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('umsAli')">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/4aaf302e9d8a90c21c39b3d2f39cebc2.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>
		<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="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5be61f2fb4f14736867078de48e09355.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 { payInfo, payWechat, payUms, umsState } from '@/apis/interfaces/pay'
	export default {
		data() {
			return {
				tradeId		: '',
				token		: this.$store.getters.getToken,
				orderNo		: '',
				orderId		: '',
				orderType	: '',
				payPrice	: '0.00',
				Payment		: 'wechat',
				payMakePop	: false,
				disabled	: false
			}
		},
		onShow() {
			if(this.tradeId != ''){
				this.onGetOrderPayState()
			}
		},
		created() {
			let { orderId, orderType } = this.$Route.query
			payInfo({
				order_type	: orderType,
				order_id	: orderId
			}).then(res => {
				let { price, order_no, order_id } = res;
				this.orderId	= order_id
				this.orderNo	= order_no
				this.orderType	= orderType
				this.payPrice 	= price
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 查询订单状态
			onGetOrderPayState(){
				uni.showLoading({
					title: '查询支付',
					mask : true
				})
				let outTime;
				let resNumb = 0;
				outTime = setInterval(() => {
					if(resNumb >= 3){
						clearInterval(outTime)
						uni.showToast({
							title: '暂未查询到你的支付订单',
							icon : 'none'
						})
						return
					}
					umsState(this.tradeId).then(res => {
						resNumb++
						if(res.state === 'success'){
							clearInterval(outTime)
							this.payMakePop = true
						}
					}).catch(err => {
						clearInterval(outTime)
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
				}, 2000)
			},
			// 选择支付方式
			payType(type) {
				if(this.Payment === type) return
				this.Payment = type
				if(type === 'umsMp') this.umsPay()
			},
			// 微信支付
			wechatPay(){
				let openId = uni.getStorageSync('openId')
				if(openId){
					payWechat({
						order_type: this.orderType,
						order_id  : this.orderId,
						openid	  : openId,
						use_fire  : 0,
						fire	  : 0
					}).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 => {
									this.payMakePop = true
								},
								fail: () => {
									uni.showToast({
										title: '取消支付',
										icon: 'none'
									})
								}
							});
						});
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
				}
				// 获取微信授权信息-获取oppid
				authFollow({
					url: 'https://web.douhuofalv.com/webWechat/index'
					// url: 'https://web.douhuotest.douhuofalv.com/webWechat/index',
					// url: 'http://web.douhuo.demos.uzchain.tech/webWechat/index' 最新
				}).then(res => {
				    window.location.href = res
				}).catch(err => {
				    uni.showToast({
				        title: err.message,
				        icon: "none"
				    })
				})
			},
			// 银联支付
			umsPay(){
				let payType = this.Payment === 'umsMp' ? 'mp' : 'mp_alipay'
				payUms({
					order_type: this.orderType,
					order_id  : this.orderId,
					use_fire  : 0,
					fire	  : 0,
					type	  : payType
				}).then(res => {
					let { trade_id } = res;
					this.tradeId  = trade_id
					switch (payType){
						case 'mp':
							this.tradeId 		 = trade_id
							break;
						case 'mp_alipay':
							this.tradeId 		 = trade_id
							window.location.href = res.alipay
							break;
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 提交支付
			payClick(){
				switch(this.Payment){
					case 'umsAli':
						this.umsPay()
						break;
					case 'wechat':
						this.wechatPay()
						break;
				}
			},
			// 支付成功弹出
			payMakeSkip() {
				this.payMakePop = false
				this.$Router.back()
			},
		}
	}
</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>