<template>
    <div class="doubleSelect">
        <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="onChangeLeft"
                >
                    <el-option
                        :key="property.leftPlaceholder"
                        v-if="!property.leftNoplease"
                        value=""
                        :label="property.leftPlaceholder"
                    />
                    <el-option
                        v-for="(label, val) in leftData"
                        :key="val"
                        :label="label"
                        :value="val"
                    />
                </el-select>
            </div>
            <div slot="right">
                <el-select
                    v-model="value[1]"
                    :placeholder="property.rightPlaceholder"
                    :clearable="property.rightClearable"
                    filterable
                    multiple
                    :loading="property.rightLoading"
                    collapse-tags
                    style="width:100%"
                    @change="onChange"
                    remote
                    :remote-method="(query)=>{  property.remoteMethod(rightData, query, checkedData)}"
                    ref="select"
                >
                    <el-option
                        v-for="ite in rightData.options"
                        :key="ite[property.props.value]"
                        :label="ite[property.props.label]"
                        :value="ite[property.props.value]"
                    />
                </el-select>
            </div>
        </ve-mix-options>
    </div>
</template>

<script>
import MapUtil from "../../../util/pattern/map";
import * as ObjUtil from "../../../util/pattern/object";
import veMixOptions from "./veMixOptions";
    export default {
        name: "doubleSelect",
        components:{veMixOptions},
        data() {
            return {
				leftData:{},
	            rightData: {
		            options: []
	            },
                value:[],
                checkedData:[], // 支持多选时 已选中的数据
            };
        },
        props: {
            getData:{
                type:Function,
            },
            property:{
                type:Object,
                default:{
                }
            }
        },
        created() {
            MapUtil.setDftValue(this.property,{
                leftPlaceholder:'全部',
	            leftMultiple: false,
	            rightPlaceholder:'请输入',
	            leftClearable:false,
	            rightClearable:true,
	            leftFilterable:false,
	            leftNoplease:false,
                rightLoading:false,
                leftChangeInitRight: false,
	            leftWidth: '75px',
	            props:{
		            label: 'name',
		            value: 'id',
	            },
	            remoteMethod(item) {
		            item.options = []
	            },
            });
        },
        computed: {
            optionsMap: {
                get() {
                    return this.rightData.options.reduce((map, item)=> {
                        map[item[this.property.props.value]] = item;
                        return map;
                    }, {});
                }
            }
        },
        methods: {
            init(value){
	            if (value) {
		            this.value = [value[0], value[1]];
	            } else {
		            this.value = ['', property.rightMultiple ? [] : ''];
	            }
            	let vm = this;
	            this.getData().then(function(d){
		            vm.leftData = d;
	            });
	            this.property.remoteMethod(this.rightData,"");
            },
            onChangeLeft() {
                if(this.property.leftChangeInitRight) {
                    this.rightData.options = [];
                    this.value[1] = property.rightMultiple ? [] : '';
                }
                this.onChange();
            },
            onChange(){
                this.$emit("update:model",this.value);
                this.$emit("change",this.value);
                this.checkedData = ObjUtil.copy(this.getCheckedData());
            },
            getCheckedData() {
                if (this.value[1].length == 0) return [];
                return this.value[1].reduce((list, key)=> {
                    list.push(this.optionsMap[key])
                    return list;
                }, [])
            },
            keyup(){
                this.$emit("keyup");
            }
        }
    };
</script>
<style lang="less" scoped>

</style>
