<template>
    <view class="">
        <navbar title="充值"></navbar>
        
        <view class="recharge-box">
            <view class="r-desc">
                <view class="r-desc1">请选择充值金额</view>
                <view class="r-desc2">充值金额只能消费，不能提现</view>
            </view>

            <view class="bg-white card">
                <view>
                    <view class="card-item" :class="currentType == i + 1 ? 'active' : ''" v-for="i in 5" :key="i" @click="selectCard(i + 1)">
                        <view class="d-f a-i-c">
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                            <view class="card-balance">充值{{ balance['balance' + (i + 1)] }}</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="d-f a-i-c">
                                <view class="sale">
                                    <text>预存享</text>
                                    <text class="discount">{{ balance['discount' + (i + 1)] }}</text>
                                    <text>折</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view >
                    <checkbox-group @change="checkboxChange">
                        <text class="" style="margin-right: 20rpx;" @click="see">我已阅读并同意充值协议</text>
                        <checkbox value="true" :checked="yxChekced"/>
                    </checkbox-group>
                    <!-- <text class="" style="margin-right: 20rpx;">我已阅读并同意充值协议</text>
                    <checkbox value="cb" class="checkbox" :checked="yxChekced" @change="yxChekced = !yxChekced" /> -->
                </view>
            </view>


            <view class="r-desc">
                <view class="r-desc1">充值说明</view>
                <view class="r-desc2">a.账户充值仅限在线方式支付，充值金额实时到账；</view>
                <view class="r-desc2">b.有问题请联系客服。</view>
                <view class="r-desc2">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">《充值协议》</text>。</view>
            </view>

            <view class="card-btn" @click="confirmCard">确定</view>
        </view>

        <!-- 会员卡选择弹窗 -->
        <!-- <Popup :show="cardPopup" :width='750' :padding="0" type="bottom" backgroundColor="#fff" radius="32rpx 32rpx 0 0">
           <view class="notice-popup">
				<view class="title">提示</view>
				<view class="desc">   
					<view class="rule">是否充值该</view>
				</view>
				<view class="btn">
					<view class="btn1" @click="cancelReservePopup = false">取消</view>
					<view class="btn2" @click="cancelReserveOrder">确定</view>
				</view>
			</view>
        </Popup> -->
    </view>
</template>

