<template>
    <el-dialog
        :title="treeSet.isSelectPerson ? '选择人员' : '选择部门'"
        width="660px"
        :visible.sync="treeSet.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="searchText" placeholder="请输入内容"></el-input>
                    </div>
                    <el-tree
                        class="search-menu"
                        node-key="id"
                        ref="tree"
                        :check-strictly="true"
                        :default-expanded-keys="defaultOpen"
                        :data="menuData"
                        show-checkbox
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        icon-class="open-child"
                        :props="myProps"
                        :filter-node-method="filterNode"
                        @check-change="getCurrentNode"
                        @node-expand="nodeOpen"
                        @node-collapse="nodeClose"
                        @node-click="handleNodeClick">
                        <span class="custom-tree-node" :class="data.disableOpen ? 'disable-open' : ''" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span class="open-btn" v-if="data.childrens">
                                <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">
                    已选
                    <a class="J_del-all" @click="delSelected('empty')">全部清除</a>
                </p>
                <div class="tree-div">
                    <ul class="selected-list">
                        <template v-for="li in selectedList">
                            <li class="list group-li" :class="li.groupId ? 'group-li' : 'person-li'" :key="li.id+li.label" v-if="selectedList.length > 0">
                                <div class="label">
                                    <i class="iconfont" :class="li.groupId ? 'icon-tongshi-zuzhijiagou' : 'icon-chengyuan'"></i>{{li.label}}
                                </div>
                                <div class="close-btn" @click="delSelected(li)">
                                    <i class="el-icon-close"></i>
                                </div>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
        <div class="btn-box t-rt p-b-10">
            <el-button @click="treeSet.dialogVisible = false;">取消</el-button>
            <el-button type="primary" @click="submitSelected">确定</el-button>
        </div>
     </el-dialog>
