<template>
    <div class="wallet">
        <div class="wallet-card">
            <div class="label">账户余额（元）</div>
            <div class="value">{{ Number(userBalance.balance || 0).toFixed(2) }}</div>
            <div class="btns">
                <div class="btn btn-card" @click="$router.push({ name: 'mineBanks' })">我的银行卡</div>
                <div class="btn btn-record" @click="$router.push({ name: 'balanceRecord' })">余额记录</div>
            </div>
        </div>
        <div class="recharge-card">
            <div class="title">选择金额</div>
            <div class="amount">
                <div
                    class="item"
                    v-for="item in amountOptions"
                    :key="item"
                    :class="{ active: amount === item }"
                    @click="amount = item"
                >
                    {{ item }}
                </div>
            </div>
            <div class="custom-amount">
                <span class="yuan">¥</span>
                <div class="placeholder" v-if="amount == undefined || amount === ''">请输入自定义金额</div>
                <input type="number" v-model="amount" />
            </div>
            <div class="tip">
                充值说明<br />1、本次充值仅限于平台消费，无法跨地区款站点使用<br />2、若遇到充值未到账，请联系客服
            </div>
            <div class="bottom">
                <div class="btn-withdraw" @click="withdraw">提现</div>
                <div class="btn-recharge" @click="recharge" v-if="enableRecharge">充值</div>
            </div>
        </div>
        <van-action-sheet v-model:show="showRechargeDialog" :closeable="false" class="recharge-dialog">
            <div class="title">
                <div class="text">充值详情</div>
                <div class="close" @click="showRechargeDialog = false">
                    <img src="@assets/icon_dialog_close.png" />
                </div>
            </div>
            <div class="content">
                <div class="amount">
                    <div class="text">充值金额(元)</div>
                    <div class="num">{{ amount }}</div>
                </div>
                <div class="line"></div>
                <div class="title-methods">充值方式</div>
                <div style="padding: 0 16px">
                    <pay-method-pick v-model="payMethod" :showBalance="false"></pay-method-pick>
                </div>
            </div>
            <div class="btn-wrapper">
                <div class="btn-recharge" @click="confirmRecharge">确认支付</div>
            </div>
        </van-action-sheet>

        <van-action-sheet v-model:show="showWithdrawDialog" :closeable="false" class="recharge-dialog">
            <div class="title">
                <div class="text">提现详情</div>
                <div class="close" @click="showWithdrawDialog = false">
                    <img src="@assets/icon_dialog_close.png" />
                </div>
            </div>
            <div class="content">
                <div class="amount">
                    <div class="text">提现金额(元)</div>
                    <div class="num">{{ amount }}</div>
                </div>
                <div class="line"></div>
                <van-cell v-if="bankCard" title="提现帐户" :value="bankCard.bankName">
                    <template #value>
                        <span>
                            {{ bankCard.bankName }} <br />
                            ****{{ bankCard.bankNo.slice(-4) }}
                        </span>
                    </template>
                </van-cell>
                <van-cell v-else title="提现帐户" value="添加" is-link to="mineBanksAdd"></van-cell>
            </div>
            <div class="btn-wrapper">
                <van-button
                    type="primary"
                    color="#373A60"
                    round
                    block
                    class="btn-recharge"
                    @click="confirmWithdraw"
                    :disabled="!bankCard"
                >
                    确认提现
                </van-button>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
