<template>
    <view>
        <view class="withdrawal">
            <image class="withdrawal-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/withdrawal_icon.png"></image>
            <view class="withdrawal-price">{{ balance }}</view>
            <view class="withdrawal-name">（我的账户余额）</view>
        </view>
        
        <view class="withdrawalTips">
            当前现金金额低于2元不可提现，每次提现的额度不低于2元，提现手续费按照到账周期收取
        </view>
        
        <view class="withdrawalForm">
            <form @submit="formSubmit">
                <view class="withdrawalForm-label">
                    <view class="withdrawalForm-label-name">提现金额</view>
                    <input type="digit" :value="amount" placeholder="请输入提现金额" @input="getAmount" />
                </view>
                <view class="withdrawalForm-label">
                    提现费用收取，手续费{{ tax }}%
                </view>
                <button class="withdrawalForm-btn" formType="submit" :disabled="disabled">立即提现</button>
                <navigator class="withdrawalForm-url" hover-class="none" :url="'/pages/account/withdrawal_record?status=' + '' + '&idx=0'">提现记录</navigator>
            </form>
        </view>
    </view>
</template>

<script>
    import { withdraws, withdrawsForm } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                balance     : '',   //余额
                tax         : '',   //手续费
                amount      : '',   //提现金额
                disabled    : false //按钮状态
    		}
    	},
        onLoad(options) {
            // 获取提现前置账户信息
            this.withdrawsInfo();
        },
        methods: {
            // 提现前置账户信息
            withdrawsInfo() {
                withdraws().then(res=>{
                    this.balance = res.balance
                    this.tax     = res.tax
                }).catch(err=>{})
            },
        
            // 获取提现金额
            getAmount (val) {
                var money;
                if (/^(\d?)+(\.\d{0,1})?$/.test(val.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
                    money = val.detail.value;
                } else {
                    money = val.detail.value.substring(0, val.detail.value.length - 1);
                }
                this.amount = money
            },
        
            // 提现表单填写
            formSubmit(e) {
                let newAmount = this.amount
                if(newAmount > 1) {
                    withdrawsForm({
                        amount: newAmount,
                        channel: "mini"
                    }).then(res=>{
                        this.disabled = true
            
                        uni.showToast({
                            title: '提现申请提交成功',
                        })
            
                        setTimeout(()=>{
                            uni.redirectTo({
                                url: "/pages/account/withdrawal_record?status=''&idx=0"
                            })
                        },2000)
                       
                    }).catch(err=>{})
                }else {
                    uni.showToast({
                        title: '金额不得低于2元',
                        icon: 'none'
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 余额 */
    .withdrawal{
        background-color: #fff;
        text-align: center;
        padding: 30rpx 0;
    }
    
    .withdrawal-img {
        width: 180rpx;
        height: 180rpx;
    }
    
    .withdrawal-price {
        color: #df0000;
        font-size: 50rpx;
        margin: 10rpx 0;
    }
    
    .withdrawal-name {
        font-size: 28rpx;
        color: #666666;
    }
    
    .withdrawalTips {
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #b9c6d2;
    }
    
    .withdrawalForm-label {
        background-color: #fff;
        margin-bottom: 30rpx;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        display: flex;
        input {
            background-color: transparent;
            padding-left: 50rpx;
            box-sizing: border-box;
        }
    }
    
    .withdrawalForm-btn {
        background-color: #ff6d6d;
        width: calc(100% - 40rpx) !important;
        color: #fff;
        height: 90rpx !important;
        line-height: 90rpx !important;
        padding: 0;
        margin-top: 40rpx;
        font-size: 32rpx;
    }
    
    .withdrawalForm-url {
        text-align: center;
        width: 100%;
        margin-top: 20rpx;
        position: relative;
        color: #ff6d6d;
        &::after {
            position: absolute;
            content: '';
            left: calc(50% - 60rpx);
            bottom: 0rpx;
            width: 120rpx;
            height: 4rpx;
            background-color: #ff6d6d;
        }
    }
</style>