</template>
<script>
    import { formatTreeData, deepCopy } from '@/utils/index';
    import { getRequest, postRequest, postJsonRequest } from '@/api/api';
    export default {
        name: "vue-select-employee",
        props: {
            treeSet: {
                type: Object,
                default() {
                    return {
                        isSelectPerson: true,
                        dialogVisible: false,
                        isSingle: false // 是否单选
                    }
                }
            },
            treeData: {
                type: Object,
                default() {
                    return {};
                }
            },
            onlyGroup: {
                type: Array,
                default() {
                    return [];
                }
            },
            onlyPerson: {
                type: Boolean,
                default: false
            },
            defaultSelection: {
                type: [Object, Array],
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                searchText: "",
                myProps: {
                    children: 'childrens',
                    label: 'label',
                    disabled: "disabled"
                },
                menusObj: {},
                menuData: [],
                defaultOpen: [],
                selectedList: []
            };
        },
        methods: {
            getTreeData() {
            },
            formatGroupData(treeData, personData) {
                let _this = this;
                let data = [].concat(JSON.parse(JSON.stringify(treeData)));
                let employees = [].concat(JSON.parse(JSON.stringify(personData)));
                let copyData = data.slice(0);
                let onlyGroup = _this.onlyGroup;
                this.menuData = [];
                this.defaultOpen = [];
                this.menusObj = {};
                data.forEach(group => {
                    group.allClerks = null;
                    group.childrens = null;
                    group.label = group.name || "";
                    group.id = group.groupId || "";
                    let allClerks = [];
                    let arr = [];
                    if (onlyGroup.length > 0) {
                        if (onlyGroup.indexOf(group.groupId) > -1) {
                            group.disableOpen = false;
                            group.disabled = true;
                        } else {
                            group.disabled = true;
                            group.disableOpen = true;
                        }
                    } else {
                         group.disabled = _this.onlyPerson ? true : group.hasPression == 1 ? false : true;
                    }
                    copyData.forEach(cG => {
                        cG.label = cG.name || "";
                        cG.id = cG.groupId || "";
                        cG.disableOpen = false;
                        if (onlyGroup.length > 0) {
                            if (onlyGroup.indexOf(cG.groupId) > -1) {
                                cG.disableOpen = false;
                                cG.disabled = true;
                                if (cG.parentId == group.groupId) {
                                    arr.push(cG);
                                }
                            } else {
                                cG.disabled = true;
                                cG.disableOpen = true;
                            }
                        } else {
                            cG.disabled = _this.onlyPerson ? true : cG.hasPression == 1 ? false : true;
                            if (cG.parentId == group.groupId) {
                                arr.push(cG);
                            }
                        }
                    });
                    if (_this.treeSet.isSelectPerson && group.hasPression == 1) employees.forEach(person => {
                        person.label = person.name;
                        person.id = person.employeeClerkId;
                        if (person.departmentId == group.groupId) {
                            arr.push(person);
                            allClerks.push(person);
                        }
                        _this.menusObj[person.id] = person;
                    });
                    if (arr.length > 0) group.childrens = arr;
                    group.allClerks = allClerks;
                    if (onlyGroup.length > 0) {
                        if (onlyGroup.indexOf(group.groupId) > -1) {
                            group.hasLoad = true;
                            _this.defaultOpen.push(group.id);
                            if (onlyGroup.indexOf(group.parentId) < 0) {
                                _this.menuData.push(group);
                            }
                        }
                    } else {
                        if (group.level == 0) {
                            group.disabled = true;
                            group.hasLoad = true;
                            _this.menuData = [group];
                            _this.defaultOpen.push(group.id);
                        }
                    }
                    _this.menusObj[group.id] = group;
                });
            },
            /**
             * 树形菜单选择
             */
            handleNodeClick(obj, node) {
                this.$emit("handleTreeSelection", obj, node, 'node');
            },
            /**
             * 获取当前复选框状态改变的节点，如果被选中，将禁用展开
             */
            getCurrentNode(data, ifChecked) {
                data.disableOpen = ifChecked;
                this.selectedList = this.$refs.tree.getCheckedNodes();
                if (this.treeSet.isSingle && this.selectedList.length > 1) {
                    let index = this.selectedList.indexOf(data);
                    this.selectedList.splice(1 - index, 1);
                    this.$refs.tree.setCheckedNodes(this.selectedList);
                }
            },
            /**
             * 节点展开时，禁用复选框
             */
            nodeOpen(data, self) {
                data.disabled = true;
            },
            /**
             * 节点关闭时，取消复选框的禁用
             */
            nodeClose(data, node, self) {
                data.disabled =  this.onlyPerson ? true : data.hasPression != 1;
            },
            /**
             * 关键词搜索
             */
            filterNode(value, data) {
                if (!value) return true;
                return (data.label.indexOf(value) !== -1 || (data.phoneNumber || "").indexOf(value) !== -1);
            },
            /**
             * 删除已选项
             */
            delSelected(obj) {
                if (obj == 'empty') {
                    this.$refs.tree.setCheckedKeys([]);
                    this.selectedList = [];
                } else {
                    let index = this.selectedList.indexOf(obj);
                    this.selectedList.splice(index, 1);
                    this.$refs.tree.setCheckedNodes(this.selectedList);
                }
            },
            /**
             * 外抛已选的数据
             */
            submitSelected() {
                this.$emit("handleSelectedList", this.treeSet.isSingle ? this.selectedList[0] : this.selectedList);
                this.treeSet.dialogVisible = false;
            }
        },
        mounted() {
            console.log(this.$refs, "this");
        },
        watch: {
            searchText(newK, old) {
                this.$refs.tree.filter(newK);
            },
            treeData(newData) {
                // let treeData = [].concat(JSON.parse(JSON.stringify(newData.treeData)));
                // let personData = [].concat(JSON.parse(JSON.stringify(newData.personData)));
                this.formatGroupData(newData.treeData, newData.personData);
            },
            treeSet(obj) {
                if (obj.dialogVisible) {
                    this.formatGroupData(this.treeData.treeData, this.treeData.personData);
                    if (this.defaultSelection) {
                        let list = this.defaultSelection;
                        this.$nextTick(() => {
                            console.log(this.$refs, "this");
                            this.selectedList = list;
                            this.$refs.tree.setCheckedNodes(list);
                            list.forEach(li => {
                                if (li.employeeClerkId) {
                                    this.defaultOpen = [li.departmentId];
                                } else {
                                    this.defaultOpen.push(this.menusObj[li.id].parentId);
                                }
                            });
                        });
                    }
                }
            }
        }
    };
</script>
<style lang="scss">
.p-b-10 {
    padding-bottom: 10px;
}
.transfer-area {
    display: flex;
    margin-bottom: 40px;
    .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;
            .J_del-all {
                font-size: 14px;
                color: #409EFF;
                float: right;
                cursor: pointer;
                margin-right: 15px;
            }
        }
        .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;
            }
        }
        .selected-list {
            .list {
                padding: 12px 0;
                display: flex;
                .label {
                    flex: 1;
                    .iconfont {
                        color: #409EFF;
                        margin-right: 5px;
                    }
                }
                .close-btn {
                    width: 16px;
                    height: 16px;
                    line-height: 18px;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 100%;
                    font-size: 8px;
                    vertical-align: middle;
                    &:hover {
                        color: #fff;
                        background: #909399;
                    }
                }
            }
        }
    }
}
</style>