<template>
    <div class="question-bank">
        <div class="main">
            <!-- 左侧菜单树 -->
            <div class="main-left">
                <div class="top-left">
                    <span class="subject-title only-line-1">系统管理类别</span>
                </div>
                <a-menu v-model="current" mode="inline">
                    <a-menu-item key="UserManage" >用户管理</a-menu-item>
                    <a-menu-item key="RoleManage" >角色管理</a-menu-item>
                </a-menu>
            </div>
            <!-- 右侧试题框 -->
            <div class="main-right">
                <component v-bind:is="currentTabComponent" :bookObj="bookObj"></component>
            </div>
        </div>
    </div>
</template>

<script>
    import UserManage from './UserManage/UserManage.vue' //用户管理
    import RoleManage from './RoleManage/RoleManage.vue' //用户管理
    export default {
        components: {
            UserManage,
            RoleManage
        },
        data() {
            return {
                current: ['UserManage'],
                currentTabComponent: 'UserManage',
                bookObj: {}
            }
        },
        watch: {
            current(nval) {
                console.log(nval, 'nval')
                this.currentTabComponent = nval[0];
            },
        },
        methods: {
        }
    }
</script>

<style scoped lang="less">
    .question-bank {
        width:100%;
        height:100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .top {
        width: 100%;
        height: 64px;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
        display: flex;
        position: relative;
    }

    .top-left {
        width: 100%;
        height: 64px;
        border-right: 1px solid rgba(232, 232, 232, 1);
        padding: 16px;
        font-size: 20px;
        columns: #333333;
    }

    .subject-icon {
        margin-right: 8px;
        cursor: pointer;
    }

    .subject-icon:hover {
        color: rgb(24, 144, 255);
    }

    .subject-title {
        flex: 1
    }

    .top-right {
        padding: 24px;
        flex: 1;
    }

    .main {
        display: flex;
        flex: 1;
        height:100%;
        position: relative;
    }

    .main-left {
        width: 240px;
        height: 85%;
        border-right: 1px solid rgba(232, 232, 232, 1);
        overflow-y: auto;
        box-sizing: border-box;
    }

    /deep/.ant-tabs-nav .ant-tabs-tab {
        padding: 8px 16px;
        margin: 0;
    }

    /deep/.ant-tabs-bar {
        margin: 0;
    }

    .main-right {
        flex: 1;
        height: 100%;
        position: relative;
        overflow-y: auto;
    }
</style>