<template>
    <div class="doubleSelect">
        <ve-mix-options
            style="width: 226px"
            :left-width="properties.left.width">
            <div slot="left">
                <el-select
                    v-model="value.left"
                    :placeholder="properties.left.placeholder"
                    :clearable="properties.left.clearable"
                    :filterable="properties.left.filterable"
                    :multiple="properties.left.multiple"
                    collapse-tags
                    style="width:100%"
                    @change="change()"
                >
                    <el-option
                        :key="properties.left.placeholder"
                        v-if="!properties.left.noplease"
                        value=""
                        :label="properties.left.placeholder"
                    />
                    <el-option
                        v-for="(label, value) in data.left"
                        :key="value"
                        :label="label"
                        :value="value"
                    />
                </el-select>
            </div>
            <div slot="right">
                <el-select
                    v-model="value.right"
                    :placeholder="properties.right.placeholder"
                    :clearable="properties.right.clearable"
                    :filterable="properties.right.filterable"
                    :noplease="properties.right.noplease"
                    :multiple="properties.right.multiple"
                    collapse-tags
                    style="width:100%"
                    @change="change"
                    :remote="properties.right.remote"
                    :remote-method="remoteMethod"
                >
                    <el-option
                        v-for="(label, value) in data.right"
                        :key="value"
                        :label="label"
                        :value="value"
                    />
                </el-select>
            </div>
        </ve-mix-options>
    </div>
</template>

<script>
import veMixOptions from "./veMixOptions";
import mixin from "./mixin";
import * as ObjUtil from "../../../util/pattern/object";
export default {
    components: {veMixOptions},
    mixins: [mixin],
    name: "DoubleSelect",
    data() {
        return {
            data: {left: {}, right: {}},
            value: {left: null, right: null},
        };
    },
    created() {
        this.initProperties({
            left:{
                width: '110px',
                placeholder: '全部',
                clearable:false,
                filterable:true,
                multiple: false,
                noplease:false
            },
            right:{
                placeholder:'请选择',
                multiple:false,
                clearable:true,
                filterable: true,
                /* 右侧筛选是否获取远程数据 */
                remote: false,
                /* 右侧筛选远程数据执行回调 */
                remoteMethod(query){

                }
            },
        });
    },
    methods: {
        async init(value = {}) {
            let {left, right} = value;
            left = left || (this.properties.left.multiple ? [] : "");
            right = right || (this.properties.right.multiple ? [] : "");
            this.value = {left, right};
            this.data = await this.getData();
        },
        /* 右侧筛选远程数据执行回调 */
        async remoteMethod(query) {
            if(!query)return;
            this.value.right = this.properties.right.multiple ? [] : "";
            this.data.right = await this.properties.right.remoteMethod(query);
        },
    }
};
</script>
<style lang="less" scoped>

</style>
