<template>
    <div class="layout">
        <!-- 头部菜单栏 -->
        <Header class="header">
            <div class="logo-wrap">
                <img src="../assets/ies5.png"
                     :class="isCollapsed ? 'collapsed-logo-width unit-logo':'collapsed-logo-width  unit-logo'" />
            </div>
            <div class="school-wrap">
                <BaseSelectSchool></BaseSelectSchool>
            </div>
            <slot name="header-content"></slot>
        </Header>
        <!-- 侧边菜单栏 -->
        <Sider class="biz-menu"
               ref="side1"
               hide-trigger
               collapsible
               width="225"
               :collapsed-width="78"
               v-model="isCollapsed">
            <div class="collapse-icon-box" @click="changeMenuStatus">
                <Icon :class="rotateIcon"
                      custom="iconfont icon-arrow"
                      style="color:var(--primary-text-color)"
                      @click.stop="changeMenuStatus" size="12" />
            </div>
            <Menu width="auto" :class="menuitemClasses" accordion :active-name="activeName" :open-names="openNames">
                <vuescroll :ops="ops">
                    <div v-for="(item,index) in menuTree" :key="index">
                        <Submenu :name="index" v-if="$access.ability(item.role,item.permission).validateAll" v-show="(index == 0 && $store.state.userInfo.hasSchool) || index > 0">
                            <template slot="title">
                                <Tooltip :content="item.name" placement="right" transfer v-show="isCollapsed">
                                    <Icon :custom="item.icon" style="width:55px;text-align:left;" :class="isCollapsed ? 'collapse-icon-size':''" size="20" />
                                </Tooltip>
                                <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="20" />
                                <span>{{item.name}}</span>
                            </template>
                            <MenuItem class="sub-item-wrap sub-item-wrap-active" :name="menuItem.router" :to="menuItem.router" v-for="(menuItem,i) in item.child" :key="i" v-if="$access.ability(menuItem.role,menuItem.permission).validateAll">
                                <Tooltip :content="menuItem.name" placement="right" transfer v-show="isCollapsed">
                                    <Icon class="sub-menu-icon" :custom="menuItem.icon" size="18" />
                                </Tooltip>
                                <Icon v-show="!isCollapsed" class="sub-menu-icon" :custom="menuItem.icon" size="18" />
                                <span>
                                    {{menuItem.name}}
                                    <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                        {{menuItem.tag}}
                                    </span>
                                </span>
                            </MenuItem>
                        </Submenu>
                        <MenuItem :name="item.router" v-else-if="$access.ability(item.role,item.permission).validateAll" :to="item.router">
                            <Tooltip :content="item.name" placement="right" transfer v-show="isCollapsed">
                                <Icon :custom="item.icon" style="width:55px;text-align:left;" :class="isCollapsed ? 'collapse-icon-size':''" size="22" />
                            </Tooltip>
                            <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="22" />
                            <span>{{item.name}}</span>
                        </MenuItem>
                    </div>
                </vuescroll>
            </Menu>
        </Sider>
        <!-- Body内容部分 -->
        <Layout :class="isCollapsed ?'collapsed-padding content-wrap':'content-wrap'">
            <slot name="content"></slot>
        </Layout>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                openNames:[],
                activeName:'',
                tipsOpt: {
                    offset: [0, 20]
                },
                ops: {
                    bar: { opacity: 0 }
                },
                isCollapsed: false,
                menuTree: [
                    {
                        icon: 'iconfont icon-school',
                        name: this.$t('system.menu.smartSc'),
                        router: '',
                        role: 'teacher|admin',
                        permission: '',
                        child: [
                            {
                                icon: 'iconfont icon-basic-setting',
                                name: this.$t('system.menu.baseSetting'),
                                router: '/home/system',
                                tag: '',
                                role: 'admin',
                                permission: 'schoolSetting-read|schoolSetting-upd'
                            },
                            {
                                icon: 'iconfont icon-teacher-mgt',
                                name: this.$t('system.menu.teacherMgt'),
                                router: '/home/teachermgmt',
                                tag: '',
                                role: 'admin',
                                permission: 'teacher-read|teacher-upd'
                            },
                            {
                                icon: 'iconfont icon-student-mgt',
                                name: this.$t('system.menu.stuMgt'),
                                router: '/home/studentAccount',
                                tag: '',
                                role: 'admin',
                                permission: 'student-upd|student-read'
                            },
                            {
                                icon: 'iconfont icon-class-mgt',
                                name: this.$t('system.menu.classMgt'),
                                router: '/home/classroom',
                                tag: '',
                                role: 'admin',
                                permission: 'classroom-upd|classroom-read'
                            },
                            {
                                icon: 'iconfont icon-kecheng',
                                name: this.$t('system.menu.cusSetting'),
                                router: '/home/ManageCourse',
                                tag: '',
                                role: 'admin',
                                permission: 'course-read|course-upd',
                            },
                            //{
                            //    icon: 'iconfont icon-time',
                            //    name: '时段管理',
                            //    router: '/home/CourseTime',
                            //    tag:'',
                            //    role:'admin',
                            //    permission:'',
                            //},
                            {
                                icon: 'iconfont icon-schedule',
                                name: this.$t('system.menu.cusPlanMgt'),
                                router: '/home/NewCoursePlan',
                                tag: '',
                                role: 'admin',
                                permission: 'coursePlan-read|coursePlan-upd',
                            },
                            {
                                icon: 'iconfont icon-auth',
                                name: this.$t('system.menu.authMgt'),
                                router: '/home/serviceDriveAuth',
                                tag: this.$t('system.menu.preview'),
                                role: 'admin',
                                permission: 'auth-read|auth-upd'
                            },
                            {
                                icon: 'iconfont icon-syllabus',
                                name: this.$t('system.menu.scSyllabus'),
                                router: '/home/syllabus',
                                tag: this.$t('system.menu.preview'),
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-file',
                                name: this.$t('system.menu.scContent'),
                                router: '/home/schoolcontent',
                                tag: '',
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-question-bank',
                                name: this.$t('system.menu.scQuBack'),
                                router: '/home/evaluation/schoolBank',
                                tag: '*',
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-k-point',
                                name: this.$t('system.menu.kdBack'),
                                router: '/home/knowledge',
                                tag: '*',
                                role: 'teacher|admin',
                                permission: '',
                            }
                        ]
                    },
                    {
                        icon: 'iconfont icon-analysis',
                        name: this.$t('system.menu.staAna'),
                        router: '',
                        role: 'admin',
                        permission: 'analysis-read|scboard-read',
                        child: [
                            {
                                icon: 'iconfont icon-xueqing',
                                name: this.$t('system.menu.evAna'),
                                router: '/totalIndex',
                                tag: '*',
                                role: 'admin',
                                permission: 'analysis-read'
                            },
                            {
                                icon: 'iconfont icon-school-analysis',
                                name: this.$t('system.menu.scAna'),
                                router: '/home/scboard',
                                tag: this.$t('system.menu.preview'),
                                role: 'admin',
                                permission: 'scboard-read'
                            }
                        ]
                    },
                    {
                        icon: 'iconfont icon-activityS',
                        name: this.$t('system.menu.scAc'),
                        router: '',
                        role: 'admin',
                        permission: 'schoolAc-read|schoolAc-upd',
                        child: [
                            {
                                icon: 'iconfont icon-test',
                                name: this.$t('system.menu.scEv'),
                                router: '/home/schoolEvaluation',
                                tag: '*',
                                role: 'admin',
                                permission: 'schoolAc-read|schoolAc-upd'
                            },
                            {
                                icon: 'iconfont icon-vote',
                                name: this.$t('system.menu.scVote'),
                                router: '/home/manageVote',
                                tag: '*',
                                role: 'admin',
                                permission: 'schoolAc-read|schoolAc-upd'
                            },
                            {
                                icon: 'iconfont icon-questionnaire',
                                name: this.$t('system.menu.scQu'),
                                router: '/home/manageQuestionnaire',
                                tag: '*',
                                role: 'admin',
                                permission: 'schoolAc-read|schoolAc-upd'
                            },
                        ]
                    },
                    {
                        icon: 'iconfont icon-kecheng',
                        name: this.$t('system.menu.classCus'),
                        router: '',
                        role: 'teacher',
                        permission: 'analysis',
                        child: [
                            {
                                icon: 'iconfont icon-class-self',
                                name: this.$t('system.menu.myClass'),
                                router: '/home/manageClass',
                                tag: '',
                                role: 'teacher',
                                permission: 'analysis'
                            },
                            {
                                icon: 'iconfont icon-course-self',
                                name: this.$t('system.menu.myCus'),
                                router: '/home/myCourse',
                                tag: '*',
                                role: 'teacher',
                                permission: 'analysis'
                            },
                            //{
                            //    icon: 'iconfont icon-schedule',
                            //    name: '我的课表',
                            //    router: '/home/CourseTable',
                            //    tag: '',
                            //    role: 'admin',
                            //    permission:'analysis'
                            //},
                        ]
                    },
                    {
                        icon: 'iconfont icon-textbook',
                        name: this.$t('system.menu.cusContent'),
                        router: '',
                        role: 'teacher',
                        permission: '',
                        child: [
                            {
                                icon: 'iconfont icon-syllabus',
                                name: this.$t('system.menu.prtSyllabus'),
                                router: '/home/personalSyllabus',
                                tag: this.$t('system.menu.preview'),
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-file',
                                name: this.$t('system.menu.prtContent'),
                                router: '/home/personalcontent',
                                tag: '',
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-question-bank',
                                name: this.$t('system.menu.prtQuBack'),
                                router: '/home/evaluation/personalBank',
                                tag: '*',
                                role: 'teacher|admin',
                                permission: '',
                            }
                        ]
                    },
                    {
                        icon: 'iconfont icon-activityT',
                        name: this.$t('system.menu.stuAc'),
                        router: '',
                        role: 'teacher|admin',
                        permission: '',
                        child: [
                            {
                                icon: 'iconfont icon-test',
                                name: this.$t('system.menu.prtEv'),
                                router: '/home/privateEvaluation',
                                tag: '*',
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-vote',
                                name: this.$t('system.menu.prtVote'),
                                router: '/home/personalVote',
                                tag: '*',
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-questionnaire',
                                name: this.$t('system.menu.prtQu'),
                                router: '/home/personalSurvey',
                                tag: '*',
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-learning-self',
                                name: this.$t('system.menu.selfLearn'),
                                router: '/home/SelfLearn',
                                tag: this.$t('system.menu.preview'),
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-hw',
                                name: this.$t('system.menu.homework'),
                                router: '/home/manageHomeWork',
                                tag: this.$t('system.menu.preview'),
                                role: 'teacher|admin',
                                permission: '',
                            },
                            {
                                icon: 'iconfont icon-syllabus',
                                name: this.$t('system.menu.acRecord'),
                                router: '/home/manageRecord',
                                tag: this.$t('system.menu.preview'),
                                role: 'teacher|admin',
                                permission: '',
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            changeMenuStatus() {
                this.$refs.side1.toggleCollapse()
                this.$EventBus.$emit('onCollapseChange', this.isCollapsed)
            }
        },
        computed: {
            rotateIcon() {
                return ["collapse-icon", this.isCollapsed ? "rotate-icon" : ""]
            },
            menuitemClasses() {
                return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""]
            }
        },
        created() {
            let cloudSetting = localStorage.getItem('cloudSetting')
            if (cloudSetting) {
                cloudSetting = JSON.parse(cloudSetting)
                if (cloudSetting.menuStatus == 'close') {
                    this.isCollapsed = true
                }
            }
        },
        watch: {
            $route: {
                handler(val, oldval) {
                    this.openNames = []
                    let flag = false
                    for (let i in this.menuTree) {
                        for (let j in this.menuTree[i].child) {
                            if (this.menuTree[i].child[j].router == val.path) {
                                this.activeName = val.path
                                this.openNames.push(parseInt(i))
                                flag = true
                                break
                            }
                        }
                        if (flag) {
                            break
                        }
                    }
                    if (!flag) {
                        this.activeName = ''
                        this.openNames = []
                    }
                },
                // 深度观察监听
                deep: true,
                //立即执行
                immediate: true
            }
        }

    };
</script>
<style lang="less" scoped>
    @import "./BaseLayout.less";
</style>
<style lang="less">

    .layout .ivu-layout-header {
        padding: 0px;
    }

    .biz-menu .ivu-menu-light {
        background: var(--side-bg);
        color: var(--primary-textColor);
    }

    .biz-menu .ivu-menu-vertical.ivu-menu-light:after {
        width: 0px;
    }

    .biz-menu
    .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
        background: #101117;
        z-index: 2;
    }


    .collapsed-menu span {
        overflow: hidden;
        text-overflow: ellipsis;
        /* width: 118px; */
    }
    .collapsed-menu span {
        width: 0px;
        float: right;
        transition: width 0.1s ease;
    }
    .menu-item span {
        display: inline-block;
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
        white-space: nowrap;
        font-size: 16px;
        /* width: 118px; */
        vertical-align: top;
        transition: width 0.1s ease 0.1s;
        font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Microsoft JhengHei !important;
    }

    .menu-item i {
        transform: translateX(0px);
        transition: font-size 0.5s ease, transform 0.5s ease;
        vertical-align: middle;
        font-size: 16px;
        /*color: var(--primary-text-color);*/
    }

    .menu-item .ivu-menu .ivu-menu-item {
        color: #CCCCCC;
    }

    .menu-item .ivu-menu-submenu-title{
        color: var(--primary-text-color);
    }

    

    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
        vertical-align: middle;
        font-size: 22px;
    }

    .biz-menu .ivu-icon-ios-arrow-down:before {
        position: absolute;
        top: -5px;
        font-size: 12px;
        color: #1CC0F3;
    }

    .collapsed-menu .ivu-icon-ios-arrow-down:before {
        right: -20px;
    }

    .biz-menu .ivu-menu-opened .ivu-icon-ios-arrow-down:before {
        transform: rotate(180deg);
        transition: transform 0.2s;
    }

    .biz-menu .ivu-icon-ios-arrow-down:before {
        transform: rotate(0deg);
        transition: transform 0.2s;
    }

    .biz-menu .ivu-menu-submenu-title-icon {
        transform: translateY(-50%) rotate(0deg) !important;
    }

    .poptop-content-radius .ivu-menu:first-child, .poptop-content-radius .ivu-menu:first-child .ivu-menu-item {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .poptop-content-radius .ivu-menu:last-child, .poptop-content-radius .ivu-menu:last-child .ivu-menu-item {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .biz-menu .ivu-menu-vertical .ivu-menu-item, .biz-menu .ivu-menu-vertical .ivu-menu-submenu-title {
        padding: 8px 24px;
    }

    .biz-menu .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        color: #1CC0F3;
    }

        .biz-menu .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
            background: #1CC0F3;
        }
</style>