<template>
	<view class="content">
		<view class="nav-content">
			<uni-icons color="#212121" class="search-icon-arrowleft" size="24" type="arrowleft" @click="goBack" />
			<view class="title">微信支付</view>
		</view>
		<view class="sub-title">
			谛宝多多分期定金订单-{{order_id}}
		</view>
		<view class="price">
			￥{{amount}}
		</view>
		<button type="primary" class="submit-btn" :loading="loading" @click="handleSumit">立即支付</button>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import {parse} from 'querystring'
	export default{
		components: {
			uniIcons
		},
		data(){
			return {
				loading: false,
				amount: '',
				order_id: ''
			}
		},
		onLoad(){
			const { href } = location;
			const { amount, order_id, code } = parse(href.split('?')[1]);
			this.amount = amount;
			this.order_id = order_id;
		},
		methods: {
			handleSumit(){
				const { href } = location;
				const { amount, order_id, code } = parse(href.split('?')[1]);
				if(!amount || !order_id || !code){
					uni.showToast({
						title: '参数错误请重新支付',
						icon: 'none'
					})
					return;
				}
				this.loading = true;
				uni.request({
					url: `/uni/api/repayment/GoPay`,
					method: 'post',
					dataType: 'json',
					data: {
						amount: parseFloat(amount),
						order_id: order_id,
						payment_code: "epaywxjs",
						payment_name: "微信支付",
						wx_code: code
					},
					success: (res) => {
						const {data} = res;
						this.loading = false;
						if(data.code === 0){
							this.onBridgeReady(data.data);
						}
					}
				})
			},
			onBridgeReady(res){
				if(res.package === undefined){
					uni.showToast({
						title: '获取参数失败，请重新支付',
						duration: 2000,
						icon: 'none'
					});
					setTimeout(() => {
						history.back();
					},2000);
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": res.app_id,     //公众号名称，由商户传入
						"timeStamp": res.timeStamp,         //时间戳，自1970年以来的秒数
						"nonceStr": res.nonce_str, //随机串
						"package": res.package,
						"signType": res.sign_type,         //微信签名方式：
						"paySign": res.pay_sign //微信签名
					},
					function (res) {
						WeixinJSBridge.log(res.err_msg);
						const url = window.location.origin;
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							uni.navigateTo({
								url: '/pages/payresult/payresult'
							})
						} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
							uni.showToast({
								title: '已取消支付,请重新支付',
								duration: 2000,
								icon: 'none'
							});
							setTimeout(() => {
								history.back();
							},2000);
						} else if (res.err_msg === "get_brand_wcpay_request:fail") {
							// Toast.fail('支付失败', 3);
							uni.showToast({
								title: '支付失败，请重新支付',
								duration: 2000,
								icon: 'none'
							});
							// 回退上一页重新支付
							setTimeout(() => {
								history.back();
							},2000);
							// 提示支付失败，关闭当前页面
							// setTimeout(function() {
								//这个可以关闭安卓系统的手机
								 // document.addEventListener(
									// 	"WeixinJSBridgeReady",
									// 	function() {
									// 		WeixinJSBridge.call("closeWindow");
									// 	},
									//  false
								 // );
									// //这个可以关闭ios系统的手机
								 // WeixinJSBridge.call("closeWindow");
								 // this.$jump(`${url}?app=member`);
							// }, 300);
						} else {
							uni.showToast({
								title: '未知错误，刷新重试',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				);
			},
			goBack(){
				this.$backup();
			}
		}
	}
</script>

<style lang="scss">
	.nav-content{
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		position: relative;
		.search-icon-arrowleft{
			width: 40rpx;
			position: absolute;
			left: 20rpx;
		}
		.title{
			text-align: center;
			width: 100%;
			font-size: 30rpx;
		}
	}
	.sub-title{
		font-size:30rpx;
		text-align: center;
		color: #5d5d5d;
		margin-top: 120rpx;
	}
	.price{
		text-align: center;
		margin-top: 50rpx;
		font-size: 60rpx;
	}
	.submit-btn{
		margin: 0 48rpx;
		margin-top: 80rpx;
		font-size: 34rpx;
		
	}
	uni-button[type=primary]{
		background-color: #07c160; 
	}
	uni-button[loading][type=primary]{
		background-color: #06ae56;
	}
	.button-hover[type=primary]{
		color: rgba(0,0,0,.5);
		background-color: #06ae56;
	}
</style>