<template>
    <div class="doubleSelect">
        <ve-mix-options
            style="width: 226px"
            :left-width="properties.left.Width"
        >
            <div slot="left">
                <el-select
                    v-model="value[0]"
                    :placeholder="properties.left.Placeholder"
                    :clearable="properties.left.Clearable"
                    :filterable="properties.left.Filterable"
                    :multiple="properties.left.Multiple"
                    collapse-tags
                    style="width:100%"
                    @change="onChange"
                >
                    <el-option
                        :key="properties.left.Placeholder"
                        v-if="!properties.left.Noplease"
                        value=""
                        :label="properties.left.Placeholder"
                    />
                    <el-option
                        v-for="(label, val) in data[0]"
                        :key="val"
                        :label="label"
                        :value="val"
                    />
                </el-select>
            </div>
            <div slot="right">
                <el-cascader
                    v-model="value[1]"
                    :placeholder="properties.right.Placeholder"
                    :clearable="properties.right.Clearable"
                    :filterable="properties.right.Filterable"
                    :options="data[1]"
                    :key="isTreeSelect"
                    :show-all-levels="properties.showAllLevels"
                    :disabled="properties.right.disabled||false"
                    :props="properties.props"
                    @change="onChange"
                    collapse-tags
                />
            </div>
        </ve-mix-options>
    </div>
</template>

<script>
import mixin from "./mixin";
import veMixOptions from "./veMixOptions"
import handleSelectTree from "./handleSelectTree";
    export default {
        name: "selectCascader",
        mixins: [mixin],
        components:{veMixOptions},
        data() {
            return {
                data:[],
                value:[],
	            isTreeSelect: 0,
            };
        },
        created() {
            this.initProperties({
                left:{
                    Placeholder:'全部',
                    Multiple: false,
                    Clearable:false,
                    Filterable:false,
                    Noplease:false,
                    Width: '75px',
                },
                right:{
                    Placeholder:'请选择',
                    Clearable:true,
                    Filterable:true,
                    disabled: false,
                    rightLeafOnly:false,//true父节点即是选中也不返回
                },
                props:{
                    multiple:false,
                    checkStrictly: false,
                    emitPath: false,
                    disabled: false,
                    expandTrigger: 'hover',
                    value: 'id',
                    label: 'name',
                    children: 'children'
                },
                showAllLevels: true,    // true 输入框中显示选中项所在的完整路径 false 仅显示最后一级
            })
        },
        methods: {
            init(value){
            	let vm = this;
                 this.getData().then(function(d){
		            vm.data = [d[0], d[1]];
		            if (value) {
			            vm.value = [value[0], value[1]];
		            } else {
			            vm.value = ['', ''];
		            }
	            });
            },
            onChange(){
                let model;
                if (this.properties.props.checkStrictly) {
                    model = this.value;
                } else {
                    model= [this.value[0], this.properties.right.rightLeafOnly? this.value[1] :handleSelectTree(this.data[1],this.value[1],this.properties.props.value)]
                }
                this.$emit("update:model", model);
                this.$emit("change", model);
            },
            keyup(){
                this.$emit("keyup");
            }
        },
	    watch: {
		    data: {
			    deep: true,
			    immediate: true,
			    handler(newV) {
				    ++this.isTreeSelect
			    }
		    }
	    },
    };
</script>
<style  lang="less" scoped>

</style>
