<template>
    <div class="input">
        <template v-if="propertys.type==='input'">
            <el-input
                    :placeholder="propertys.placeholder"
                    @keyup.enter="keyup"
                    @focus="$emit('focus')"
                    :maxlength="propertys.maxlength"
                    :clearable="propertys.clearable"
                    v-model="value"
                    @change="onChange()"
                    ref="input"
            />
        </template>
        <template v-else-if="propertys.type === 'number'">
            <el-input
                    :placeholder="propertys.placeholder"
                    @keyup.enter="keyup"
                    @focus="$emit('focus')"
                    @input="limitNum()"
                    :maxlength="propertys.maxlength"
                    :clearable="propertys.clearable"
                    v-model="value"
                    @change="onChange()"
                    ref="input"
            />
        </template>
        <template v-else-if="propertys.type === 'textarea'">
            <el-input
                    type="textarea"
                    :rows="propertys.rows"
                    :placeholder="propertys.placeholder"
                    @keyup.enter="keyup"
                    @focus="$emit('focus')"
                    :maxlength="propertys.maxlength"
                    :clearable="propertys.clearable"
                    v-model="value"
                    @change="onChange()"
                    ref="input"
            />
        </template>
    </div>
</template>

<script>
    /**
     *
     *
     * <item @getData="getData" @change="change" :model.sync="model"></item>
     *  parent.$refs.item.init(model);
     */
    export default {
        name: "edit_input",
        data() {
            return {
                value:"",
                propertys:{},
            };
        },
        props: {
            model:{
                type:[String, Number],
                default:""
            },
            property:{
                type:Object,
                default:()=>{}
            }
        },
        created() {
            MapUtil.setDftValue(this.propertys,{
                type:'input',
                rows:'2',
                maxlength:18,
                clearable:true,
                placeholder:'请输入',
                ...this.property
            });
        },
        methods: {
            init(value){
                let vm=this;
                vm.value=value;
                vm.oldValue=value;
                vm.isFocus=true;//当前组件获取到焦点
                vm.$nextTick(function () {
                    vm.$refs.input.focus();
                })
            },
            onChange(){
                this.$emit("update:model",this.value);
                this.$emit("change",this.value);
            },
            limitNum() {
                let vm = this;
                this.value= this.value.replace(/[^\d]/g, "");
            },
            /**
             * 组件数据提交
             */
            submit(){
                let vm=this;
                vm.$emit("submit",{
                    sucess:()=>{
                    },
                    error:(obj)=>{//obj 错误信息
                        this.$message(obj.msg)
                    }
                });
            },
            keyup(){
                this.submit();
            }
        },
	    watch: {
		    'value': function (newData, oldData) {
			    if (StringUtil.hasLength(newData) && this.propertys.enterType == 'userName') {
				    this.value = newData.replace(/[\s+\+\'\[\]\{\}]/g, '');
			    }
		    },
	    },
    };
</script>
