<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>
            <slot name="buttonBox"></slot>
            <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 m-t-15" v-if="searchResultShow">
            <template v-if="storeFrame">
                <template v-for="(brand, index) in brandList" v-if="brand.departmentList.length > 0 || brand.storeList.length > 0 || brand.searchList.length > 0">
                    <div :key="brand.topDepartment.brandId + '_' + index">
                        <p class="brand-title">{{brand.topDepartment.name}}</p>
                        <ul class="search-result-ul" v-if="brand.departmentList.length > 0">
                            <p class="title store-frame-title">分组列表</p>
                            <li class="group-item items" v-for="(department, index) in brand.departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
                                <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                                {{department.name}}
                            </li>
                        </ul>
                        <ul class="search-result-ul" v-if="brand.storeList.length > 0">
                            <p class="title store-frame-title">门店列表</p>
                            <li class="group-item items" v-for="(store, index) in brand.storeList" :key="index+'_'+store.storeGroupId" @click="handleStoreClick(store)">
                                <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                                {{store.storeName}}
                            </li>
                        </ul>
                        <ul class="search-result-ul" v-if="brand.searchList.length > 0">
                            <p class="title store-frame-title">人员列表</p>
                            <li class="person-item items" v-for="(employee, index) in brand.searchList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
                                <i class="iconfont icon-chengyuan"></i>
                                {{employee.name}}
                                <span class="from-group">{{employee.departmentName}}</span>
                            </li>
                        </ul>
                    </div>
                </template>
                <p class="no-data-tip" v-if="brandList.length < 1">暂无数据</p>
            </template>
            <template v-else>
                <ul class="search-result-ul" v-if="departmentList.length > 0">
                    <p class="title">部门列表</p>
                    <li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
                        <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                        {{department.name}}
                    </li>
                </ul>
                <ul class="search-result-ul" v-if="employeeList.length > 0">
                    <p class="title">人员列表</p>
                    <li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
                        <i class="iconfont icon-chengyuan"></i>
                        {{employee.name}}
                        <span class="from-group">{{employee.departmentName}}</span>
                    </li>
                </ul>
                <p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
            </template>
        </div>
    </div>
</template>
<script>
    export default {
        name: "searchMenu",
        components: {},
        props: {
            treeData: {
                type: Array,
                required: true
            },
            searchResult: {
                type: Object,
                required: true
            },
            storeFrame: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                searchKey: "",
                searchResultShow: false,
                myProps: {
                    children: 'childrens',
                    label: 'label',
                    disabled: "disabled"
                },
                menuData: [],
                defaultOpen: []
            };
        },
        methods: {
            /**
             * 清楚输入框
             */
            clearFn() {
                this.searchResultShow = false;
            },
            /**
             * 关键字搜索
             */
            searchFn() {
                if (this.searchKey == "") {
                    this.searchResultShow = false;
                    return false;
                }
                this.searchResultShow = true;
                this.$emit("handleSearchKey", this.searchKey);
            },
            /**
             * 树形菜单选择
             */
            handleNodeClick(obj, node) {
                this.$emit("handleTreeSelection", obj, node, 'node');
            },
            
            /**
             * 搜索结果中选人
             */
            selectEmployee(person) {
                this.$emit("handleEmployeeSelection", person, 'employee');
            },
            /**
             * 搜索结果中选门店
             */
            handleStoreClick(store) {
                this.$emit("handleStoreSelection", store, 'store');
            },
            /**
             * 按层级排序部门
             * 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: {
            employeeList() {
                if (this.searchResult.searchList) {
                    return this.searchResult.searchList;
                } else {
                    return [];
                }
            },
            departmentList() {
                if (this.searchResult.departmentList) {
                    return this.searchResult.departmentList;
                } else {
                    return [];
                }
            },
            brandList() {
                if (this.searchResult.brandList) {
                    return this.searchResult.brandList;
                } else {
                    return [];
                }
            }
        },
        watch: {
            treeData(newArr, old) {
                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;
        }
        .no-data-tip {
            text-align: center;
            margin-top: 50px;
            color: #5b6a80;
        }
        .slot-button {
            text-align: center;
            margin-top: 20px;
            .el-icon-question {
                color: #C0C4CC;
                cursor: pointer;
            }
        }
        .search-menu {
            margin-top: 20px;
            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;
            }
        }
        .brand-title {
            padding: 15px;
            color: #303133;
        }
        .search-result-ul {
            font-size: 14px;
            color: #606266;
            .title {
                padding: 15px;
                color: #303133;
                &.store-frame-title {
                    background:rgba(228,231,237,1);
                }
            }
            li.items {
                padding: 15px;
                background: #fff;
                box-sizing: border-box;
                border-bottom: 1px solid #E4E7ED;
                cursor: pointer;
                .iconfont {
                    color: #409EFF;
                }
                .from-group {
                    float: right;
                }
                &:hover {
                    background: #409EFF;
                    color: #fff;
                    .iconfont {
                        color: #fff;
                    }
                }
            }
        }
    }
</style>


