<template>
    <div v-if="isLoad" style="height: 100%;background: #F4F4F4;">
        <div class="menu-demo">
            <div class="el-menu-item" :class="{'menu-active':activeIndex == '1'}" @click="goTo('1')">{{$t("cs.authorityManage.authorization.userAuthorization")}}</div>
            <i class="i-shu"></i>
            <div class="el-menu-item" :class="{'menu-active':activeIndex == '2'}" @click="goTo('2')">{{$t("cs.authorityManage.authorization.roleAuthorization")}}</div>
            <i class="i-shu"></i>
            <div class="el-menu-item" :class="{'menu-active':activeIndex == '3'}" @click="goTo('3')">{{$t("cs.authorityManage.authorization.departmentAuthorization")}}</div>
            <i class="i-shu"></i>
            <div class="el-menu-item" :class="{'menu-active':activeIndex == '4'}" @click="goTo('4')">{{$t("cs.authorityManage.authorization.menuAuthorization")}}</div>
        </div>
        <UserAuthorizationTable v-if="activeIndex == '1'" style=" height: calc(100% - 90px);margin: 16px;padding: 0px 16px 12px 16px;background: white;"></UserAuthorizationTable>
        <RoleAuthorizationTable v-if="activeIndex == '2'" style=" height: calc(100% - 90px);margin: 16px;padding: 0px 16px 12px 16px;background: white;"></RoleAuthorizationTable>
        <DepartmentAuthorizationTable v-if="activeIndex == '3'" style=" height: calc(100% - 90px);margin: 16px;padding: 0px 16px 12px 16px;background: white;"></DepartmentAuthorizationTable>
        <MenuAuthorizationTable v-if="activeIndex == '4'" :mode="mode"  style=" height: calc(100% - 90px);margin: 16px;padding: 0px 16px 16px 16px;background: white;overflow: hidden;"></MenuAuthorizationTable>
    </div>

</template>
<script scoped>
import  UserAuthorizationTable  from "./UserAuthorizationTable.vue";
import  RoleAuthorizationTable  from "./RoleAuthorizationTable.vue";
import  DepartmentAuthorizationTable  from "./DepartmentAuthorizationTable.vue";
import  MenuAuthorizationTable  from "./MenuAuthorizationTable.vue";
import CoreAPI from "../../../Common/JS/CoreAPI";
export default {
    name: "Authorization",
    components: { UserAuthorizationTable, RoleAuthorizationTable, DepartmentAuthorizationTable, MenuAuthorizationTable },
    props: {
        //非懒加载需要传递的树集合
        treeData: {
            type: Array,
            default() {
                return [];
            }
        },
        systemCode: {
            type: String,
            default() {
                return ""
            }
        },
        mode: {
            type: String,
            default() {
                return ""
            }
        }
    },
    data() {
        return {
            activeIndex: '1',
            isLoad: false
        };
    },
    methods: {
        goTo(index) {
            if (this.activeIndex != index) this.activeIndex = index;
        },
        handleClick(active) {
            let _this = this;
            _this.isLoad = false;
            _this.activeIndex = '1';
            CloudServiceCommon.Props.systemId = active.active
            setTimeout(function(){
                _this.isLoad = true;
            },300)
        },
        //根据编码获取系统表信息
        getAuthorizeSystemByCode() {
            CoreAPI.getAuthorizeSystemByCode(this.systemCode).then(res => {
                if (res && res.id) {
                    this.handleClick({ active: res.id }, false);
                }
            });
        }
    },
    created() {
        if (this.systemCode) {
            this.getAuthorizeSystemByCode();
        } else {
            setTimeout(() => {
                this.handleClick({ active: this.$route.params?.id }, false);
            }, 0);
        }
    },
    watch: {
        $route(to, from) {
            if (to.params.id) {
                this.handleClick({ active: to.params.id }, true);
            } else if (this.systemCode) {
                this.getAuthorizeSystemByCode();
            }
        }
    }
};
</script>
<style lang="less" scoped>
.menu-demo {
    height          : 40px;
    display         : flex;
    border-bottom   : 1px solid #e4e7ed;
    align-items     : center;
    margin-left     : 0px;
    background-color: #fff;
    justify-content : center;
}
.menu-active {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
}
.el-menu-item {
    height       : 40px;
    line-height  : 40px;
    border-color: #1890ff;
}
</style>
