<template>
	<view class="content">
		<view class="paymentTop">
			<view class="paymentTop-name">
				需支付金额（元）
			</view>
			<view class="paymentTop-price">
				<text>￥</text>{{this.$Route.query.total}}
			</view>
		</view>
		<view class="paymentList">
			<view class="paymentList-label">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/img/payWechat.png" mode="widthFix"></image>微信支付
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" src="@/static/img/payCheck_active.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="paymentBtn">
			<button type="default" :disabled="disabled" class="paymentBtn-go" @click="payGo">去支付</button>
		</view>
	</view>
</template>

<script>
	const jweixin = require('jweixin-module');
	import { donationPay } from '@/apis/interfaces/mall'
	export default {
		data() {
			return {
				total: '', //支付金额
				disabled: false
			}
		},
		onLoad() {
		},
		
		onShow() {
		},
		methods: {
			payGo (){
				// 微信支付
				donationPay(this.$Route.query.orderNo, {
					type  : 'mp',
				    openid: this.$store.getters.getOpenId
				}).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
								setTimeout(()=>{
									this.$Router.replace({ name: 'OrderIndex', params: { listType: 'paid' }});
								},1000)
				            },
				            fail: payfail => {
				                uni.showToast({
				                    title: '取消支付',
				                    icon: 'none'
				                })
								this.disabled = true
								setTimeout(()=>{
									this.$Router.replace({ name: 'OrderIndex', params: { listType: 'unpay' }});
								},1000)
				            }
				        });
				    });
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	    background: #f4f4f4;
		height: 100vh;
		overflow-y: scroll;
	}
	
	.paymentTop {
		padding: $padding * 4 $padding $padding * 3;
		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-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;
				}
			}
		}
	}
	
	.paymentBtn {
		position: fixed;
		bottom: $margin * 2;
		left: 0;
		text-align: center;
		padding: 0 $padding;
		box-sizing: border-box;
		width: 100%;
		.paymentBtn-go {
			background-color: $mian-color;
			color: #ffffff;
			border-radius: $radius-m;
			line-height: 100rpx;
			font-size: $title-size + 2;
			&[disabled] {
				background-color: #666666;
			}
		}
	}
	
</style>