<template>
    <div class="administrative-estrutura-container">
        <template v-if="menuData.length > 0">
            <search-menu
                @handleSearchKey="handleSearchKey"
                @handleTreeSelection="handleTreeSelection"
                :treeData="menuData"
                :searchResult="searchResult"
                @handleEmployeeSelection="handleEmployeeSelection">
            </search-menu>
            <employee-info v-if="showEmployee == 'employee'" :info="selectedEmployee"></employee-info>
            <div class="af-right-container"
                v-loading="loading"
                v-else-if="groupInfo.isStoreGroup != 1 && groupInfo.level !=0">
                <div class="af-right-header">
                    <span class="title-span">{{groupInfo.groupName}}（{{total}}人）<span class="not-show-app">本企业通讯录APP中不展示</span></span>
                    <template v-if="!!groupInfo.isMine">
                        <span class="handle-area" v-if="groupInfo.isStoreGroup == 1">
                            <a class="a-href" :href="'#/addGroup?addnew=1&groupId='+groupInfo.departmentId">添加子分组</a>
                            <span class="hurdle"></span>
                            <a class="a-href" :href="'#/addGroup?groupId='+groupInfo.departmentId">编辑</a>
                        </span>
                        <span class="handle-area" v-else>
                            <a :href="'#/addDepartment?addnew=1&departmentId='+groupInfo.departmentId" class="J_add-child a-href">添加子部门</a>
                            
                            <template v-if="groupInfo.level != 0">
                                <span class="hurdle"></span>
                                <a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" class="J_edit a-href">编辑</a>
                            </template>
                        </span>
                    </template>
                </div>
                <div class="af-right-button-box">
                    <template v-if="!!groupInfo.isMine">
                        <a href="#/storeInfo" v-if="groupInfo.isStoreGroup == 1">
                            <el-button type="primary">添加门店</el-button>
                        </a>
                        <a v-else :href="'#/employee?addnew=1&departmentId='+groupInfo.departmentId">
                            <el-button type="primary">添加成员</el-button>
                        </a>
                        <el-button type="danger" plain @click="delMembers" :disabled="disabledDel">批量删除</el-button>
                    </template>
                    <el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
                </div>
                <clerk-view v-if="groupInfo.isStoreGroup == 1" :tableData="employeeList"></clerk-view>
                <employee-list v-else :employeeList="employeeList" @selectMember="selectMember"></employee-list>
                <div class="pagination">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[20, 40, 60, 80]"
                        :page-size="pageSize"
                        :current-page="currentPage"
                        layout="total, sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
            <div class="af-right-container" v-else-if="groupInfo.isStoreGroup == 1 && groupInfo.level ==0">
                <p style="margin: 20px 0;">是否共享门店及成员数据</p>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="sale">销售数据</el-checkbox>
                    <el-checkbox label="vip">会员数据</el-checkbox>
                </el-checkbox-group>
                <div style="margin: 20px 0;">
                    <el-button type="primary" @click="subShareSet">确定</el-button>
                    <el-button>取消</el-button>
                </div>
            </div>
        </template>
        <template v-else>
            <guid-div></guid-div>
        </template>
    </div>
