<template>
    <div class="searh-menu-container">
        <div class="p-0-15">
            <el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
            <el-tree
                v-if="!searchResultShow"
                class="search-menu"
                node-key="id"
                :default-expanded-keys="defaultOpen"
               
                :data="menuData"
                :highlight-current="true"
                :expand-on-click-node="false"
                :props="myProps"
                @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : 'icon-tongshi-zuzhijiagou'"></i>
                    <span>{{ node.label }}</span>
                </span>
            </el-tree>
        </div>
        <div class="search-result-container" v-if="searchResultShow">
            <ul class="search-result-ul">
                <p class="title">部门列表</p>
                <li class="group-item items">
                    <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                    人事部
                </li>
                <li class="group-item items">
                    <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                    人事部
                </li>
            </ul>
            <ul class="search-result-ul">
                <p class="title">人员列表</p>
                <li class="person-item items">
                    <i class="iconfont icon-chengyuan"></i>
                    陈景良
                    <span class="from-group">人事部</span>
                </li>
                <li class="person-item items">
                    <i class="iconfont icon-chengyuan"></i>
                    陈景良
                    <span class="from-group">人事部</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        name: "searchMenu",
        components: {},
        props: {
            treeData: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                searchKey: "",
                searchResultShow: false,
                myProps: {
                    children: 'childrens',
                    label: 'label',
                    disabled: "disabled"
                },
                menuData: [],
                defaultOpen: []
            };
        },
        created() {
            // this.sortGroupByLevel();
        },
        methods: {
            /**
             * 清楚输入框
             */
            clearFn() {
                this.searchResultShow = false;
            },

            /**
             * 关键字搜索
             */
            searchFn() {
                if (this.searchKey == "") {
                    this.searchResultShow = false;
                    return false;
                }
                this.searchResultShow = true;
                // console.log(this.searchKey);
                this.$emit("handleSearchKey", this.searchKey);
            },

            /**
             * 树形菜单选择
             */
            handleNodeClick(obj, node) {
                // console.log(obj, node);
                this.$emit("handleTreeSelection", obj, node);
            },

            /**
             * 按层级排序部门
             * fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
             */
            sortGroupByLevel(list) {
                let that = this;
                var arr = {
                        list0: {},
                        list1: {},
                        list2: {},
                        list3: {},
                        list4: {},
                        list5: {},
                        list6: {},
                        list: list,
                        listObj: {}
                    },
                    key,
                    obj2,
                    key2,
                    parent,
                    idOfLevel0,
                    parentLevel;
                list.length && list.forEach(obj => {
                    obj.name = obj.name || "";
                    obj.disabled = true;
                    obj.label = obj.name || "";
                    obj.id = obj.groupId || "";
                    obj.englishName = obj.englishName || "";
                    obj.level = obj.level;
                    obj.groupId = obj.groupId || "";
                    obj.parentId = obj.parentId || "";
                    key = obj.groupId;
                    if (arr["list" + obj.level]) {
                        arr["list" + obj.level][key] = obj;
                        arr["list" + obj.level][key]["children"] = {};
                    }
                    if (obj.level == 0) {
                        idOfLevel0 = obj.groupId;
                    }
                });
                for (let level = 6; level > 0; level--) {
                    for (let item in arr["list" + level]) {
                        obj2 = arr["list" + level][item];
                        parentLevel = level - 1;
                        parent = arr["list" + parentLevel][obj2.parentId];
                        if (!parent) {
                            continue;
                        }
                        key2 = obj2.groupId;
                        if (!parent.hasOwnProperty("childrens")) {
                            parent["childrens"] = [];
                        }
                        parent["children"][key2] = obj2;
                        parent["childrens"].push(obj2);
                    }
                }
                arr.listObj = Object.assign({}, arr.list0, arr.list1, arr.list2, arr.list3, arr.list4, arr.list5, arr.list6);
                let menuArr = [];
                for (let key in arr.list0) {
                    menuArr.push(arr.list0[key]);
                    that.defaultOpen.push(key);
                }
                that.menuData = menuArr;
                console.log(that.menuData);
            }
        },
        filter: {},
        computed: {},
        watch: {
            treeData(newArr, old) {
                // console.log(old, newArr, "newarr");
                this.sortGroupByLevel(newArr);
            }
        }
    };
</script>
<style lang="scss">
    .searh-menu-container {
        overflow-y: auto;
        overflow-x: auto;
        width: 260px;
        background: #eef1f8;
        height: 690px;
        padding: 20px 0;
        box-sizing: border-box;
        .p-0-15 {
            padding: 0 15px;
        }
        .search-menu {
            margin-top: 30px;
            color: #606266;
            font-size: 14px;
            background: #EEF1F8;
            min-width: 100%;
            display:inline-block !important;
            .el-tree-node {
                .el-tree-node__content {
                    height: 36px;
                    .iconfont {
                        color: #409EFF;
                        margin-right: 5px;
                    }
                    &:hover {
                        color: #fff;
                        background: #409EFF;
                        .iconfont {
                            color: #fff;
                        }
                    }
                }
            }
        }
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            background: #409EFF;
            color: #fff;
            .iconfont {
                color: #fff;
            }
        }
        .search-result-ul {
            font-size: 14px;
            color: #606266;
            .title {
                padding: 15px;
                color: #303133;
            }
            li.items {
                padding: 15px;
                background: #fff;
                box-sizing: border-box;
                border-bottom: 1px solid #E4E7ED;
                cursor: pointer;
                .iconfont {
                    color: #409EFF;
                }
                .from-group {
                    float: right;
                }
            }
        }
    }
</style>


