<template>
    <div class="administrative-estrutura-container">
        <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>
            <div class="af-right-header">
                <span class="title-span">{{groupInfo.groupName}}（{{total}}人）</span>
                <span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
                <span class="handle-area">
                    <a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" target="_blank" class="J_add-child a-href">添加子部门</a>
                    <span class="hurdle"></span>
                    <a class="J_edit a-href">编辑</a>
                </span>
            </div>
            <div class="af-right-button-box">
                <el-button type="primary">添加成员</el-button>
                <a><el-button>批量导入/导出</el-button></a>
                <el-button type="danger" plain @click="delMembers" :disabled="disabledDel">批量删除</el-button>
                <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>
            <employee-list :employeeList="employeeList" @selectMember="selectMember"></employee-list>
            <div class="pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import searchMenu from "components/contacts/searchMenu";
    import employeeInfo from "components/contacts/employeeInfo";
    import employeeList from "components/contacts/employeeList";
    import { getRequest, postRequest, postJsonRequest } from '@/api/api';
    export default {
        name: "administrativeEstrutura",
        components: {
            searchMenu,
            employeeInfo,
            employeeList
        },
        data() {
            return {
                showChildMember: false,
                setDisabledDel: false,
                menuData: [],
                pageSize: 100,
                currentPage: 1,
                selectedList: [],
                total: 0,
                loading: true,
                groupInfo: {
                    groupName: "",
                    departmentId: ""
                },
                employeeList: [],
                searchResult: {},
                showEmployee: false,
                selectedEmployee: {}
            };
        },
        created() {},
        beforeMount() {
            this.getGroupData();
            this.getEmployee();
        },
        methods: {
            handleSizeChange() {},
            handleCurrentChange() {},

            /**
             * 树形菜单搜索 
             */
            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.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/dept/deptListForCompany", params)
                .then(res => {
                    _this.menuData = res.data.result || [];
                    res.data.result.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 = {
                    departmentId: _this.groupInfo.departmentId,
                    showChild: _this.showChildMember * 1,
                    pageSize: _this.pageSize,
                    status: 1
                };
                getRequest("/haoban-manage-web/emp/findsimplepage", params)
                .then(res => {
                    _this.employeeList = res.data.result.list;
                    _this.total =  res.data.result.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;
                }
                .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>


