<template>
    <div class="select-input">
        <el-input ref="selectInput" v-if="value.value == 'O'" v-model="value.label" @focus="$emit('focus')" class="input-with-select"  :maxlength="property.maxlength" :placeholder="property.placeholder" :clearable="property.clearable" @change="onChange()">
            <el-select v-model="value.value" slot="prepend"  @change="change" style="width: 75px;">
                <el-option label="同手机号" value="A"></el-option>
                <el-option label="其他" value="O"></el-option>
            </el-select>
        </el-input>
        <el-select  ref="select" v-if="value.value != 'O'"  v-model="value.value" @change="change" @focus="$emit('focus')">
            <el-option label="同手机号" value="A"></el-option>
            <el-option label="其他" value="O"></el-option>
        </el-select>
    </div>
</template>

<script>
    /**
     *
     *
     * <item @getData="getData" @change="change" :model.sync="model"></item>
     *  parent.$refs.item.init(model);
     */
    export default {
        name: "wxcode",
        data() {
            return {
                value:{
                    value: '',
                    label: '',
                },
            };
        },
        props: {
            model:{
                type:Object,
                default: ()=>{}
            },
            property:{
                type:Object,
                default:()=>{}
            }
        },
        created() {
            MapUtil.setDftValue(this.property,{
                maxlength:18,
                clearable:true,
                placeholder:'请输入',
                emptyValue: false,
            });
        },
        methods: {
            init(value){
                let vm=this;
                if (!this.property.emptyValue) {
                    vm.value=value;
                } else {
                    vm.value.value = 'O';
                }
                vm.oldValue=value;
                vm.isFocus=true;//当前组件获取到焦点
                vm.$nextTick(function () {
                    if (vm.value.value == 'O') {
                        vm.$refs.selectInput.focus();
                    } else {
                        vm.$refs.select.focus();
                    }
                })
            },
            change(typeCode) {
                this.$nextTick(()=>{
                    if (typeCode != 'O') {
                        if (this.property.emptyValue) {
                            this.value.label = "";
                            this.onChange();
                        } else {
                            this.getData().then(data=>{
                                this.value.label = data;
                                this.onChange();
                            })
                        }
                        this.$refs.select.focus();
                    } else {
                        this.value.label = '';
                        this.onChange();
                        this.$refs.selectInput.focus();
                    }
                })

            },
            getData() {
                let data = this.property.getWxCode();
                if (data instanceof Promise) {
                    return data
                } else {
                    return new Promise(resolve => {
                        resolve(data);
                    })
                }
            },
            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>
