<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ pageState === 'addBank' ? i18n.AddBankInformation : i18n.EditBankInformation }}</navigation>
        <view class="content">
            <view class="inputBody">
                <view class="title">{{ i18n.FirstName }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="name" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.enterName">
                    </u-input>
                </view>
                <view class="title">{{ i18n.Account }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="account" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.enterAccount">
                    </u-input>
                </view>
            </view>
            <view class="inputBody">
                <view class="title">{{ i18n.BankName }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="bankName" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.enterBankName">
                    </u-input>
                </view>
                <view class="title">{{ i18n.BankCode }}</view>
                <view class="input-item">
                    <u-input class="input" type="password" v-model="bankCode" color="#fff" fontSize="32rpx"
                        border="none" :placeholder="i18n.enterBankCode">
                    </u-input>
                </view>
            </view>


            <u-button class="button" color="#00E8A2" throttleTime="500" :disabled="btnIsCanClick">{{ i18n.Confirm }}
            </u-button>

        </view>




    </view>
</template>

<script>
export default {
    name: "withdrawalRecord",
    data() {
        return {
            pageState: 'addBank', // 页面状态,是添加还是编辑银行卡
            name: '',
            account: '',
            bankName: '',
            bankCode: '',
        };
    },
    computed: {
        i18n() {
            return this.$t("withdrawal");
        },
        btnIsCanClick() { // 按钮是否可以点击
            if (this.name && this.account && this.bankName && this.bankCode) {
                return false; // 有值才可以点
            } else {
                return true
            }
        }
    },
    onLoad(option) {
        console.log(option);
        this.pageState = option.mode || 'addBank';
    },
    onShow() { },
    methods: {
        change(e) {
            console.log(e);
        }

    },
}
</script>

<style lang="scss" scoped>
.main {

    .content {
        margin-top: 200rpx;
        padding: 32rpx;

        .inputBody {
            overflow: hidden;
            background: #211F32;
            border-radius: 32rpx;
            padding: 32rpx;
            margin-bottom: 32rpx;

            .title {
                font-size: 32rpx;
                color: #A1A0A8;
                margin-bottom: 20rpx;
            }

            .input-item {
                height: 112rpx;
                background: #323045;
                border-radius: 32rpx;
                padding-left: 40rpx;
                margin-bottom: 20rpx;

                .input {
                    height: 112rpx;
                }
            }



        }


        .button {
            position: fixed;
            bottom: 40rpx;
            width: 686rpx;
            box-sizing: border-box;
            height: 112rpx;
            background: #00E8A2;
            border-radius: 32rpx;
            font-weight: 700;
            font-size: 32rpx;
            color: #15141F !important;

        }
    }

}
</style>
