<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" @click="handleClick">
                    <a-menu-item key="LearningSection">学段</a-menu-item>
                    <a-menu-item key="GradeManage">年级</a-menu-item>
                    <a-menu-item key="SubjectManage">学科管理</a-menu-item>
                    <a-menu-item key="TestPaperType">试卷题型排序管理</a-menu-item>
                    <a-menu-item key="TextbookManage">教材版本管理 </a-menu-item>
                    <a-menu-item key="SubjectQuestionType">学科题型管理</a-menu-item>
                    <a-menu-item key="KnowledgePoints">知识点管理 </a-menu-item>
                    <!-- <a-menu-item key="ChapterManage">章节管理</a-menu-item> -->
                </a-menu>
            </div>
            <!-- 右侧试题框 -->
            <div class="main-right">
                <component v-bind:is="currentTabComponent" @callBack="callBack" :receiveData="receiveData"
                    :bookObj="bookObj">
                </component>
            </div>
        </div>
    </div>
</template>

<script>
    import SubjectManage from './components/SubjectManage/SubjectManage.vue' //学科管理
    import TestPaperType from './components/TestPaperType/TestPaperType.vue' //试卷题型排序管理
    import TextbookManage from './components/TextbookManage/TextbookManage.vue' //教材版本管理
    import SubjectQuestionType from './components/SubjectQuestionType/SubjectQuestionType.vue' //学科题型管理
    import KnowledgePoints from './components/KnowledgePoints/KnowledgePoints.vue' //知识点管理
    import ChapterManage from './components/ChapterManage/ChapterManage.vue' //章节管理
    import LearningSection from './components/LearningSection/LearningSection.vue' //学段
    import GradeManage from './components/GradeManage/GradeManage.vue' //年级
    export default {
        components: {
            SubjectManage,
            TestPaperType,
            TextbookManage,
            SubjectQuestionType,
            KnowledgePoints,
            ChapterManage,
            LearningSection,
            GradeManage,
        },
        data() {
            return {
                receiveData: {},
                current: ['LearningSection'],
                currentTabComponent: 'LearningSection',
                bookObj: {}
            }
        },
        watch: {
            current(nval) {
                console.log(nval, 'nval')
                this.currentTabComponent = nval[0];
            },
        },
        methods: {
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                // this.getList();
            },
            callBack(name, data) {
                console.log(name, 'name66')
                console.log(data, 'data66')
                this.current = [name];
                this.currentTabComponent = name;
                this.receiveData = data;
            },
            handleClick() {
                this.receiveData = {};
            }
        }
    }
</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>