<template>
    <div class="select-input">
        <el-input ref="selectInput" v-if="value.value == propertys.otherCode" v-model="value.label" @focus="$emit('focus')"  :maxlength="propertys.maxlength" :placeholder="propertys.placeholder" :clearable="propertys.clearable" class="input-with-select" @change="onChange()">
            <el-select v-model="value.value" slot="prepend"  @change="change" style="width: 75px;">
                <el-option v-for="(value,key) in map" :key="key"  :label="value" :value="key"></el-option>
            </el-select>
        </el-input>
        <el-select  v-if="value.value != propertys.otherCode" automatic-dropdown ref="select" v-model="value.value" @change="change" @focus="$emit('focus')">
            <el-option v-for="(value,key) in map" :key="key"  :label="value" :value="key"></el-option>
        </el-select>
    </div>
</template>

<script>
    /**
     *
     *
     * <item @getData="getData" @change="change" :model.sync="model"></item>
     *  parent.$refs.item.init(model);
     */
    export default {
    name: "treeSelect",
    data() {
        return {
            value: {
                type: Object,
                default: {
                    label: '',
                    value: ''
                },
            },
            map: {},
            propertys:{},
        };
    },
    props: {
        model:{
            type:Object,
            default: ()=>{}
        },
        getData:{
            type:Function,
        },
        property:{
            type:Object,
            default:()=>{}
        }
    },
    created() {
        this.getData().then(data => {
            this.map = data
        });
        MapUtil.setDftValue(this.propertys,{
            maxlength:18,
            clearable:true,
            placeholder:'请输入',
            otherCode:'other',
            ...this.property,
        });
    },
    methods: {
        init(value){
            let vm=this;
            vm.value=value;
            vm.oldValue=value;
            vm.isFocus=true;//当前组件获取到焦点
            vm.$nextTick(function () {
                if (vm.value.value == this.propertys.otherCode) {
                    vm.$refs.selectInput.focus();
                } else {
                    vm.$refs.select.focus();
                }
            })
        },
        change(value) {
            this.$nextTick(()=>{
                if (value != this.propertys.otherCode) {
                    this.value.label = this.map[value]
                    this.$refs.select.focus();
                    this.onChange()
                } else {
                    this.value.label = ''
                    this.$refs.selectInput.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();
        }
    }
};
</script>
