<template>
    <view class="content">
        <image class="temporary" src="http://api.siyuankunlun.com/storage/materials/2022/09/21/bzj.jpg" mode="widthFix"></image>
        <view class="member-btn">
            <!-- <view class="btnGo" @click="payment">
                保证金支付
            </view> -->
            <view class="btnGo" @click="payShow" :disabled="disabled">
                保证金支付
            </view>
        </view>
        
        <!-- 支付弹出 -->
        <view class="payPop" v-if="payState"></view>
        <view class="payCont" v-if="payState">
            <view class="payCont-close">
                <image src="@/static/icons/uricacidClose.png" mode="" @click="payState = false"></image>
            </view>
            <radio-group @change="payChange">
                <label class="uni-list-cell uni-list-cell-pd payCont-radio" v-for="(item, index) in items" :key="item.value">
                    <view class="payCont-name"><image :src="item.cover" mode=""></image>{{item.name}}</view>
                    <view>
                        <radio :value="item.value" checked="current" color="#e8c198" :checked="index === current" />
                    </view>
                </label>
            </radio-group>
            <view class="payCont-btn" @click="payment">
                立即支付
            </view>
        </view>
        
        <!-- 填写表单 -->
        <view class="writePop" v-if="writeState"></view>
        <view class="writeCont" v-if="writeState">
            <form @submit="writePayment">
                <view class="writeCont-close">
                    <image src="@/static/icons/uricacidClose.png" mode="" @click="writeState = false"></image>
                </view>
                <view class="writePop-input">
                    <input type="text" name="code" placeholder="请输入激活码" />
                </view>
                <button class="writeCont-btn" form-type="submit" :disabled="disabled">
                    立即兑换
                </button>
            </form>
        </view>
    </view>
</template>

<script>
    const jweixin = require('jweixin-module');
    import { partnerSee, getJssdk } from '@/apis/interfaces/member'
    import { identitySee, identityPay, codePay } from '@/apis/interfaces/gout'
    import { authFollow } from '@/apis/interfaces/authUrl'
    export default {
    	data() {
    		return {
                status  : '',
                orderId : '',
                openids : '',  // openid
                items   : [{
                        value  : 'wechat',
                        name   : '微信支付',
                        cover  : '/static/icons/payIcon_00.png',
                        checked: 'true'
                    },
                    {
                        value  : 'code',
                        name   : '激活码支付',
                        cover  : '/static/icons/payIcon_01.png'
                    }
                ],
                current     : 0,
                payState    : false,    //支付选择弹出
                writeState  : false,    //激活码弹出
                disabled    : false,    //按钮状态
                payType     : 'wechat'  //支付类型  wechat微信  code激活码
    		}
    	},
        onLoad(options) {
           this.openids = options.openid
        },
    	onShow() {
    	    partnerSee().then(res => {
                this.status = res.status
    	    }).catch(err => {
    	    	uni.showToast({
    	    		title: err.message,
    	    		icon: "none"
    	    	})
    	    })
            
            // 获取身份信息
            this.identityInfo();
    	},
    	methods: {
            // 身份信息
            identityInfo() {
                identitySee(this.$Route.query.identityid).then(res => {
                    this.orderId = res.order_id
                    if(res.openids.official) {
                        this.openids = res.openids.official
                    }
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 选择支付
            payChange(e) {
                this.payType = e.detail.value
            },
            
            // 显示支付选择弹出
            payShow() {
                this.payState = !this.payState
            },
            
            // 微信支付
            payment() {
                // 隐藏支付选择弹出
                this.payState = false
                if(this.payType == 'code') {
                    // 弹出激活码填写表单
                    this.writeState = !this.writeState
                    return
                }
                // 微信支付
                identityPay(this.orderId, {
                    openid: this.openids
                }).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.$Router.replace({ name: 'bondTips' });
                            },
                            fail: payfail => {
                                uni.showToast({
                                    title: '取消支付',
                                    icon: 'none'
                                })
                            }
                        });
                    });
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 激活码支付
            writePayment(e) {
                let newCode = e.detail.value.code
                codePay(this.orderId, {
                    code: newCode
                }).then(res => {
                    this.disabled = true
                    
                    // 返回上一页
                    uni.navigateBack();
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .temporary {
        width: 100%;
    }
    .member-btn {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: $padding;
        box-sizing: border-box;
        z-index: 9;
    }
    .btnGo {
        padding: 0 $padding;
        line-height: 90rpx;
        font-size: $title-size + 4;
        box-sizing: border-box;
        background-image: linear-gradient(to right, #fce9cf, #dfac80);
        box-shadow: 0 4rpx 4rpx 3rpx rgba(175,136,88,1);
        border-radius: $radius-m * 5;
        color: #633a25;
        font-weight: 600;
        text-align: center;
        &.active {
            background-image: linear-gradient(to right, #d4d4d4, #e0e0e0);
            box-shadow: 0 2px 2px 1px #b7b7b7;
            color: #656565
        }
    }
    
    // 支付弹出
    .payPop {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba($color: #000000, $alpha: .4);
        z-index: 999;
    }
    
    .payCont {
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        z-index: 1000;
        border-radius: $radius * 3 $radius * 3 0 0;
        padding: $padding $padding + 10;
        .payCont-close {
            text-align: right;
            margin-bottom: 40rpx;
            padding-right: 10rpx;
            box-sizing: border-box;
            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
        .payCont-radio {
            display: flex;
            line-height: 100rpx;
            .payCont-name {
                flex: 1;
                font-weight: 600;
                display: flex;
                image {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 20rpx;
                    margin-top: 26rpx;
                }
            }
            radio {
                transform:scale(.9);
            }
        }
        .payCont-btn {
            margin: 60rpx 0 20rpx;
            width: 100%;
            background-color: #e8c198;
            line-height: 90rpx;
            color: #442b11;
            text-align: center;
            border-radius: $radius-m;
        }
    }
    
    // 填写激活码弹出
    .writePop {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba($color: #000000, $alpha: .4);
        z-index: 999;
    }
    
    .writeCont {
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        z-index: 1000;
        border-radius: $radius * 3 $radius * 3 0 0;
        padding: $padding $padding + 10;
        .writeCont-close {
            text-align: right;
            margin-bottom: 40rpx;
            padding-right: 10rpx;
            box-sizing: border-box;
            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
        .writePop-input {
            background-color: #f5f5f5;
            height: 90rpx;
            border-radius: $radius-m;
            padding: 0 30rpx;
            box-sizing: border-box;
            input {
                background-color: transparent;
                border: none;
                height: 100%;
                line-height: 90rpx;
            }
        }
        .writeCont-btn {
            margin: 60rpx 0 20rpx;
            width: 100%;
            background-color: #e8c198 !important;
            line-height: 90rpx;
            color: #442b11 !important;
            font-size: 32rpx;
            text-align: center;
            border-radius: $radius-m;
            border: none;
            box-shadow: none;
            &::after {
                display: none;
            }
        }
    }
</style>