import PayMethodPick from '@/components/PayMethodPick';
import resolveUrl from 'resolve-url';
import { mapState } from 'vuex';
export default {
    components: { PayMethodPick },
    data() {
        return {
            userBalance: {
                balance: 0
            },
            amountOptions: [100, 200, 500, 1000, 2000, 5000],
            amount: null,
            minAmount: -1,
            maxAmount: -1,
            showRechargeDialog: false,
            payMethod: null,
            showWithdrawDialog: false,
            enableRecharge: false
        };
    },
    created() {
        this.$http.get('/sysConfig/get/min_recharge_amount,max_recharge_amount,enable_recharge').then(res => {
            this.minAmount = Number(res['min_recharge_amount'].value);
            this.maxAmount = Number(res['max_recharge_amount'].value);
            this.enableRecharge = res['enable_recharge'].value === '1';
        });
        this.$store.dispatch('getBankCard');
        this.getBalance();
    },
    computed: {
        ...mapState(['bankCard'])
    },
    methods: {
        getBalance() {
            this.$http.get('/userBalance/my').then(res => {
                this.userBalance = res;
            });
        },
        recharge() {
            if (!this.amount) {
                this.$toast('请输入充值金额');
                return;
            }
            const amount = Number(this.amount);
            if (this.minAmount > -1 && amount < this.minAmount) {
                this.$toast('充值金额不能小于' + this.minAmount + '元');
                return;
            }
            if (this.maxAmount > -1 && amount > this.maxAmount) {
                this.$toast('充值金额不能大于' + this.maxAmount + '元');
                return;
            }
            if (amount > 50000) {
                this.$toast('充值金额不能大于50000');
                return;
            }
            this.showRechargeDialog = true;
        },
        confirmRecharge() {
            if (!this.payMethod) {
                this.$toast('请选择支付方式');
                return;
            }
            this.showRechargeDialog = false;
            switch (this.payMethod) {
                case 'ALIPAY':
                    this.$toast.loading('充值中');
                    this.$http
                        .post('/payOrder/v2/recharge', { amount: this.amount })
                        .then(res => {
                            this.openScheme(res);
                            setTimeout(() => {
                                this.$toast.clear();
                            }, 1000);
                        })
                        .catch(e => {
                            this.$toast(e.error || '充值失败');
                        });
                    break;
                case 'UNION':
                    window.open(
                        resolveUrl(
                            this.$baseUrl,
                            '/payOrder/v2/recharge/sandQuick?userId=' +
                                this.$store.state.userInfo.id +
                                '&amount=' +
                                this.amount
                        )
                            .replace('www.raex.vip', 'jump.raex.vip')
                            .replace('test.raex.vip', 'jumptest.raex.vip'),
                        '_blank'
                    );
                    break;
                case 'QUICK_BIND':
                    window.open(
                        resolveUrl(
                            this.$baseUrl,
                            '/payOrder/v2/recharge/sandQuickBind?userId=' +
                                this.$store.state.userInfo.id +
                                '&amount=' +
                                this.amount
                        )
                            .replace('www.raex.vip', 'jump.raex.vip')
                            .replace('test.raex.vip', 'jumptest.raex.vip'),
                        '_blank'
                    );
                    break;
                case 'SYXPAY':
                    this.$router.push({
                        name: 'bankPay',
                        query: {
                            type: 'recharge',
                            amount: this.amount
                        }
                    });
            }
        },
        withdraw() {
            if (!this.amount) {
                this.$toast('请输入提现金额');
                return;
            }
            if (Number(this.amount) > this.userBalance.balance) {
                this.$toast('提现金额不能大于余额');
                return;
            }
            this.showWithdrawDialog = true;
        },
        confirmWithdraw() {
            this.showWithdrawDialog = false;
            this.$toast.loading('申请提现');
            this.$http
                .post('/withdrawApply/apply', { amount: this.amount })
                .then(res => {
                    this.$toast.success('申请提现成功');
                    this.getBalance();
                })
                .catch(e => {
                    this.$toast(e.error || '申请提现失败');
                });
        }
    }
};
</script>
<style lang="less" scoped>
.wallet {
    background: @bg3;
    padding-top: 16px;
    .flex-col();
    .wallet-card {
        height: 138px;
        margin: 0 16px;
        background: #404569;
        background-image: url(../../assets/bg_wallet.png);
        background-size: 182px 94px;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: top;
        border-radius: 9px;
        color: white;
        position: relative;
        overflow: hidden;
        .flex-col();
        .label {
            font-size: 14px;
            line-height: 24px;
            margin: 16px 0 0 16px;
        }
        .value {
            font-family: OSP;
            font-size: 36px;
            line-height: 30px;
            margin: 4px 0 0 16px;
            flex-grow: 1;
        }
        .btns {
            color: @text3;
            font-size: 14px;
            background: #292a52;
            .flex();
            .btn {
                flex-basis: 0;
                flex-grow: 1;
                height: 44px;
                .flex();
                align-items: center;
                justify-content: center;
                transition: color 0.1s;
                &:active {
                    color: fade(@text3, 20%);
                }
            }
            .btn-card {
                position: relative;
                &:after {
                    content: '';
                    width: 1px;
                    height: 20px;
                    background: @text3;
                    border-radius: 1px;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                }
            }
        }
    }
    .recharge-card {
        margin: 16px 16px 0 16px;
        padding-top: 16px;
        border-radius: 16px 16px 0px 0px;
        background: white;
        flex-grow: 1;
        .title {
            font-size: 16px;
            font-weight: bold;
            margin-left: 16px;
        }
        .amount {
            margin: 16px 16px 0 0;
            .flex();
            flex-wrap: wrap;
            .item {
                width: calc((100vw - 96px) / 3);
                margin-left: 16px;
                margin-bottom: 16px;
                border-radius: 4px;
                background: fade(#393d62, 20%);
                font-size: 32px;
                font-family: OSP;
                color: white;
                height: 40px;
                line-height: 40px;
                text-align: center;
                &.active {
                    background: #393d62;
                }
            }
        }
        .custom-amount {
            background: @bg3;
            margin: 0 16px 16px 16px;
            height: 48px;
            border-radius: 4px;
            color: @text3;
            .flex();
            padding-left: 12px;
            padding-right: 16px;
            font-size: 14px;
            font-weight: bold;
            line-height: 48px;
            position: relative;
            .placeholder {
                position: absolute;
                left: 28px;
                top: 0;
                bottom: 0;
                right: 16px;
                text-align: center;
                margin: auto;
                font-weight: 400;
                color: @text3;
                font-size: 14px;
                line-height: 48px;
            }
            input {
                flex-grow: 1;
                border: none;
                background: none;
                font-size: 24px;
                color: black;
                margin-left: 6px;
                line-height: 48px;
                padding: 0;
                .flex();
                font-family: OSP;
                letter-spacing: 1px;
                text-align: center;
                z-index: 1;
            }
        }
        .tip {
            font-size: 12px;
            color: @text3;
            margin: 16px;
        }
    }
    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        .flex();
        height: 56px;
        padding-bottom: env(safe-area-inset-bottom);
        padding: 0 16px;
        background: white;
        border-top: 1px solid @border2;
        .btn-withdraw {
            flex: 1 0 0;
            border-radius: 19px;
            height: 38px;
            font-size: 16px;
            font-weight: bold;
            color: #373a60;
            background: fade(#393d62, 20%);
            .flex();
            justify-content: center;
            &:active {
                background: fade(#393d62, 30%);
            }
            & + div {
                margin-left: 20px;
            }
        }
        .btn-recharge {
            flex: 1 0 0;
            border-radius: 19px;
            height: 38px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            background: #373a60;
            .flex();
            justify-content: center;
            &:active {
                background: fade(#393d62, 80%);
            }
        }
    }
}
::v-deep(.recharge-dialog .van-action-sheet__content) {
    overflow: auto !important;
    display: flex;
    flex-direction: column;
}
.recharge-dialog {
    overflow: auto;
    .content {
        flex-basis: calc(80vh - 150px);
        flex-grow: 1;
        overflow: auto;
        //height: calc(100vh - 300px);
    }
    .title {
        height: 50px;
        position: relative;
        &::after {
            .setBottomLine();
        }
        .flex();
        .text {
            margin-left: 16px;
            font-size: 14px;
            color: black;
            font-weight: bold;
            flex-grow: 1;
        }
        .close {
            padding: 10px 16px;
            img {
                width: 24px;
                height: 24px;
            }
        }
    }
    .amount {
        background: @bg3;
        border-radius: 4px;
        margin: 16px;
        padding: 17px 0 20px 0;
        .flex-col();
        align-items: center;
        .text {
            font-size: 16px;
            color: black;
        }
        .num {
            font-size: 36px;
            font-family: DIN;
            margin-top: 10px;
        }
    }
    .line {
        background: @bg3;
        height: 1px;
        margin: 0 16px;
    }
    .title-methods {
        font-size: 14px;
        line-height: 24px;
        font-weight: bold;
        margin-left: 16px;
        margin-top: 20px;
        margin-right: 16px;
        .bank-name {
            font-size: 14px;
            color: @text3;
            font-weight: normal;
            float: right;
        }
    }
    .btn-wrapper {
        height: 56px;
        min-height: 56px;
        .flex();
        padding-bottom: env(safe-area-inset-bottom);
        position: relative;
        &::after {
            .setTopLine();
        }
        .btn-recharge {
            // flex-grow: 1;
            // height: 38px;
            // border-radius: 19px;
            // background: #373a60;
            // font-size: 16px;
            // color: white;
            // font-weight: bold;
            // .flex();
            // justify-content: center;
            margin: 0 48px;
            ::v-deep(.van-button__content) {
                font-weight: bold;
            }
            // &:active {
            //     background: shade(#373a60, 20%);
            // }
        }
    }
}
::v-deep(.van-cell__title) {
    font-weight: bold;
}
</style>