<script>
    import navbar from '@/components/navbar.vue';
    import Popup from '@/components/uni-popup.vue';

    export default {
        components: {
            navbar,
            Popup
        },

        data() {
            return {
                cardPopup: false,
                currentType: -1,
                balance: {},
                yxChekced: true
            }
        },
        
        onLoad() {
            let self = this;
            // 获取充值卡
            self._post(
                'ground.ground/groundSetting',
                {
                    app_id: self.getAppId(),
                },
                function(res) {
                    self.balance = res.data.lists.balance;
                    console.log("🚀 ~ res:", self.balance)
                }
            )
        },

        methods: {
            // 选择会员卡
            selectCard(index) {
                this.currentType = index;
            },

            checkboxChange(e) {
	            console.log("🚀 ~ e:", e)
	            this.yxChekced = e.detail.value[0]
	            console.log("🚀 ~ e:", this.yxChekced)

            },
            
            // 确认选择
            confirmCard() {
                if (!this.yxChekced) {
                    uni.showToast({
                        title: '请同意充值协议',
                        icon: 'none'
                    });
                    return;
                }

                let self = this;
                uni.showLoading({
                    title: '加载中'
                });
                self._post('user.index/detail', {
                    source: self.getPlatform()
                }, function(res) {
                    uni.hideLoading();
                    console.log("🚀 ~ res:", res)
                    if (res.data.userInfo.mobile == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请先绑定手机号',
                            success: function(sm) {
                                if (sm.confirm) {
                                    uni.switchTab({
                                        url: '/pages/user/index/index'
                                    });
                                }
                            }
                        });
                    }else {
                        if (self.currentType == -1) {
                            uni.showToast({
                                title: '请选择充值金额',
                                icon: 'none'
                            });
                            return;
                        }
                        self.wxPay()
                    }
                });
            },

            // 微信支付
            wxPay() {
                let self = this;
                uni.showLoading({
                    title: '加载中'
                });

                try {
                    self._post(
                        'user.groundOrder/recharge',
                        {
                            app_id: self.getAppId(),
                            type: this.currentType
                        },
                        function(res) {
                            if (res.code) {
                                const data = res.data
                                console.log("🚀 ~ pay data:", data)
                                uni.requestPayment({
                                    provider: 'wxpay',
                                    timeStamp: data.payment.timeStamp,
                                    nonceStr: data.payment.nonceStr,
                                    package: 'prepay_id=' + data.payment.prepay_id,
                                    signType: 'MD5',
                                    paySign: data.payment.paySign,
                                    success: res => {
                                        self.result = 'success'
                                        console.log("🚀 ~ pay success res:", res)
                                        uni.showToast({
                                            title: '支付成功',
                                            icon: 'none'
                                        });
                                        self.loadding = false;

                                        setTimeout(() => {
                                            uni.redirectTo({
                                                url: '/bundle/recharge/card'
                                            });
                                        }, 500);
                                    },
                                    fail: res => {
                                        console.log("🚀 ~ pay error res:", res)
                                        self.result = 'fail'
                                        self.loadding = false;

                                        uni.showToast({
                                            title: '支付失败',
                                            icon: 'none'
                                        });
                                    },
                                });
                            } else {
                                self.loadding = false;
                                uni.showToast({
                                    title: '创建订单失败',
                                    icon: 'none'
                                });
                                return
                            }
                        }
                    )
                } catch (error) {
                    console.log("🚀 ~ pay error res:", res)
                    self.result = 'fail'
                    self.loadding = false;

                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    });
                    setTimeout(() => {
                        uni.navigateBack({delta: 1})
                    }, 500);
                }
            },

            see() {
                uni.navigateTo({
                    url: '/pages/webview/webview?url=https://xh.stnav.com/czxy.html'
                });
            }
        }
    }

</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .recharge-box {
        margin: 0 30rpx;
        margin-top: 24rpx;

        .r-desc {
            .r-desc1 {
                font-size: 32rpx;
                color: #303133;
                line-height: 44rpx;
            }

            .r-desc2 {
                margin-top: 12rpx;
                font-size: 26rpx;
                color: #909399;
                line-height: 36rpx;
            }
        }

        .card {
            margin-top: 28rpx;
            padding-bottom: 64rpx;

            .card-item {
                width: 690rpx;
                height: 104rpx;
                background: #FFFFFF;
                box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.04);
                border-radius: 16rpx;
                border: 2rpx solid #fff;
                margin: 0 0 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30rpx;
                box-sizing: border-box;

                .card-title {
                    font-size: 30rpx;
                    color: #121212;
                    margin-right: 24rpx;
                }
                .sale {
                    font-size: 28rpx;
                    .discount {
                        color: #FF5951;
                    }
                }

                .card-balance {
                    font-size: 30rpx;
                    color: #303133;
                    line-height: 42rpx;
                    margin-left: 26rpx;
                }
            }

            .active {
                border: 2rpx solid #FF5951;
                background: #FFF4F4;

                .card-checkout {
                    .iconfont{
                        color: #365A9A;
                    }
                }
            }

           
        }

        .card-btn {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 22rpx;
            width: 630rpx;
            height: 90rpx;
            background: #365A9A;
            border-radius: 8rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            line-height: 90rpx;
            text-align: center;
        }
    }

    .notice-popup {
		padding: 20rpx 0;
		width: 100%;

		.title {
			font-size: 36rpx;
			color: #303133;
			line-height: 50rpx;
			text-align: center;
		}

		.desc {
			margin-top: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #303133;
			line-height: 52rpx;
			text-align: center;
		}

		.rule {
			margin-bottom: 18rpx;
			text-align: left;
		}

		.rule1 {
			font-weight: 400;
			font-size: 32rpx;
			color: #303133;
			line-height: 44rpx;
			text-align: left;
			margin-bottom: 10rpx;
		}
	}
</style>
