<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>
        <template v-for="area in shareArea">
            <div :key="area.sharedContactRelationId">
                <p class="area-title">{{area.title}}</p>
                <p class="share-title">我方共享给对方的所有人员</p>
                <div class="p-0-15">
                    <el-tree
                        class="search-menu"
                        node-key="id"
                        :default-expanded-keys="defaultOpen"
                        :data="area.shares[0].childrens"
                        :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="area.shares[1].childrens"
                        :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>
        </template>
        <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: [],
                shareArea: []
            };
        },
        methods: {
            /**
             * 格式化树形菜单数据
             */
            formatGroupData(treeData) {
                let shareArea = [];
                let userInfo = window.localStorage.getItem("userInfo");
                let enterpriseId = JSON.parse(userInfo).enterpriseId;
                let ths = this;
                let hasFirst = false;
                treeData.forEach((rlt, index) => {
                    if (rlt.exportEnterpriseId == enterpriseId) {
                        let obj = {
                            title: rlt.title,
                            sharedContactRelationId: rlt.sharedContactRelationId,
                            id: rlt.sharedContactRelationId,
                            shares: [rlt]
                        };
                        // rlt.shares = [rlt];
                        rlt.childrens = rlt.ext.sharedContactDepartmentStoreGroupList;
                        rlt.childrens.forEach(group => {
                            ths.formatGroup(group, 1);
                        });
                        if (!hasFirst) {
                            hasFirst = true;
                            ths.$emit("getEmployeeFirst", rlt.childrens[0]);
                        }
                        this.defaultOpen.push(rlt.childrens[0].id);
                        this.defaultOpen.push(rlt.childrens[1].id);
                        treeData.forEach(son => {
                            if (son.exportEnterpriseId == rlt.importEnterpriseId) {
                                son.childrens = son.ext.sharedContactDepartmentStoreGroupList;
                                son.childrens.forEach(group => {
                                    ths.formatGroup(group, 0);
                                });
                                obj.shares.push(son);
                                this.defaultOpen.push(son.childrens[0].id);
                                this.defaultOpen.push(son.childrens[1].id);
                            }
                        });
                        shareArea.push(obj);
                    }
                });
                console.log(shareArea);
                this.shareArea = shareArea;
            },
            formatGroup(group, isMine) {
                let ths = this;
                group.id = group.sharedContactGroupId;
                group.label = group.name;
                group.isMine = isMine;
                if (!!group.ext && !!group.ext.sharedContactDepartmentStoreGroupList) {
                    group.childrens = group.ext.sharedContactDepartmentStoreGroupList;
                    group.childrens.forEach(son => {
                        ths.formatGroup(son, isMine);
                    });
                }
            },
            /**
             * 清楚输入框
             */
            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.employeeStoreList) {
                    return this.searchResult.employeeStoreList;
                } else {
                    return [];
                }
            },
            departmentList() {
                if (this.searchResult.groupList) {
                    return this.searchResult.groupList;
                } 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;
        }
        .area-title {
            padding: 0 15px;
            height:13px;
            font-size:13px;
            font-weight:400;
            color:rgba(96,98,102,1);
            margin: 24px 0;
        }
        .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>


