<template>
    <el-dialog
        title="选择人员"
        width="660px"
        :visible.sync="dialogVisible"
     >
        <div class="transfer-area">
            <div class="select-area t-a-select">
                <p class="title">选择</p>
                <div class="tree-div">
                    <div class="input-container">
                        <el-input v-model="searchKey" placeholder="请输入内容"></el-input>
                    </div>
                    <el-tree
                        class="search-menu"
                        node-key="id"
                        ref="tree"
                        v-loading="loading"
                        :default-expanded-keys="defaultOpen"
                        :data="menuData"
                        show-checkbox
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        icon-class="open-child"
                        :props="myProps"
                        @check-change="getCurrentNode"
                        @node-expand="nodeOpen"
                        @node-collapse="nodeClose"
                        @node-click="handleNodeClick">
                        <span class="custom-tree-node" :class="data.disableOpen || (data.children && !data.childrens) ? 'disable-open' : ''" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span class="open-btn" v-if="data.children">
                                <el-button @click="nodeOpen(data, node)" :disabled="data.disableOpen" type="text" size="small">下级</el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
            <div class="selected-area t-a-select">
                <p class="title">已选</p>
                <div class="tree-div"></div>
            </div>
        </div>
     </el-dialog>
</template>
<script>
    import { formatTreeData } from '@/utils/index';
    import { getRequest, postRequest, postJsonRequest } from '@/api/api';
    export default {
        name: "vue-select-employee",
        props: {},
        data() {
            return {
                dialogVisible: true,
                searchKey: "",
                myProps: {
                    children: 'childrens',
                    label: 'label',
                    disabled: "disabled"
                },
                menuData: [],
                defaultOpen: [],
                loading: false
            };
        },
        methods: {
            /**
             * 获取分组架构
             */
            getGroupData() {
                let _this = this;
                // _this.loading = true;
                let params = {
                    isStoreGroup: 0
                };
                getRequest("/haoban-manage-web/dept/deptListForCompany", params)
                .then(res => {
                    let treeData = [];
                    if (res.data.errorCode == 1) {
                        treeData = res.data.result || [];
                    }
                    let obj = formatTreeData(treeData);
                    this.defaultOpen = obj.defaultOpen;
                    this.menuData = obj.menuArr;
                    console.log(this.menuData);
                    this.getEmployee(obj.menuArr[0]);
                })
                .catch(e => {
                    console.log(e, "error");
                });
            },
            /**
             * 树形菜单选择
             */
            handleNodeClick(obj, node) {
                this.$emit("handleTreeSelection", obj, node, 'node');
            },
            getCurrentNode(data, ifChecked) {
                data.disableOpen = ifChecked;
            },
            nodeOpen(data, node, self) {
                console.log(data, node, self);
                this.loading = true;
                data.disabled = true;
                this.departmentId = data.id;
                if (!data.hasLoad) {
                    this.getEmployee(data || [], node);
                    data.hasLoad = true;
                } else {
                    this.loading = false;
                }
            },
            nodeClose(data, node, self) {
                console.log(data, node, self);
                data.disabled = false;
            },
            /**
             * 获取员工列表
             */
            getEmployee( parent, node, showChild = 0) {
                let _this = this;
                let params = {
                    departmentId: parent.id,
                    showChild,
                    pageSize: 10000,
                    pageNum: 1,
                    status: 1
                };
                getRequest("/haoban-manage-web/emp/findsimplepage", params)
                .then(res => {
                    if (res.data.errorCode == 1) {
                        // childrens.concat(res.data.result.list);
                        this.formatEmployeeList(res.data.result.list || [], parent, node);
                    } else {
                        parent.childrens = parent.childrens.concat([]);
                        _this.loading = false;
                    }
                })
                .catch(e => {
                    console.log(e, "error");
                    _this.loading = false;
                });
            },
            formatEmployeeList(list = [], parent, node) {
                list.forEach((li, idx) => {
                    li.id = li.employeeClerkId;
                    li.label = li.name;
                    li.level = parent.level + 1;
                });
                if ("childrens" in parent) {
                    parent.childrens = parent.childrens.concat(list);
                } else {
                    parent.childrens = list;
                }
                this.loading = false;
            }
        },
        beforeMount() {
            this.getGroupData();
        }
    };
</script>
<style lang="scss">
.transfer-area {
    display: flex;
    .t-a-select {
        width:300px;
        height:415px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(220,223,230,1);
        border-radius:4px;
        overflow: hidden;
        &:first-child {
            margin-right: 20px;
        }
        >.title {
            width:100%;
            height:42px;
            line-height: 42px;
            background:rgba(245,247,250,1);
            border-bottom:1px solid rgba(220,223,230,1);
            border-radius:4px;
            text-indent: 15px;
            color: #303133;
            font-size: 16px;
        }
        .tree-div {
            width: 100%;
            height: 373px;
            overflow: auto;
            padding: 15px;
            box-sizing: border-box;
            .search-menu {
                margin-top: 20px;
                color: #606266;
                font-size: 14px;
                min-width: 100%;
                display:inline-block !important;
                .el-tree-node {
                    .el-tree-node__content {
                        height: 36px;
                        position: relative;
                        .open-child {
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 36px;
                            height: 36px;
                            padding: 0;
                            box-sizing: border-box;
                        }
                        .custom-tree-node {
                            flex: 1;
                            height: 100%;
                            line-height: 36px;
                            .open-btn {
                                width: 50px;
                                height: 14px;
                                color: #409EFF;
                                float: right;
                                text-align: right;
                                border-left: 1px solid #DCDFE6;
                                margin-top: 11px;
                                line-height: 14px;
                            }
                            &.disable-open {
                                z-index: 999;
                            }
                        }
                        &:hover {
                            background: none;
                        }
                    }
                }
            }
            .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
                background: none;
            }
        }
    }
}
</style>

