<template>
    <div style="height: 100%;">
        <div style="margin-top: 16px;height: calc(100% - 16px);display: flex;border: 1px solid rgb(235, 238, 245);box-sizing: border-box;" >
            <div style="width: 479px;height: 100%; border-right: 1px solid #ebeef5; box-sizing: border-box;">
                <!-- <el-input placeholder="请输入菜单名称" size="medium" v-model="searchValue" class="input-with-select">
                    <template slot="append" >
                        <div @click="searchAllCompany" class="el-icon-search search-button"></div>
                    </template>
                </el-input> -->
                <el-input
                    :placeholder="`${$t('cs.common.text.searchPlaceholder')}...`"
                    size="small"
                    v-model="searchValue"
                    @keyup.enter.native="searchAllCompany"
                    prefix-icon="el-icon-search"
                    class="input-with-select"
                ></el-input>
                <!-- 默认左侧树 -->
                <el-tree ref="menuAuthorizationTree" v-if="loadTree" :empty-text="$t('cs.common.text.noData')" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" node-key="id" :default-expand-all="true"
                    :highlight-current="true" :data="treeData" :props="treeData" :current-node-key="currentNode" @node-click="treeClick">
                    <span class="tree-slot" slot-scope="{ data }" :title="data.backName || data.name">
                    <!-- 资源表 -->
                    <span class="flex-align-center">
                        <span class="tree-slot-content">
                        <span class="title" v-html="data.name"></span>
                        </span>
                    </span>
                    </span>
                </el-tree>
            </div>
            <div style="width: calc(100% - 479px);height: 100%;padding: 20px 0; min-width: 550px;">
                    <!-- <div class="menu-author-title">
                        <div class="menu-author-title-line"></div>
                        <div></div>
                    </div> -->
                    <div class="menu-author-sub-title">
                        <div>【{{handleTreeNodeNameFunc()}}】{{$t("cs.authorityManage.authorization.menuAuthorization")}}</div>
                    </div>
                    <div class="menu-public" v-show="nowChooseNode.isPublic && treeData && treeData.length">
                        <img src="../Images/NoNeedAuthorization.png" alt="">
                        {{$t("cs.authorityManage.authorization.publicMenuMessage")}}
                    </div>
                    <div style="height: calc(100% - 60px);overflow: auto;" v-show="!nowChooseNode.isPublic && treeData && treeData.length">
                        <div class="menu-author-item">
                            <div class="menu-author-item-title">
                                {{$t("cs.authorityManage.authorization.authorizationUser")}}
                            </div>
                            <div class="menu-author-item-content">
                                <div class="table-role" >
                                    <div @click="rolePeopleFunc('3')" v-show="userInfoList && userInfoList.length" class="table-role-label">
                                        <i class="el-icon-user-solid"></i>
                                        <span>{{$t("cs.common.text.total")}}&nbsp;{{userInfoList && userInfoList.length ? userInfoList.length : 0}}&nbsp;{{$t("cs.common.text.people1")}}</span>
                                    </div>
                                    <div class="table-role-item" v-for="(userItem,userIndex) in userInfoList" :key="userItem.userId + userIndex +'role'" >
                                        <span>{{userItem.userName}}</span>
                                        <i v-if="!userItem.isSystem" @click="deleteUserFunc(userItem)" class="el-icon-remove"></i>
                                    </div>
                                    <div class="table-role-add" @click="addUserFunc" >
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="menu-author-item">
                            <div class="menu-author-item-title">
                                {{$t("cs.authorityManage.authorization.authorizationRole")}}
                            </div>
                            <div class="menu-author-item-content">
                                <div class="table-role" >
                                    <div @click="rolePeopleFunc('4')" v-show="roleInfoList && roleInfoList.length" class="table-role-label">
                                        <i class="el-icon-user-solid"></i>
                                        <span>{{$t("cs.common.text.total")}}&nbsp;{{roleInfoList && roleInfoList.length ? roleInfoList.length : 0}}个</span>
                                    </div>
                                    <div class="table-role-item" v-for="(roleItem,roleIndex) in roleInfoList" :key="roleItem.roleId + roleIndex +'role'" >
                                        <span>{{roleItem.roleName}}</span>
                                        <i v-if="!roleItem.isSystem"  @click="deleteRoleFunc(roleItem)" class="el-icon-remove"></i>
                                    </div>
                                    <div class="table-role-add" @click="addRoleFunc" >
                                        <i class="el-icon-plus"></i>
                                    </div> 
                                </div>
                            </div>
                        </div>
                        <div class="menu-author-item">
                            <div class="menu-author-item-title">
                                {{$t("cs.authorityManage.authorization.authorizationDepartment")}}
                            </div>
                            <div class="menu-author-item-content" >
                                <div class="table-role" >
                                    <div @click="rolePeopleFunc('5')" v-show="orgInfoList && orgInfoList.length" class="table-role-label">
                                        <i class="el-icon-user-solid"></i>
                                        <span>{{$t("cs.common.text.total")}}&nbsp;{{orgInfoList && orgInfoList.length ? orgInfoList.length : 0}}个</span>
                                    </div>
                                    <div class="table-role-item" v-for="(orgItem,orgIndex) in orgInfoList" :key="orgItem.id + orgIndex +'role'" >
                                        <span>{{orgItem.name}}</span>
                                        <i v-if="!orgItem.isSystem"  @click="deleteDepartmentFunc(orgItem)" class="el-icon-remove"></i>
                                    </div>
                                    <div class="table-role-add" @click="addDepartmentFunc">
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <el-dialog :title="$t(selectPeople)" :visible.sync="selectUserFlag" width="860px" :close-on-click-modal="false" :close-on-press-escape="false" custom-class="el-dialog-width-1200">
            <ChooseUser :role-user-list="roleUserList" @clearRoleUserListFunc="clearRoleUserList" v-if="selectUserFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">{{
                    $t("cs.common.button.cancel")
                }}</el-button>
                <el-button type="primary" @click="submitChooseUser">{{
                    $t("cs.common.button.ok")
                }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t(selectDepartment)" :visible.sync="selectDepartmentFlag" width="680px" :close-on-click-modal="false" :close-on-press-escape="false" custom-class="el-dialog-width-1200">
            <ChooseDepartment :department-list="departmentList" @clearDepartmentListFunc="clearDepartmentList" v-if="selectDepartmentFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">{{ $t("cs.common.button.cancel") }}</el-button>
                <el-button  type="primary" @click="submitChooseDepartment">{{ $t("cs.common.button.ok") }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t(selectRole)" :visible.sync="selectRoleFlag" width="680px" :close-on-click-modal="false" :close-on-press-escape="false" custom-class="el-dialog-width-1200">
            <ChooseRole  :role-list="roleList" @clearRoleListFunc="clearRoleList"  v-if="selectRoleFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">{{
                    $t("cs.common.button.cancel")
                }}</el-button>
                <el-button type="primary" @click="submitChooseRole">{{
                    $t("cs.common.button.ok")
                }}</el-button>
            </div>
        </el-dialog>
            <el-dialog
                :title="$t(lookAllPeopleTitle)"
                :visible.sync="lookPeopleFlag"
                width="912px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                custom-class="el-dialog-width-1200"
            >
            <LookAllPeopleDialog :people-list="lookPeopleList" :authority-type="authorityType" :id-prop-name="idPropName" :prop-name="propName"  v-if="lookPeopleFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closePeopleDialog">{{
                $t("cs.common.button.cancel")
                }}</el-button>
                <el-button type="primary" @click="submitLookPeople">{{
                $t("cs.common.button.ok")
                }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script scoped>
import  ChooseUser  from "../../../BusinessCommon/Components/ChooseUser.vue";
import  ChooseDepartment  from "../../../BusinessCommon/Components/ChooseDepartment.vue";
import  ChooseRole  from "../../../BusinessCommon/Components/ChooseRole.vue";
import  LookAllPeopleDialog from "../../../BusinessCommon/Components/LookAllPeopleDialog.vue";
import  CoreAPI from "../../../Common/JS/CoreAPI";
export default {
    name: "MenuAuthorizationTable",
    components: { ChooseUser, ChooseDepartment , ChooseRole, LookAllPeopleDialog },
    props: {
        mode: {
            type: String,
            default() {
                return ""
            }
        }
    },
    data() {
        return {
            selectRole: "cs.authorityManage.authorization.selectRole",
            selectDepartment: "cs.authorityManage.authorization.selectDepartment",
            selectPeople: "cs.authorityManage.authorization.selectPeople",
            treeData: [],
            searchValue: '',
            currentNode: '',
            lookAllPeopleTitle: "cs.authorityManage.authorization.people",
            selectUserFlag: false,
            selectDepartmentFlag: false,
            selectRoleFlag: false,
            lookPeopleFlag: false,
            loadTree: false,
            treePostData: {
                "systemId":  this.$store.state.csAuthorizationSystemId,
                "lazyLoad": false,
                "filterModel": {
                    "filterGroupModel": [
                        
                    ]
                },
                "sortModels": [
                    
                ]
            },
            defaultExpandedKeys: [],
            orgInfoList: [],
            roleInfoList: [],
            userInfoList: [],
            roleUserList: [],
            roleList: [],
            departmentList: [],
            nowChooseNode: {
            }
        };
        },
        methods: {
            addUserFunc() {
                let _this = this;
                _this.roleUserList = JSON.parse(JSON.stringify(_this.userInfoList))
                _this.selectUserFlag = true;
            },
            addRoleFunc() {
                let _this = this;
                _this.roleList = JSON.parse(JSON.stringify(_this.roleInfoList))
                _this.selectRoleFlag = true;
            },
            addDepartmentFunc() {
                let _this = this;
                _this.departmentList = JSON.parse(JSON.stringify(_this.orgInfoList))
                _this.selectDepartmentFlag = true;
            },
            rolePeopleFunc(type) {
                let _this = this;
                _this.authorityType = type;
                switch (type) {
                    case '3':
                        _this.lookPeopleList = _this.userInfoList ? JSON.parse(JSON.stringify(_this.userInfoList)) : []
                        _this.idPropName = 'userId'
                        _this.propName = 'userName'
                        _this.lookAllPeopleTitle = `【${_this.nowChooseNode.name}】${this.$t("cs.authorityManage.authorization.authorizationUser")}`
                        break;
                    case '4':
                        _this.lookPeopleList = _this.roleInfoList ? JSON.parse(JSON.stringify(_this.roleInfoList)) : []
                        _this.idPropName = 'roleId'
                        _this.propName = 'roleName'
                        _this.lookAllPeopleTitle = `【${_this.nowChooseNode.name}】${this.$t("cs.authorityManage.authorization.authorizationRole")}`
                        break;
                    case '5':
                        _this.lookPeopleList = _this.orgInfoList ? JSON.parse(JSON.stringify(_this.orgInfoList)) : []
                        _this.idPropName = 'id'
                        _this.propName = 'name'
                        _this.lookAllPeopleTitle = `【${_this.nowChooseNode.name}】${this.$t("cs.authorityManage.authorization.authorizationDepartment")}`
                        break;
                
                    default:
                        break;
                }
                _this.lookPeopleFlag = true;
            },
            deleteUserFunc(item) {
                let _this = this;
                _this.userInfoList.forEach(function(target, index) {
                    target.userId == item.userId ? _this.userInfoList.splice(index, 1) : ''
                })
                _this.deleteCommonFunc(3);
            },
            deleteRoleFunc(item) {
                let _this = this;
                _this.roleInfoList.forEach(function(target, index) {
                    target.roleId == item.roleId ? _this.roleInfoList.splice(index, 1) : ''
                })
                _this.deleteCommonFunc(4);
            },
            deleteDepartmentFunc(item) {
                let _this = this;
                _this.orgInfoList.forEach(function(target, index) {
                    target.id == item.id ? _this.orgInfoList.splice(index, 1) : ''
                })
                _this.deleteCommonFunc(5);
            },
            deleteCommonFunc(authorityType){
                let _this = this;
                let roleInfoList = []
                let userInfoList = []
                let orgInfoList = []
                _this.roleInfoList.forEach(function (target) {
                    roleInfoList.push(target.roleId)
                })
                _this.userInfoList.forEach(function (target) {
                    userInfoList.push(target.userId)
                })
                _this.orgInfoList.forEach(function (target) {
                    orgInfoList.push(target.id)
                })
                let postData = {
                    "systemId": CloudServiceCommon.Props.systemId,
                    "authorityType": authorityType,
                    "isBatch": 1,
                    "authItemIdList": [_this.nowChooseNode.id],
                    "roleIdList": roleInfoList,
                    "userIdList": userInfoList,
                    "orgIdList": orgInfoList,
                    "userIdRecord": CloudServiceCommon.User.userId,
                    "orgIdRecord": CloudServiceCommon.User.organizationId
                }
                CoreAPI.saveAuthority(postData).then(function(res) {
                    _this.treeClick(_this.nowChooseNode)
                    _this.closeDialog()
                })
            },
            closeDialog() {
                let _this = this;
                _this.selectRoleFlag = false;
                _this.selectUserFlag = false;
                _this.selectDepartmentFlag = false;
                _this.lookPeopleFlag = false;
            },
            clearRoleUserList() {
                let _this = this;
                _this.roleUserList = []
            },
            clearRoleList() {
                let _this = this;
                _this.roleList = []
            },
            clearDepartmentList() {
                let _this = this;
                _this.departmentList = []
            },
            closePeopleDialog() {
                let _this = this;
                _this.lookPeopleFlag = false;
            },
            submitLookPeople() {
                let _this = this;
                let roleInfoList = []
                let userInfoList = []
                let orgInfoList = []
                switch (_this.authorityType) {
                    case '3':
                        _this.userInfoList = JSON.parse(JSON.stringify(_this.lookPeopleList)) 
                        break;
                    case '4':
                        _this.roleInfoList =JSON.parse(JSON.stringify(_this.lookPeopleList))
                        break;
                    case '5':
                        _this.orgInfoList = JSON.parse(JSON.stringify(_this.lookPeopleList)) 
                        break;
                    default:
                        break;
                }
                _this.roleInfoList.forEach(function (target) {
                    roleInfoList.push(target.roleId)
                })
                _this.userInfoList.forEach(function (target) {
                    userInfoList.push(target.participationUserId)
                })
                _this.orgInfoList.forEach(function (target) {
                    orgInfoList.push(target.id)
                })
                let postData = {
                    "systemId": CloudServiceCommon.Props.systemId,
                    "authorityType": _this.authorityType,
                    "isBatch": 1,
                    "authItemIdList": [_this.nowChooseNode.id],
                    "roleIdList": roleInfoList,
                    "userIdList": userInfoList,
                    "orgIdList": orgInfoList,
                    "userIdRecord": CloudServiceCommon.User.userId,
                    "orgIdRecord": CloudServiceCommon.User.organizationId
                }
                CoreAPI.saveAuthority(postData).then(function(res) {
                    _this.treeClick(_this.nowChooseNode)
                    _this.closeDialog()
                })
            },
            submitChooseUser() {
                let _this = this;
                let roleInfoList = []
                let userInfoList = []
                let orgInfoList = []
                _this.roleInfoList.forEach(function (target) {
                    roleInfoList.push(target.roleId)
                })
                _this.roleUserList.forEach(function (target) {
                    userInfoList.push(target.participationUserId)
                })
                _this.orgInfoList.forEach(function (target) {
                    orgInfoList.push(target.id)
                })
                let postData = {
                    "systemId": CloudServiceCommon.Props.systemId,
                    "authorityType": 3,
                    "isBatch": 1,
                    "authItemIdList": [_this.nowChooseNode.id],
                    "roleIdList": roleInfoList,
                    "userIdList": userInfoList,
                    "orgIdList": orgInfoList,
                    "userIdRecord": CloudServiceCommon.User.userId,
                    "orgIdRecord": CloudServiceCommon.User.organizationId
                }
                CoreAPI.saveAuthority(postData).then(function(res) {
                    _this.treeClick(_this.nowChooseNode)
                    _this.closeDialog()
                })
            },
            submitChooseRole() {
                let _this = this;
                let roleInfoList = []
                let userInfoList = []
                let orgInfoList = []
                _this.roleList.forEach(function (target) {
                    roleInfoList.push(target.roleId)
                })
                _this.userInfoList.forEach(function (target) {
                    userInfoList.push(target.participationUserId)
                })
                _this.orgInfoList.forEach(function (target) {
                    orgInfoList.push(target.id)
                })
                let postData = {
                    "systemId": CloudServiceCommon.Props.systemId,
                    "authorityType": 4,
                    "isBatch": 1,
                    "authItemIdList": [_this.nowChooseNode.id],
                    "roleIdList": roleInfoList,
                    "userIdList": userInfoList,
                    "orgIdList": orgInfoList,
                    "userIdRecord": CloudServiceCommon.User.userId,
                    "orgIdRecord": CloudServiceCommon.User.organizationId
                }
                CoreAPI.saveAuthority(postData).then(function(res) {
                    _this.treeClick(_this.nowChooseNode)
                    _this.closeDialog()
                })
            },
            submitChooseDepartment() {
                let _this = this;
                let roleInfoList = []
                let userInfoList = []
                let orgInfoList = []
                _this.roleInfoList.forEach(function (target) {
                    roleInfoList.push(target.roleId)
                })
                _this.userInfoList.forEach(function (target) {
                    userInfoList.push(target.participationUserId)
                })
                _this.departmentList.forEach(function (target) {
                    orgInfoList.push(target.id)
                })
                let postData = {
                    "systemId": CloudServiceCommon.Props.systemId,
                    "authorityType": 5,
                    "isBatch": 1,
                    "authItemIdList": [_this.nowChooseNode.id],
                    "roleIdList": roleInfoList,
                    "userIdList": userInfoList,
                    "orgIdList": orgInfoList,
                    "userIdRecord": CloudServiceCommon.User.userId,
                    "orgIdRecord": CloudServiceCommon.User.organizationId
                }
                CoreAPI.saveAuthority(postData).then(function(res) {
                    _this.treeClick(_this.nowChooseNode)
                    _this.closeDialog()
                })
            },
            //回车搜索
            searchAllCompany() {
                let _this = this;
                //延迟5s执行搜索
                let timer = setTimeout(() => {
                    this.$nextTick(() => {
                        let filterValue = _this.searchValue.trim()
                        _this.pageIndex = '1'
                        let postData = {
                            "systemId":  CloudServiceCommon.Props.systemId,
                            "lazyLoad": false,
                            "filterModel": {
                                "filterGroupModel": [
                                    
                                ]
                            },
                            "sortModels": [
                                {
                                    "fieldName": "order",
                                    "sortType": 0
                                }
                            ]
                        }
                        if(_this.mode != 'runTime') {
                            postData.filterModel.filterGroupModel.push(postData.filterModel.filterGroupModel.push({
                                "filterFields": [
                                    {
                                        "operationType": 20,
                                        "fieldType": 30,
                                        "fieldName": "is_default",
                                        "fieldValue": 1
                                    }
                                ],
                                "logicType": 0
                            }))
                        }
                        CoreAPI.getMenuFrameMenuTree(postData).then(function(res) {
                            if (filterValue !== "") {
                                _this.highlightValue(res)
                            }
                            _this.treeData = res
                        })
                        clearTimeout(timer);
                        return;
                    });
                }, 500);
            },
            highlightValue(treeData){
                let _this = this;
                treeData.forEach(function(target) {
                    // if(target.name.includes(_this.searchValue.trim())) {
                        target.backName = target.name
                        target.name = _this.join(target.name, _this.searchValue.trim())
                    // }
                    if(target.children && target.children.length) {
                        _this.highlightValue(target.children)
                    }
                })
            },
            // 拼接
            join(str, key) {
                var reg = new RegExp(`(${key})`, 'igm')
                var replace = '<span style="background-color: #fff179;">$1</span>'
                return str.replace(reg, replace)
            },
            treeClick(item){
                let _this = this;
                _this.nowChooseNode = item
                if(!_this.nowChooseNode.isPublic) {
                    let postData = {
                        "systemId":  CloudServiceCommon.Props.systemId,
                        "menuId":  _this.nowChooseNode.id
                    }
                    CoreAPI.getAuthorityByMenuId(postData).then(function (res) {
                        console.log(res)
                        _this.roleInfoList = res.roleInfoList
                        _this.orgInfoList = res.orgInfoList
                        _this.userInfoList = res.userInfoList
                        _this.userInfoList.forEach(function(res) {
                            res.participationUserId = res.userId
                        })
                    })
                }
            },
            // 处理树  去掉隐藏的节点
            handleTreeData(tree) {
                let _this = this;
                for(let i = 0; i < tree.length; i++) {
                    let target = tree[i]
                    if(!target.isShow) {
                        tree.splice(i, 1)
                        i--
                    }else {
                        if(target.children && target.children.length) {
                            _this.handleTreeData(target.children)
                        }
                    }
                }
            },
            // 处理显示名称
            handleTreeNodeNameFunc(){
                let _this = this;
                if(_this.nowChooseNode.name.indexOf("background-color: #fff179;") != '-1' && _this.nowChooseNode.backName) {
                    return _this.nowChooseNode.backName
                }
                return _this.nowChooseNode.name
            }
        },
        created(){
            let _this = this;
            let postData = {
                "systemId":  CloudServiceCommon.Props.systemId,
                "lazyLoad": false,
                "filterModel": {
                    "filterGroupModel": [
                    ]
                },
                "sortModels": [
                    {
                        "fieldName": "order",
                        "sortType": 0
                    }
                ]
            }
            if(_this.mode != 'runTime') {
                postData.filterModel.filterGroupModel.push({
                    "filterFields": [
                        {
                            "operationType": 20,
                            "fieldType": 30,
                            "fieldName": "is_default",
                            "fieldValue": 1
                        }
                    ],
                    "logicType": 0
                })
            }
            CoreAPI.getMenuFrameMenuTree(postData).then(function(res) {
                console.log(res)
                if(res && res.length) {
                    _this.handleTreeData(res)
                    _this.treeData = res
                    _this.currentNode = res[0].id
                    _this.nowChooseNode = res[0]
                    if(!_this.nowChooseNode.isPublic) {
                        let postData = {
                            "systemId":  CloudServiceCommon.Props.systemId,
                            "menuId":  _this.nowChooseNode.id
                        }
                        CoreAPI.getAuthorityByMenuId(postData).then(function (res) {
                            console.log(res)
                            _this.roleInfoList = res.roleInfoList
                            _this.orgInfoList = res.orgInfoList
                            _this.userInfoList = res.userInfoList
                            _this.userInfoList.forEach(function(res) {
                                res.participationUserId = res.userId
                            })
                        })
                    }
                }
                _this.loadTree = true
            })
        }
    };
</script>
<style lang="less" scoped>
.input-with-select {
    margin: 10px 12px;
    width: calc(100% - 24px);
}
.el-input-group {
    width: calc(100% - 20px);

    /deep/.el-input-group__append {
        background-color: white;
        padding: 0;
    }
    .search-button {
        width: 45px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}
.el-tree {
    height: calc(100% - 70px)!important;
    overflow-x: auto;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}
.menu-author-title {
    display: flex;
}
.menu-author-title-line {
    width: 5px;
    height: 20px;
    background: #ebeef5;
    border-radius: 3px;
    margin-right: 15px;
    margin-bottom: 30px;
}
.menu-author-sub-title {
    font-weight: bold;
    padding-left: 16px;
    margin-bottom: 18px;
}
.menu-author-item {
    width: calc(100% - 34px);
    border: 1px solid #ebeef5;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 16px;
    margin-right: 16px;
    color: #303133;
    .menu-author-item-title {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .menu-author-item-content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-left: 1px solid #ebeef5;
        padding: 28px 16px;
    }
}
.menu-public {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #909399;
    img {
        margin-bottom: 24px;
    }
}
html .el-tree--highlight-current .el-tree-node.is-current> .el-tree-node__content,
body .el-tree--highlight-current .el-tree-node.is-current> .el-tree-node__content {
    background: #f5f7fa !important;
}
.menu-author-item .table-role {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .menu-author-item .table-role .table-role-add {
    width: 32px;
    height: 32px;
    color: #909399;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #909399;
    border-radius: 4px;
    cursor: pointer;
    .el-icon-plus {
      font-size: 18px;
    }
  }
  .menu-author-item .table-role-label {
    color: #1890ff; 
    margin-right: 10px; 
    flex-shrink: 0;
    span {
      margin-left: 5px;
      cursor: default;
    }
  }
  .menu-author-item .table-role-item {
    margin-right: 20px; 
    padding: 8px 0;
    flex-shrink: 0;
    position: relative;
    cursor: default;
    max-width: 100%;
    i {
      position: absolute;
      top: 0;
      right: -10px;
      display: none;
      cursor: pointer;
      color: red;
    }
    &:hover {
      i {
        display: block;
      }
    }
  }
</style>

