<template>
    <div class="wallet">
        <div class="balance-card">
            <img class="cover" src="https://cdn.raex.vip/image/2022-06-01-16-09-56vifAnxiR.png" />
            <div class="stat" v-if="!(userInfo && userInfo.walletEnabled)">未开通</div>
            <div
                class="btn-open"
                @click="$router.push({ name: 'walletAgreement' })"
                v-if="!(userInfo && userInfo.walletEnabled)"
            >
                <img src="@assets/icon_arrow_left.png" class="arrow" />
                申请开通
                <img src="@assets/icon_arrow_left.png" class="arrow right" />
            </div>
        </div>
        <div class="balance-amount" v-if="userInfo && userInfo.walletEnabled">
            <div class="label" v-if="$store.state.review">绿魔币余额</div>
            <div class="label" v-else>账户余额（元）</div>
            <div class="value">
                <span class="number"> {{ Number(userBalance.balance || 0).toFixed(2) }}</span>
                <button
                    class="btn-withdraw"
                    @click="showWithdrawDialog = true"
                    v-if="enableWithdraw && !$store.state.review"
                >
                    提现
                </button>
                <button class="btn-recharge" @click="showIapRechargeDialog = true" v-if="enableRecharge && iosReview">
                    充值
                </button>
                <button class="btn-recharge" @click="showRechargeDialog = true" v-else-if="enableRecharge">充值</button>
            </div>
        </div>
        <div class="cell-group" v-if="!$store.state.review">
            <div class="cell" @click="$router.push({ name: 'mineBanks' })">
                <img class="icon" src="@assets/icon_yinhangka.png" />
                <span class="label">我的银行卡</span>
                <img class="into" src="@assets/icon_inter1.png" />
            </div>
            <div
                class="cell"
                v-if="userInfo && userInfo.walletEnabled"
                @click="$router.push({ name: 'balanceRecord' })"
            >
                <img class="icon" src="@assets/info_icon_jiaoyijilu2.png" />
                <span class="label">余额记录</span>
                <img class="into" src="@assets/icon_inter1.png" />
            </div>
        </div>

        <div class="tips">
            <div
                class="tips-title"
                @click="
                    $router.push({
                        name: 'walletAgreement',
                        query: {
                            isRead: true
                        }
                    })
                "
            >
                《钱包规则说明》
            </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">单次最低充值 ¥{{ minAmount }}，最高充值 ¥{{ maxAmount }}</div>
                </div>
                <div class="input">
                    <img class="yuan" src="@assets/icon_jiage.png" />
                    <input type="number" inputmode="decimal" v-model="amount" pattern="[0-9.]*" />
                    <div class="placeholder" v-if="amount == undefined || 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">
                <van-button
                    type="primary"
                    :color="$colors.prim"
                    round
                    block
                    class="btn-recharge"
                    @click="confirmRecharge"
                >
                    确认支付
                </van-button>
            </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">全部可提现 ¥{{ Number(userBalance.balance || 0).toFixed(2) }}</div>
                </div>
                <div class="input">
                    <img class="yuan" src="@assets/icon_jiage.png" />
                    <input type="number" v-model="amount" />
                    <div class="placeholder" v-if="amount == undefined || amount === ''">请输入提现金额</div>
                    <button class="btn-all" @click="amount = userBalance.balance">全部</button>
                </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="$colors.prim"
                    round
                    block
                    class="btn-recharge"
                    @click="confirmWithdraw"
                    :disabled="!bankCard"
                >
                    确认提现
                </van-button>
            </div>
        </van-action-sheet>

        <van-action-sheet v-model:show="showIapRechargeDialog" :closeable="false" class="recharge-dialog">
            <div class="title">
                <div class="text">充值</div>
                <div class="close" @click="showIapRechargeDialog = false">
                    <img src="@assets/icon_dialog_close.png" />
                </div>
            </div>
            <div class="content">
                <div class="iap-row">
                    <div class="iap-item" :class="{ active: iapId === '68' }" @click="iapId = '68'">
                        <div class="name">68绿魔币</div>
                        <div class="price">¥68</div>
                    </div>
                    <div class="iap-item" :class="{ active: iapId === '108' }" @click="iapId = '108'">
                        <div class="name">108绿魔币</div>
                        <div class="price">¥108</div>
                    </div>
                    <div class="iap-item" :class="{ active: iapId === '198' }" @click="iapId = '198'">
                        <div class="name">198绿魔币</div>
                        <div class="price">¥198</div>
                    </div>
                </div>
                <div class="iap-row">
                    <div class="iap-item" :class="{ active: iapId === '288' }" @click="iapId = '288'">
                        <div class="name">288绿魔币</div>
                        <div class="price">¥288</div>
                    </div>
                    <div class="iap-item" :class="{ active: iapId === '588' }" @click="iapId = '588'">
                        <div class="name">588绿魔币</div>
                        <div class="price">¥588</div>
                    </div>
                    <div class="iap-item" :class="{ active: iapId === '998' }" @click="iapId = '998'">
                        <div class="name">998绿魔币</div>
                        <div class="price">¥998</div>
                    </div>
                </div>
            </div>
            <div class="btn-wrapper">
                <van-button type="primary" :color="$colors.prim" round block class="btn-recharge" @click="iapRecharge">
                    确认
                </van-button>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
