<template>
    <el-cascader
        v-model="value"
        :options="data"
        :key="isTreeSelect"
        :filterable="properties.filterable"
        :show-all-levels="properties.showAllLevels"
        :disabled="properties.disabled"
        :props="properties.props"
        @change="onChange"
        collapse-tags
        :placeholder="properties.placeholder"
        :clearable="properties.clearable"
    >
        <template slot-scope="{ node, data }">
            <span v-if="data.isGrey || data[properties.props.isGrey]" style="color: #bbb">{{ node.label }}</span>
            <span v-else>{{ node.label }}</span>
        </template>
    </el-cascader>

</template>

<script>
import mixin from "./mixin"
import handleSelectTree from "./handleSelectTree";
export default {
    name: "treeSelect2",
    mixins:[mixin],
    data() {
        return {
            data: [],
            value: [],
            isTreeSelect: 0,
            properties:{}
        };
    },
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler(newV) {
                ++this.isTreeSelect
            }
        }
    },
    created() {
        this.initProperties({
            leafOnly:false,//true父节点即是选中也不返回
            placeholder: '请选择',
            filterable:false,
            clearable: true,
            props: {
                multiple: false,
                emitPath:true,
                checkStrictly: false,
                disabled: false,
                expandTrigger: 'hover',
                value: 'value',
                label: 'label',
                children: 'children',
                isGrey: 'isGrey'
            },
            showAllLevels: true,    // true 输入框中显示选中项所在的完整路径 false 仅显示最后一级
        });
    },
    methods: {
        getItemById(list, id, parent) {
            let item = null;
            for (let i = 0; i < list.length; i++) {
                let ite = list[i];
                ite.parent = parent;
                if (ite.id == id) {
                    item = ite;
                }
                if (!item && ite.children) {
                    item = this.getItemById(ite.children, id, ite);
                }
                if (item) {
                    break;
                }
            }
            return item;
        },
        initModel(value) {
            let vm = this;
            let item = this.getItemById(vm.data, value);
            if (item) {
                let model = [];
                while (item) {
                    model.unshift(item.id);
                    item = item.parent;
                };
                this.value = model;
            } else {
                this.value = [];
                this.$emit("update:model", "")
            }
        },
        init(value) {
            let vm = this;
            this.getData().then(function (data) {
                vm.data = data;
                vm.value=value||[];
                //vm.initModel(value);
                console.log('data>>>', vm.data);
            });
        },
        onChange(){
            let model;
            if(this.properties.props.multiple){
                if(this.properties.props.checkStrictly){
                    model =  this.value
                }
                else{
                    model=this.properties.leafOnly?this.value:handleSelectTree(this.data,this.value,this.properties.props.value);
                }
            }else{
                model = this.value.length > 0 ? this.value[this.value.length - 1] : "";
            }
            this.$emit("update:model",model);
            this.$emit("change",model)
        }
    }
}
</script>

<style scoped>
.ash {
    color: #bbb;
}
</style>
