<template>
    <div class="doubleSelect">
        <ve-mix-options
            class="ve-mix-options"
            :left-width="property.leftWidth"
        >
            <div slot="left">
                <el-select
                    v-model="value[0]"
                    :placeholder="property.leftPlaceholder"
                    :clearable="property.leftClearable"
                    :filterable="property.leftFilterable"
                    :multiple="property.leftMultiple"
                    collapse-tags
                    @change="onChange"
                >
                    <el-option
                        :key="property.leftPlaceholder"
                        v-if="!property.leftNoplease"
                        value=""
                        :label="property.leftPlaceholder"
                    />
                    <el-option
                        v-for="(label, val) in data"
                        :key="val"
                        :label="label"
                        :value="val"
                    />
                </el-select>
            </div>
            <div slot="right">
                <el-input
                    v-model="value[1]"
                    :placeholder="property.rightPlaceholder"
                    :clearable="property.rightClearable"
                    :maxlength="property.rightMaxlength"
                    @keyup.native.enter="keyup"
                    @change="onChange"
                    :disabled="property.leftNullDisabledInput && !value[0]"
                />
            </div>
        </ve-mix-options>
    </div>
</template>

<script>
import MapUtil from "../../../util/pattern/map";
export default {
    name: "selectInputMix",
    data() {
        return {
            data: {},
            value:[],
        };
    },
    props: {
        getData:{
            type:Function,
        },
        property:{
            type:Object,
            default: ()=>{}
        }
    },
    created() {
        MapUtil.setDftValue(this.property,{
            leftPlaceholder:'全部',
            leftMultiple: false,
            rightPlaceholder:'请输入',
            rightMultiple: true,
            rightMaxlength: 180,
            leftClearable:false,
            rightClearable:true,
            leftFilterable:false,
            rightFilterable:true,
            leftNoplease:false,
            rightNoplease:true,
            leftWidth: '75px',
            leftNullDisabledInput: false, // 左侧为空时，禁用input
        });
    },
    methods: {
        init(value){
            if (value) {
                this.value = [value[0], value[1]];
            } else {
                this.value = ['', ''];
            }
            let vm = this;
            this.getData().then(function(d){
                vm.data = d;
            });
        },
        onChange(){
            // 增加判断条件，当设置禁用input时，判断select值是否为空，为空时，清空input内容
            if (!this.value[0] && this.property.leftNullDisabledInput) {
                this.value[1] = "";
            }
            this.$emit("update:model",this.value);
            this.$emit("change",this.value);
        },
        keyup(){
            this.$emit("keyup");
        }
    }
};
</script>
<style  lang="less" scoped>
.ve-mix-options {
    width: 226px;
    .el-select {
        width: 100%;
    }
}
</style>