</template>
<script>
    import searchMenu from "components/contacts/share/searchMenu";
    import employeeInfo from "components/contacts/employeeInfo";
    import employeeList from "components/contacts/share/employeeList";
    import clerkView from "components/contacts/share/clerkView";
    import guidDiv from "components/contacts/share/guid";
    import { getRequest, postRequest, postJsonRequest, postJson } from '@/api/api';
    export default {
        name: "shareContact",
        components: {
            searchMenu,
            employeeInfo,
            employeeList,
            guidDiv,
            clerkView
        },
        data() {
            return {
                showChildMember: false,
                setDisabledDel: false,
                menuData: [],
                pageSize: 20,
                currentPage: 1,
                selectedList: [],
                total: 0,
                loading: true,
                groupInfo: {
                    groupName: "",
                    departmentId: ""
                },
                employeeList: [],
                searchResult: {},
                showEmployee: false,
                selectedEmployee: {},
                checkList: []
            };
        },
        created() {},
        beforeMount() {
            this.getGroupData();
            // this.getEmployee();
        },
        methods: {
            addSon() {
                location.href = '#/addGroup?addnew=1&groupId='+this.groupInfo.departmentId;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getEmployee();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getEmployee();
            },
            /**
             * 设置是否共享门店及成员数据
             */
             subShareSet() {},
            /**
             * 树形菜单搜索 
             */
            handleSearchKey(keyWord) {
                console.log(keyWord, "searchKey");
                let params = {
                    keyWord
                };
                getRequest("/haoban-manage-web/emp/searchpage", params)
                .then(res => {
                    console.log(res, "key word search");
                    this.searchResult = res.data.result;
                })
                .catch(e => {
                    console.log(e, "error");
                });
            },
            
            /**
             * 树形菜单选择项处理
             */
            handleTreeSelection(obj, node, showEmployee) {
                console.log(obj, node, "selection");
                this.groupInfo = obj;
                this.groupInfo.departmentId = obj.groupId;
                this.groupInfo.groupName = obj.name;
                this.showEmployee = showEmployee;
                this.loading = true;
                this.getEmployee();
            },
            /**
             * 树形搜索结果选人处理
             */
            handleEmployeeSelection(employee, showEmployee) {
                console.log(employee);
                this.selectedEmployee = employee;
                this.showEmployee = showEmployee;
            },
            /**
             * table选择员工
             */
            selectMember(selection) {
                this.selectedList = selection;
            },
            /**
             * 批量删除成员
             */
            delMembers() {
                let _this = this;
                _this.$confirm("是否要删除选中的员工？", "提示", {
                    type: "warning"
                }).then(() => {
                    let arr = [];
                    _this.selectedList.forEach(li => {
                        arr.push(li.employeeClerkId);
                    });
                    let params = {
                        ids: arr.push(",")
                    }
                    getRequest("/haoban-manage-web/emp/del", params)
                    .then(res => {
                        console.log(res, "Del result");
                        let selected = _this.selectedList;
                        let originList = _this.employeeList;
                        let selSet = new Set(selected);
                        let originSet = new Set(originList);
                        _this.employeeList = selected.concat(originList).filter(v => !selSet.has(v) || !originSet.has(v)); // 两数组非交集部分即为剔除后剩下的数据
                    })
                    .catch(e => {
                        console.log(e, "error");
                    });
                })
            },

            /**
             * 设置是否显示子成员
             */
            setChildMemberShow() {
                console.log(this.showChildMember * 1);
                this.getEmployee();
            },

            /**
             * 获取分组架构
             */
            getGroupData(fn) {
                let _this = this;
                let params = {
                    isStoreGroup: 0
                };
                getRequest("/haoban-manage-web/shared-contact/find-shared-group", {})
                .then(res => {
                    console.log(res.data.result, "gongxiang");
                    res.data.result.forEach(li => {
                        li.groupId = li.sharedContactGroupId;
                    });
                    _this.menuData = res.data.result || [];
                    console.log(_this.menuData, "menudata");
                    _this.menuData.some(li => {
                        if (li.level == 0) {
                            _this.groupInfo.departmentId = li.groupId;
                            _this.groupInfo.groupName = li.name;
                        }
                        return li.level == 0;
                    });
                    _this.getEmployee();
                })
                .catch(e => {
                    console.log(e, "error");
                });
            },

            /**
             * 获取员工列表
             */
            getEmployee() {
                let _this = this;
                let params = {
                    sharedContactGroupId: _this.groupInfo.departmentId,
                    findChildren: _this.showChildMember,
                };
                postJson("/haoban-manage-web/shared-contact/find-shared-member", params)
                .then(res => {
                    console.log(res, "menmers");
                    let list = [];
                    let total = 0;
                    if (res.data.errorCode == 1) {
                        list = res.data.result.list || [];
                        total =  res.data.result.pageInfo.total || 0;
                    }
                    _this.employeeList = list;
                    _this.total = total;
                    _this.loading = false;
                })
                .catch(e => {
                    console.log(e, "error");
                    _this.loading = false;
                });
            }
        },
        computed: {
            disabledDel() {
                return this.selectedList.length < 1 && !this.setDisabledDel;
            }
        }
    };
</script>
<style lang="scss">
    .administrative-estrutura-container {
        display: flex;
        .af-right-container {
            height: 690px;
            background: #fff;
            flex: 1;
            padding: 0 24px;
            .af-right-header {
                height: 70px;
                line-height: 70px;
                font-weight: 400;
                font-size: 14px;
                color: #606266;
                .title-span {
                    color: #303133;
                    font-size: 20px;
                    .not-show-app {
                        font-size:14px;
                        color:rgba(144,147,153,1);
                    }
                }
                .handle-area {
                    float: right;
                    .hurdle {
                        width:1px;
                        height:16px;
                        display: inline-block;
                        background: #DCDFE6;
                        margin: 0 10px;
                        vertical-align: sub;
                    }
                }
            }
            .af-right-button-box {
                padding: 8px 15px;
                background: #EBEEF5;
            }
            .pagination {
                margin-top: 30px;
                text-align: right;
            }
            .status-icon {
                width: 34px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: #ECF5FF;
                border: 1px solid #D9ECFF;
                border-radius: 4px;
                &.is-active {
                    .iconfont {
                        color: #409EFF;
                    }
                }
            }
        }
    }
</style>


