<template>
    <div class="selectMixDialog">
        <ve-mix-options
            style="width: 226px"
            :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
                    style="width:100%"
                    @change="onChange"
                >
                    <el-option
                        :key="property.leftPlaceholder"
                        v-if="!property.leftNoplease"
                        value=""
                        :label="property.leftPlaceholder"
                    />
                    <el-option
                        v-for="(label, val) in leftMap"
                        :key="val"
                        :label="label"
                        :value="val"
                    />
                </el-select>
            </div>
            <div slot="right">
                <select-dialog
                    v-if="property.rightProperty"
                    :property="property.rightProperty"
                    @change="changeRight"
                    @keyup="submit"
                    :ref="property.rightProperty.type"
                />
            </div>
        </ve-mix-options>
    </div>
</template>

<script>
import MapUtil from "../../../util/pattern/map";
	import SelectDialog from "./selectDialog.vue"
    export default {
		name: "SelectMixDialog",
		components:{SelectDialog},
        data() {
            return {
                leftMap:{},
                value:[],
            };
        },
        props: {
            getData:{
                type:Function,
            },
            property:{
                type:Object,
                default:{
                }
            }
		},
        created() {
            MapUtil.setDftValue(this.property,{
                leftPlaceholder:'全部',
	            leftMultiple: false,
	            leftClearable:false,
	            leftFilterable:false,
	            leftNoplease:false,
				leftWidth: '75px',
				rightProperty: {
					type: "userSelect",
					placeholder: "点击选择",
					schoolId: "",
					hasInternalUser: "",
				}
            });
        },
        methods: {
            init(value){
	            if (value) {
					this.value = [value[0], value[1]];
					this.$nextTick(()=>{
						this.$refs[this.property.rightProperty.type].init(this.value[1]);
					})
	            } else {
		            this.value = ['', ''];
	            }
            	let vm = this;
	            this.getData().then(function(d){
					vm.leftMap = d;
	            });
            },
            changeRight(obj){
				if (obj && obj.length > 0) {
					this.value[1] = app.ListUtil.toArray(obj, 'labelId');
				} else {
					this.value[1] = "";
				}
				this.onChange();
            },
            onChange(){
                this.$emit("update:model",this.value);
                this.$emit("change",this.value);
            },
            keyup(){
                this.$emit("keyup");
            }
        }
    };
</script>
<style  lang="less" scoped>

</style>
