<template>
    <div class="nus_phone-input">
        <nu-input
            class="nu_phone-input"
            v-model="myValue"
            :placeholder="placeholder"
            :maxLen="maxLen"
            :readonly="readonly"
            :type="type"
            :icon="icon">
        </nu-input>
        <div class="nu_getCode">
            <nu-button
                class="nu_btn-btn"
                :disabled="!btnState"
                :name-text="nameText"
                @click="getCode">
            </nu-button>
        </div>
    </div>
</template>

<script>
import LoginTmp from '../../../_comm/LoginTmp';
import NuInput from '../../../../../form/input';
import NuButton from '../../../../../form/button';
import vModel from '../../../../../../Mixins/vModel';

export default {
    extends: LoginTmp,
    name: 'NuPhoneInput',
    props: {
        maxLen: {
            default: 11
        },
        nameText: {},
        getCodeState: {},
        icon: { // 前缀图标
            type: String,
            default: '\ue613'
        },
        placeholder: { // 底纹字
            type: String,
            default: ''
        },
        readonly: { // 是否为只读
            type: Boolean,
            default: false
        },
        type: { // 文本框类型
            type: String,
            default: 'text'
        }
    },
    mixins: [vModel()],
    watch: {
        /**
         * 监听表单的值
         * @param {String} nowVal 表单值
         */
        myValue () {
            this._valueChange();
        }
    },
    components: {
        NuInput,
        NuButton
    },
    computed: {
        btnState() {
            const _that = this;
            return _that.getCodeState;
        }
    },
    methods: {
        getCode(evt) {
            const _that = this;
            // if (_that.btnState) {
            // }
            _that.$emit('getCode', evt);
        }
    }
};
</script>

<style lang="scss">
.nus_phone-input {
    display: flex;
    .nu_phone-input{
        display: block;
    }
    .nu_getCode {
        padding: 5px 0 5px 8px;
        box-sizing: border-box;
        height: 44px;
        min-width: 108px;
    }
    .nus_button{
        padding: 0;
        line-height: 34px;
        width: 100%;
    }
}
</style>
