<template>
    <div class="nus_loginForm">
        <div class="nu_loginForm-input">
            <t-phone-input
                class="nu_input-item"
                v-model="myUsername"
                :placeholder="mbPlaceholder"
                :maxLen="11"
                :type="'number'"
                :icon="'\ue613'"
                :getCodeState="getCodeState"
                :nameText="myCodeBtnTxt"
                :readonly="lock"
                @getCode="_getCode">
            </t-phone-input>
            <nu-input
                class="nu_input-item"
                :icon="'\ue614'"
                :placeholder="codePlaceholder"
                v-model="code"
                :maxLen="4"
                :type="'number'"
                :readonly="lock || readonly">
            </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 TPhoneInput from './phoneInput/PhoneInput';
import NuInput from '../../../../form/input';
import NuButton from '../../../../form/button';

export default {
    name: 'NuLoginBox',
    extends: LoginBoxTmp,
    props: {
        mbPlaceholder: {
            type: String,
            default: '手机号'
        },
        codePlaceholder: {
            type: String,
            default: '验证码'
        }
    },
    components: {
        TPhoneInput,
        NuInput,
        NuButton
    },
    methods: {
        /**
         * 设置验证码
         * @param {Event} data 事件对象
         */
        setCode (data) {
            this.readonly = false;
            this.code = data && data.Result;
        },
        _getCode(evt) {
            const _that = this;
            _that.getCode(evt, _that.setCode);
        }
    }
};
</script>

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

.nus_loginForm {
    .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;
        }
    }
    .getCode {
        padding: 7px 0;
        .nus_btn{
            .nu_btn {
                line-height: 34px;
            }
        }
    }
    .nu_loginForm-btn {
        margin-top: 30px;
        .nus_btn {
            .nu_btn {
                border-radius: 5px;
                line-height: 48px;
                font-size: 16px;
            }
        }
    }
}
</style>
