<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>
        </div>
            <p class="share-title">我方共享给对方的所有人员</p>
        <div class="p-0-15">
            <el-tree
                v-if="!searchResultShow"
                class="search-menu"
                node-key="id"
                :default-expanded-keys="defaultOpen"
                :data="menuDataMine"
                :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>
            <p class="share-title">对方共享给我方的所有人员<i class="el-icon-upload"></i></p>
        <div class="p-0-15">
            <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>
    import { formatTreeData } from '@/utils/index';
    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: [],
                menuDataMine: [],
                defaultOpen: []
            };
        },
        methods: {
            /**
             * 格式化树形菜单数据
             */
            formatGroupData(treeData) {
                let _this = this;
                let data = [].concat(JSON.parse(JSON.stringify(treeData)));
                let copyData = data.slice(0);
                let userInfo = window.localStorage.getItem("userInfo");
                let enterpriseId = JSON.parse(userInfo).enterpriseId;
                data.forEach(group => {
                    group.allClerks = null;
                    group.childrens = null;
                    group.label = group.name || "";
                    group.id = group.groupId || "";
                    let arr = [];
                    copyData.forEach(cG => {
                        cG.label = cG.name || "";
                        cG.id = cG.groupId || "";
                        if (cG.enterpriseId == enterpriseId) {
                            cG["isMine"] = 1;
                        } else {
                            cG["isMine"] = 0;
                        }
                        if (cG.parentId == group.groupId) {
                            arr.push(cG);
                        }
                    });
                    if (arr.length > 0) group.childrens = arr;
                    if (group.level == 0) {
                        _this.defaultOpen.push(group.id);
                        if (group.enterpriseId == enterpriseId) {
                            group["isMine"] = 1;
                            _this.menuDataMine.push(group);
                        } else {
                            group["isMine"] = 0;
                            _this.menuData.push(group);
                        }
                    }
                });
                // this.menuData = data;
            },
            /**
             * 清楚输入框
             */
            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');
            }
        },
        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.formatGroupData(newArr);
                // this.defaultOpen = obj.defaultOpen;
                // this.menuData = obj.menuArr;
            }
        },
        mounted() {
            this.formatGroupData(this.treeData);
        }
    };
</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;
        }
        .share-title {
            padding: 0 15px;
            margin-top: 24px;
            height:36px;
            line-height: 36px;
            background:rgba(228,231,237,1);
            font-size:12px;
            font-weight:400;
            color:rgba(96,98,102,1);
            i {
                float: right;
                color: #409EFF;
                font-size: 16px;
                margin-top: 10px;
            }
        }
        .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>