import PayMethodPick from '@/components/PayMethodPick';
import resolveUrl from 'resolve-url';
import { mapGetters, 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,
            enableWithdraw: false,
            showIapRechargeDialog: false,
            iapId: '68'
        };
    },
    created() {
        this.emitter.on('iapEvent', this.iapEvent);
        this.$http
            .get('/sysConfig/get/min_recharge_amount,max_recharge_amount,enable_recharge,enable_withdraw')
            .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.enableWithdraw = res['enable_withdraw'].value === '1';
            });
        this.$store.dispatch('getBankCard');
        this.getBalance();
    },
    beforeUnmount() {
        this.emitter.off('iapEvent', this.iapEvent);
    },
    computed: {
        ...mapState(['bankCard', 'userInfo', 'review', 'companyId']),
        ...mapGetters(['iosReview', 'androidReview'])
    },
    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.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;
            }
            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, companyId: this.companyId })
                        .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}&companyId=${this.companyId}`
                        )
                            .replace('www.raex.vip', 'jump.raex.vip')
                            .replace('test.raex.vip', 'jumptest.raex.vip'),
                        '_blank'
                    );
                    break;
                case 'QUICK_BIND':
                    this.$toast.loading('充值中');
                    this.$http
                        .get('/payOrder/v2/recharge/sandQuickBind', {
                            userId: this.$store.state.userInfo.id,
                            amount: this.amount,
                            companyId: this.companyId
                        })
                        .then(res => {
                            this.$toast.clear();
                            this.openScheme(res);
                        })
                        .catch(e => {
                            this.$toast.clear();
                            this.$toast(e.error || '充值失败');
                        });
                    break;
                case 'ALI':
                    this.$toast.loading('充值中');
                    this.$http
                        .post('/payOrder/v2/recharge/ali', { amount: this.amount, companyId: this.companyId })
                        .then(res => {
                            this.openScheme(res);
                            setTimeout(() => {
                                this.$toast.clear();
                            }, 1000);
                        })
                        .catch(e => {
                            this.$toast(e.error || '充值失败');
                        });
                    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() {
            if (!this.amount) {
                this.$toast('请输入提现金额');
                return;
            }
            if (Number(this.amount) > this.userBalance.balance) {
                this.$toast('提现金额不能大于余额');
                return;
            }
            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 || '申请提现失败');
                });
        },
        all() {
            console.log('111');
        },
        iapEvent(e) {
            console.log(e);
            switch (e.event) {
                case 'initiated':
                    this.$toast.loading({
                        duration: 0,
                        forbidClick: true,
                        message: '加载中'
                    });
                    break;
                case 'finished':
                    //this.$toast.clear();
                    this.$http
                        .post('/userBalance/iap', {
                            receiptData: e.product.transaction.appStoreReceipt
                        })
                        .then(res => {
                            this.getBalance();
                            this.$toast.clear();
                        })
                        .catch(e => {
                            console.log(e);
                            this.$toast.clear();
                        });
                    console.log(e.product.transaction.appStoreReceipt);
                    break;
                case 'cancelled':
                    this.$toast.clear();
                    this.orderId = null;
                    break;
            }
        },
        iapRecharge() {
            if (window.store) {
                window.store.order(this.iapId);
            }
            this.showIapRechargeDialog = false;
        }
    }
};
</script>
<style lang="less" scoped>
.balance-card {
    margin: 0 28px;
    position: relative;
    .cover {
        width: 100%;
        height: auto;
    }
    .stat {
        width: 60px;
        line-height: 24px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 0px 9px 0px 9px;
        font-size: 12px;
        color: white;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
    }
    .btn-open {
        height: 56px;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        .flex();
        justify-content: center;
        font-size: 14px;
        color: white;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 0px 0px 9px 9px;
        .arrow {
            width: 18px;
            height: 18px;
            margin: 0 16px;
            &.right {
                transform: rotate(180deg);
            }
        }
    }
}
.balance-amount {
    border-radius: 8px;
    margin: 16px 16px 0 16px;
    background: white;
    padding: 16px 12px;
    .label {
        line-height: 24px;
        font-size: 14px;
        color: @text3;
    }
    .value {
        line-height: 30px;
        color: black;
        margin-top: 4px;
        font-family: OSP;
        font-size: 36px;
        .flex();
        .number {
            flex-grow: 1;
        }
        button {
            width: 72px;
            height: 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: bold;
            .flex();
            justify-content: center;
            border: none;
            margin: 0 0 0 12px;
            padding: 0;
        }
        .btn-withdraw {
            color: @prim;
            background: fade(@prim, 10%);
            &:active {
                background: fade(@prim, 20%);
            }
        }
        .btn-recharge {
            color: white;
            background: @prim;
            &:active {
                background: shade(@prim, 20%);
            }
        }
    }
}
.cell-group {
    border-radius: 8px;
    margin: 16px 16px 0 16px;
    background: white;
    .cell {
        height: 56px;
        padding: 0 10px 0 12px;
        .flex();
        position: relative;
        .icon {
            width: 28px;
            height: 28px;
        }
        .label {
            color: @text3;
            font-size: 14px;
            margin-left: 10px;
            flex-grow: 1;
        }
        .into {
            width: 28px;
            height: 28px;
        }
        &::after {
            content: '';
            .setBottomLine();
            left: 16px;
            right: 16px;
        }
        &:last-child::after {
            content: none;
        }
    }
}

.wallet {
    background: @bg3;
    padding-top: 16px;
    position: relative;
    .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 {
        margin: 20px 0 0 16px;
        .text {
            line-height: 24px;
            font-size: 14px;
            color: black;
            font-weight: bold;
        }
        .num {
            line-height: 22px;
            font-size: 13px;
            margin-top: 2px;
            color: @text3;
        }
    }
    .input {
        margin-top: 22px;
        .flex();
        padding: 0 16px;
        position: relative;
        .yuan {
            width: 15px;
            height: 17px;
            position: relative;
            top: 4px;
        }
        input {
            padding: 0;
            margin: 0;
            border: none;
            line-height: 30px;
            font-size: 36px;
            color: black;
            margin-left: 13px;
            flex-grow: 1;
            font-family: OSP;
            z-index: 1;
            background: transparent;
        }
        .placeholder {
            position: absolute;
            left: 48px;
            top: 0;
            bottom: 0;
            right: 16px;
            margin: auto;
            font-weight: 400;
            color: @text3;
            font-size: 14px;
            line-height: 48px;
            z-index: 0;
        }
        .btn-all {
            width: 72px;
            height: 24px;
            background: fade(@prim, 10%);
            border-radius: 12px;
            color: @prim;
            border: none;
            font-size: 14px;
            font-weight: bold;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            right: 16px;
            z-index: 1;
            &:active {
                background: fade(@prim, 20%);
            }
        }
    }
    .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;
            }
        }
    }
    .iap-row {
        .flex();
        padding: 0 15px;
        margin-top: 15px;
        .iap-item {
            flex-basis: 0;
            flex-grow: 1;
            height: 50px;
            border-radius: 8px;
            background-color: @bg3;
            color: @text1;
            .flex-col();
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            .name {
                font-size: 14px;
            }
            .price {
                margin-top: 2px;
                font-size: 13px;
                color: @text3;
            }
            &:first-child {
                margin-left: 0;
            }
            &.active {
                background: @prim;
                color: white;
                .price {
                    color: rgba(255, 255, 255, 0.5);
                }
            }
        }
    }
}
::v-deep(.van-cell__title) {
    font-weight: bold;
}

.tips {
    padding: 16px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    .bottom(16px);
    transform: translateX(-50%);
    .tips-title {
        font-size: 14px;
        color: #3ab200;
        line-height: 24px;
    }
}
</style>
