<template>
    <BasePage title="余额提现">
        <van-cell-group>
            <van-cell is-link class="account-cell" @click="showCard = true;">
                <template #title>
                    <div class="account-container">
                        <span class="title">提现账户</span>
                        <div class="account">
                            <div v-if="card" class="card">
                                <img :src="card.bankspname === '支付宝' ? '/img/aliicon.png' : '/img/bankcardicon.png'"
                                    height="24" width="24" style="object-fit: cover;" />
                                <span class="code">{{ card.bankcardnumber }}</span>
                            </div>
                            <span v-else class="card">请选择到账账户</span>
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="cashout">
            <span class="title">提现金额</span>
            <div class="amount">
                <span class="prefix">￥</span>
                <van-field v-model="form.amount" type="number" />
                <a style="color: var(--van-danger-color);white-space: nowrap;font-size: 3.733vw;"
                    @click.stop="form.amount = wallet.Balance">全部提现</a>
            </div>
            <span class="desc">当前余额：{{ wallet.Balance }}</span>
        </div>
        <div class="cashout-remark">
            <p>注：</p>
            <p>1、提现手续费{{ cashoutConfig.CommissionRate * 100 }}%</p>
            <p>2、最低提现金额{{ cashoutConfig.BaseCash }}元</p>
            <p>3、提现后{{ cashoutConfig.Cycle }}个工作日内审核发放</p>
        </div>
        <van-button type="danger" block round @click="cashout"
            style="margin: 0 6.667vw; width: calc(100% - 13.333vw);">提现</van-button>

        <van-action-sheet v-model:show="showCard" safe-area-inset-bottom style="min-height: 50%" title="选择提现账户">
            <van-cell-group>
                <BaseList class="b_l_w" ref="BaseList" url="/v1/client/DUserbankcardsClient"
                    :parseData="res => res.data">
                    <template v-slot="{ item }">
                        <van-cell class="cashout-card" is-link @click="selectCard(item)">
                            <template #title>
                                <div class="card">
                                    <img :src="item.bankspname === '支付宝' ? '/img/aliicon.png' : '/img/bankcardicon.png'"
                                        height="30" width="30" style="object-fit: cover;" />
                                    <span class="code">{{ item.bankcardnumber }}</span>
                                </div>
                            </template>
                        </van-cell>
                    </template>
                </BaseList>
                <van-cell style="position: fixed; bottom: 3.333vw;" is-link title="新增提现账户" icon="peer-pay"
                    @click="$router.push('/CashoutAccount')" />
            </van-cell-group>
        </van-action-sheet>
    </BasePage>
</template>

<script>
export default {
    name: 'Cashout',
    mounted() {
        this.init();
    },
    data() {
        return {
            form: {
                amount: 0,
                bankcardid: ''
            },
            cashoutConfig: {
                CommissionRate: 0,
                BaseCash: 0,
                Cycle: 1
            },
            wallet: { Balance: 0 },
            showCard: false,
            card: null,
        }
    },
    methods: {
        init() {
            this.$get('/v1/client/DUsersClient').then(data => {
                this.wallet.Balance = data.data.zijin;
            }).catch(err => {
                this.$showFailToast(err.message);
            });
        },
        selectCard(item) {
            this.card = item;
            this.form.bankcardid = item.id;
            this.showCard = false;
        },
        cashout() {
            if (!this.form.bankcardid) {
                this.$showFailToast('请选择到账账户');
                return;
            }
            if (!this.form.amount || this.form.amount < this.cashoutConfig.BaseCash) {
                this.$showFailToast(`提现金额必须大于${this.cashoutConfig.BaseCash}`);
                return;
            }
            const commission = (this.form.amount * this.cashoutConfig.CommissionRate).toFixed(2);
            this.$showConfirmDialog({
                title: "提示",
                message: `您本次提现${this.form.amount}元${commission > 0 ? `，提现手续费${commission}元` : ''}，是否确认提现？`,
            }).then(() => {
                this.$post('/v1/client/DUserwithdrawsClient', {
                    bankcardid: this.form.bankcardid,
                    amount: this.form.amount,
                }).then(() => {
                    this.$showSuccessToast('提交成功');
                    this.$router.replace('/CashoutRecord');
                }).catch(err => {
                    this.$showFailToast(err.message);
                });
            }).catch(() => { });
        },
    }
}
</script>

<style lang="less">
.account-cell {
    padding: 10.667vw 6.667vw;
    display: flex;
    align-items: center;
    background: #f8f8f8;

    .account-container {
        display: flex;
        align-items: center;

        .card {
            display: flex;
            align-items: center;

            .code {
                margin-left: 1.333vw;
                font-size: 3.333vw;
            }
        }

        .title {
            color: #333;
        }

        .account {
            margin-left: 6.667vw;
            display: flex;
            flex-direction: column;

            .card {
                color: #000;
            }

            .desc {
                color: #999;
                font-size: 3vw;
            }
        }
    }
}

.cashout {
    padding: 6.667vw;

    .title {
        font-size: 3.733vw;
        color: #333;
    }

    .amount {
        margin: 3.333vw 0;
        display: flex;
        align-items: center;
        padding: 3vw 0;
        border-bottom: 1px solid #f8f8f8;

        .van-cell:after {
            content: none;
        }

        .prefix {
            font-size: 8vw;
            font-weight: bold;
        }

        .van-field {
            display: flex;
            align-items: flex-end;
            padding: unset;
            font-size: 8vw;
        }
    }
}

.cashout-card {
    display: flex;
    align-items: center;

    .card {
        display: flex;
        align-items: center;

        .code {
            margin-left: 3.333vw;
            font-size: 3.333vw;
        }
    }
}

.cashout-remark {
    margin: 0 6.667vw 6.667vw 6.667vw;
}
</style>