<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>
                    <div class="select-div"  style="width: 100%;">
                        <el-select v-model="brandSelection" placeholder="请选择品牌" @change="selectBrand" style="width: 100%;margin-top:20px;">
                            <el-option
                                v-for="(item, index) in brands"
                                :key="item.id"
                                :label="item.label"
                                :value="index">
                                {{item.label}}
                            </el-option>
                        </el-select>
                    </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-if="selectedList.length > 0" v-for="li in selectedList">
                            <li class="list group-li" :class="li.groupId ? 'group-li' : 'person-li'" :key="li.id+li.label">
                                <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
                    }
                }
            }
        },
        data() {
            return {
                searchText: "",
                myProps: {
                    children: 'childrens',
                    label: 'label',
                    disabled: "disabled"
                },
                menuData: [],
                defaultOpen: [],
                selectedList: [],
                brandSelection: 0,
                brands: []
            };
        },
        methods: {
            /**
             * 获取分组架构
             */
            getGroupData() {
                let _this = this;
                let params = {
                    isStoreGroup: 1
                };
                getRequest("/haoban-manage-web/dept/deptList", params)
                .then(res => {
                    console.log(res, "storegroup");
                    let treeData = [];
                    let personData = [];
                    if (res.data.errorCode == 1) {
                        treeData = res.data.result || [];
                    }
                    _this.formatGroupData(treeData, personData);
                })
                .catch(e => {
                    console.log(e, "error");
                });
            },
            formatGroupData(data, employees = []) {
                let copyData = data.slice(0);
                let _this = this;
                data.forEach(group => {
                    group.label = group.name || "";
                    group.id = group.groupId || "";
                    group.disableOpen = false;
                    group.disabled = group.hasPression == 1 ? false : true;
                    let arr = [];
                    copyData.forEach(cG => {
                        cG.label = cG.name || "";
                        cG.id = cG.groupId || "";
                        cG.disableOpen = false;
                        cG.disabled = cG.hasPression == 1 ? false : true;
                        if (cG.parentId == group.groupId) {
                            arr.push(cG);
                        }
                    });
                    if (_this.treeSet.isSelectPerson) employees.forEach(person => {
                        person.label = person.name;
                        person.id = person.employeeClerkId;
                        if (person.departmentId == group.groupId) {
                            arr.push(person);
                        }
                    });
                    if (arr.length > 0) {
                        group.childrens = arr 
                    } else if (group.level != 0){
                        group.childrens = [{label: ""}];
                        group.isLast = true;
                    }
                    if (group.level == 0) {
                        group.disabled = true;
                        group.hasLoad = true;
                        _this.brands.push(group);
                        if (group.childrens) _this.defaultOpen.push(group.id);
                    }
                });
                _this.menuData = [_this.brands[0]];
                if (_this.brands[0].hasPression == 1) this.getStoreList(_this.menuData);
                // _this.brandSelection = 0;
            },
            /**
             * 树形菜单选择
             */
            handleNodeClick(obj, node) {
                this.$emit("handleTreeSelection", obj, node, 'node');
            },
            /**
             * 获取当前复选框状态改变的节点，如果被选中，将禁用展开
             */
            getCurrentNode(data, ifChecked) {
                data.disableOpen = ifChecked;
                data.isChecked = ifChecked;
                this.selectedList = this.$refs.tree.getCheckedNodes();
            },
            /**
             * 节点展开时，禁用复选框
             */
            nodeOpen(data, self) {
                data.disabled = true;
                if (!data.hasLoad) {
                    this.getStoreList(data);
                    data.hasLoad = true;
                }
            },
            getStoreList(parent) {
                let params = {
                    storeGroupId: parent.groupId,
                    showChild: 0,
                    pageNumber: 1,
                    pageSize: 1000000000,
                    showType: 2
                };
                getRequest("/haoban-manage-web/store/findSimplePage", params)
                .then(res => {
                    console.log(res, "storeList");
                    let storeList = [];
                    if (res.data.errorCode == 1) {
                        storeList = res.data.result.list;
                    }
                    this.formatStoreList(storeList, parent);
                })
                .catch(e => {
                    console.log(e, "error");
                });
            },
            formatStoreList(list, parent) {
                list.forEach(li => {
                    li.id = li.storeId;
                    li.label = li.storeName;
                    if (li.clerks.length) {
                        li.clerks.forEach(clerks => {
                            clerks.label = clerks.name;
                            clerks.id = clerks.employeeClerkId;
                        });
                        li.childrens = li.clerks;
                    }
                });
                if (parent.isLast) {
                    parent.childrens = list;
                } else {
                    parent.childrens = parent.childrens.concat(list);
                }
            },
            /**
             * 节点关闭时，取消复选框的禁用
             */
            nodeClose(data, node, self) {
                data.disabled = 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.selectedList);
                this.treeSet.dialogVisible = false;
            },
            /**
             * 选择品牌
             */
            selectBrand(val) {
                console.log(val, this.brands[val]);
                this.menuData = [this.brands[val]];
                if (this.brands[val].hasPression == 1) this.getStoreList(this.brands[val]);
            }
        },
        beforeMount() {
            this.getGroupData();
        },
        watch: {
            searchText(newK, old) {
                this.$refs.tree.filter(newK);
            }
        }
    };
</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>

