<template>
    <wallet-modal title="充值" :show="isShow"  @click:close="hide">
        <view class="recharge-container">
            <view class="rc-balance">
                <text class="rb-txt">钱包余额：</text>
                {{ balance || 0 }}元
            </view>
            <input type="digit" class="rc-ipt" v-model="iptNum" placeholder="请输入金额">
            <view class="rc-btns">
                <wm-button @click="hide">取消</wm-button>
                <wm-button green @click="confirmBtn">确认</wm-button>
            </view>
        </view>
    </wallet-modal>
</template>

<script>
import walletModal from '../../../components/wallet_modal.vue';
import wmButton from '../../../components/wm_button.vue';
import { showNone } from '@/utils/util';
export default {
    props: {
        balance: {
            type: Number,
            default: 0
        }
    },
    components: {
        walletModal,
        wmButton,
    },
    data() {
        return {
            isShow: false,
            iptNum: '',
            initData: {},
        }
    },
    methods: {
        show(data){
            this.isShow = true;
            this.initData = data ?? {};
        },
        hide(){
            this.isShow = false;
        },
        confirmBtn(){
            let { initData, iptNum, hide } = this;
            if(!iptNum || isNaN(iptNum) || Number(iptNum) <= 0)return showNone('请输入正确金额！');
            initData?.success?.(iptNum);
            hide();
        }
    }
}
</script>

<style lang="scss">
    .recharge-container{
        padding: 0 50upx;
        .rc-balance{
            margin-top: 60upx;
            @include flcw(28upx, 40upx, $mColor);
            @include tHide;
            .rb-txt{
                color: #1A1A1A;
            }
        }
        .rc-ipt{
            margin-top: 20upx;
            padding: 0 20upx;
            display: block;
            height: 108upx;
            border-radius: 10upx;
            background: #F2F2F7;
            @include flcw(32upx, 44upx, #1A1A1A);
        }
        .rc-btns{
            margin-top: 80upx;
            @include ctf(space-between);
        }
    }
</style>