<template>
    <el-select :clearable="clearable" :placeholder="selectPlaceholder" :value="valueTitle" @clear="clearHandle" ref="selectblur">
        <el-input
                :placeholder="placeholder"
                class="selectInput"
                v-model="filterText">
        </el-input>

        <el-option :label="valueTitle" :value="valueTitle" class="options">
            <el-tree :accordion="accordion"
                     :data="options"
                     :default-expanded-keys="defaultExpandedKey"
                     :filter-node-method="filterNode"
                     :node-key="props.value"
                     :props="props"
                     @node-click="handleNodeClick"
                     class="c-select-input-tree"
                     id="tree-option"
                     ref="selectTree">
            </el-tree>
        </el-option>
    </el-select>
</template>


<script>
    export default {
        //  describe: 下拉树组件 author: Wgy date:2020-04-02
        /*
        * 支持节点过滤   可清空  支持初始化默认参数
        *
        *   isClearable:true,      // 可清空（可选）
            isAccordion:true,      // 可收起（可选）
            自定义配置项
        *
        * */
        name:    'clientSelectInputTree',
        props:   {
            // 配置项
            props:       {
                type:    Object,
                default: () => {
                    return {
                        value:    'id',
                        label:    'lable',
                        children: 'children',
                    };
                },
            },
            // 选项列表数据(树形结构的对象数组)
            options:     {
                type:    Array,
                default: () => {
                    return [];
                },
            },
            // 初始值
            value:       {
                type:    Number,
                default: () => {
                    return null;
                },
            },
            // 可清空选项
            clearable:   {
                type:    Boolean,
                default: () => {
                    return true;
                },
            },
            // 自动收起
            accordion:   {
                type:    Boolean,
                default: () => {
                    return true;
                },
            },
            placeholder: {
                type:    String,
                default: () => {
                    return '检索关键字';
                },
            },
            selectPlaceholder: {
                type:    String,
                default: `请选择`,
            }
        },
        data() {
            return {
                filterText:         '', //过滤值
                valueId:            this.value,    // 初始值
                valueTitle:         '', //selcet 值
                defaultExpandedKey: [],  //默认展开的节点的 key 的数组
            };
        },
        mounted() {
            this.initHandle();
        },
        methods: {
            // 初始化值
            initHandle() {
                if (this.valueId) {
                    this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label];     // 初始化显示
                    this.$refs.selectTree.setCurrentKey(this.valueId);       // 设置默认选中
                    this.defaultExpandedKey = [this.valueId];      // 设置默认展开
                }
                this.initScroll();
            },
            // 初始化滚动条
            initScroll() {
                this.$nextTick(() => {
                    // let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0];
                    // @date 2020/06/23 @summary 修正下拉树样式
                    let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap');
                    let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar');
                    // scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;';
                    // @date 2020/06/23 @summary 修正下拉树样式
                    scrollWrap.forEach(ele => ele.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;')
                    scrollBar.forEach(ele => ele.style.width = 0);
                });
            },
            // 点击节点
            handleNodeClick(node) {
                // console.log(node);
                this.valueTitle = node[this.props.label];
                this.valueId = node[this.props.value];
                this.$emit('getValue', node);
                this.defaultExpandedKey = [];
                this.$refs.selectblur.blur();
                //this.filterText = ''
            },
            // 清除选中
            clearHandle() {
                this.valueTitle = '';
                this.valueId = null;
                this.defaultExpandedKey = [];
                this.clearSelected();
                this.$emit('getValue', {});
            },
            // 清空选中样式
            clearSelected() {
                let allNode = document.querySelectorAll('#tree-option .el-tree-node');
                allNode.forEach((element) => element.classList.remove('is-current'));
            },
            //过滤节点
            filterNode(value, data) {
                if (!value) {
                    return true;
                }
                return data.lable.indexOf(value) !== -1;
            },
        },
        watch:   {
            value(){
                this.valueId = this.value
                this.initHandle()
            },
            filterText(val) {
                this.$refs.selectTree.filter(val);
            },
        },
    };
</script>

<style scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height:     auto;
        max-height: 274px;
        padding:    0;
        overflow:   hidden;
        overflow-y: auto;
    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li >>> .el-tree .el-tree-node__content {
        height:  auto;
        padding: 0 20px;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    .el-tree >>> .el-tree-node__label {
        font-size: 13px;
    }

    .el-tree >>> .is-current .el-tree-node__label {
        font-weight: 700;
    }

    .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
        color:       #606266;
        font-weight: normal;
    }

    .selectInput {
        padding:    0 5px;
        box-sizing: border-box;
    }
</style>

