<template>
    <div class="nus_nameLoginBox">
        <div class="nu_loginForm-input">
            <nu-input
                class="nu_input-item"
                :icon="'\ue613'"
                :placeholder="mbPlaceholder"
                :maxLen="11"
                v-model="myUsername"
                :type="'number'"
                :readonly="lock || readonly">
            </nu-input>
            <nu-input
                class="nu_input-item"
                :icon="'\ue614'"
                :placeholder="codePlaceholder"
                v-model="password"
                :readonly="lock || readonly"
                :type="'password'">
            </nu-input>
        </div>
        <div class="nu_loginForm-btn">
            <nu-button
                class="nu_btn-btn"
                :disabled="!submitState"
                :name-text="btnTxt"
                @click="checkAndlogin">
            </nu-button>
        </div>
    </div>
</template>

<script>
import LoginBoxTmp from '../../_comm/LoginBoxTmp';
import NuInput from '../../../../form/input';
import NuButton from '../../../../form/button';

export default {
    name: 'NuNameLoginBox',
    extends: LoginBoxTmp,
    props: {
        mbPlaceholder: {
            type: String,
            default: '手机号'
        },
        codePlaceholder: {
            type: String,
            default: '密码'
        }
    },
    components: {
        NuInput,
        NuButton
    },
    data () {
        return {
            readonly: false
        };
    }
};
</script>

<style lang="scss">
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';

.nus_nameLoginBox {
    .nus_button-box {
        width: 100%;
        height: 100%;
    }
    .nus_input{
        .nu_pre-icon{
            font-size: 16px;
        }
    }
    .nu_btn-btn{
        height: 100%;
        width: 100%;
    }
    .nu_input-item {
        overflow: hidden;
        border-bottom: {
            width: 1px;
            style: solid;
        };
        .nu_input {
            font-size: $nulogin-code-login-input-font-size;
        }
    }
    .nu_loginForm-btn {
        margin-top: 30px;
        .nus_btn {
            .nu_btn {
                border-radius: 5px;
                line-height: 48px;
                font-size: 16px;
            }
        }
    }
}
</style>
