<template>
    <app-layout title="我要提现">
        <view class="withdraw-section">
            <view class="title">提现金额</view>
            <view class="input-box">
                <text class="icon">¥</text>
                <input
                    class="input"
                    type="number"
                    v-model="money"
                    :placeholder="'请输入提现金额，不可低于' + min + '元'"
                    placeholder-class="placeholder-style-4"
                />
            </view>
            <view class="total-box">
                <text class="text">可提现金额：</text>
                <text class="num">¥ {{ userInfo.serviceData.disposableBalance }}</text>
            </view>
        </view>
        <view class="withdraw-section withdraw-desc">
            <view class="title">提现说明</view>
            <view class="content">
                <rich-text :nodes="explain"></rich-text>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">确定提现</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapState } from "vuex";
export default {
    name: "member-cash-withdraw",
    data() {
        return {
            min: 0,
            money: null,
            balance: 0,
            explain: "",
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.info,
        }),
    },
    onLoad() {},
    async onShow() {
        await this.$store.dispatch("user/info", true);
        this.$models.user.withdrawExplain().then((data) => {
            this.explain = data.tixian_content;
            this.min = data.min;
        });
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        submit() {
            if (this.money <= 0) {
                return this.$utils.toast("请输入提现金额");
            }
            this.$models.user
                .withdraw(this.money)
                .then((response) => {
                    this.$utils.toast(response.msg);
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.withdraw-section {
    width: 100%;
    box-sizing: border-box;
    padding: 38rpx 46rpx;
    background-color: #ffffff;
    .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #2d2d2d;
        line-height: 30rpx;
    }
    .input-box {
        display: flex;
        align-items: center;
        margin: 50rpx 0;
        .icon {
            font-size: 48rpx;
            line-height: 48rpx;
            font-weight: bold;
            color: #f83232;
        }
        .input {
            width: 500rpx;
            font-size: 32rpx;
            color: #666666;
            margin-left: 36rpx;
        }
    }
    .total-box {
        line-height: 30rpx;
        .text {
            font-size: 30rpx;
            color: #333333;
        }
        .num {
            font-weight: bold;
            color: #fb3636;
        }
    }
}
.withdraw-desc {
    margin-top: 28rpx;
    .content {
        font-size: 26rpx;
        color: #999999;
        line-height: 40rpx;
        padding: 50rpx 0 80rpx 0;
    }
}
</style>