<template>
    <div class="layout">
        <!-- 头部菜单栏 -->
        <Header class="header">
            <div class="logo-wrap">
                <img style="margin-left: 20px;" src="../assets/login/ies5_logo_2.svg" :class="isCollapsed ? 'collapsed-logo-width unit-logo':'collapsed-logo-width  unit-logo'" v-show="isShowLogo && !isShowAreaSelect" />
                <BaseSelectArea @noArea="isShowAreaSelect = false" v-show="isShowAreaSelect"></BaseSelectArea>
            </div>
            <div class="school-wrap">
                <BaseSelectSchool></BaseSelectSchool>
            </div>
            <slot name="header-content"></slot>
        </Header>
        <!-- 侧边菜单栏 -->
        <Sider class="biz-menu" ref="side1" hide-trigger collapsible width="190" :collapsed-width="78" v-model="isCollapsed">
            <div class="collapse-icon-box" @click="changeMenuStatus">
                <Icon :class="rotateIcon" custom="iconfont icon-arrow" style="color:var(--border-color)" @click.stop="changeMenuStatus" size="12" />
            </div>
            <Menu width="auto" :class="['menu-item', isCollapsed ? 'collapsed-menu' : '']" accordion :active-name="activeName" :open-names="openNames">
                <vuescroll :ops="ops">
                    <MenuGroup :title="$t('system.menu.school')">
                        <!-- 暂未提供判断是否购买服务的字段 -->
                        <p class="school-menu-tips" v-show="schoolStatusInfo">
                            {{schoolStatusInfo}}
                        </p>
                        <div v-if="$store.state.userInfo.hasSchool">
                            <div v-for="(item,index) in schoolMenu" :key="index">
                                <Submenu :name="item.subName" v-if="$access.ability(item.role,item.permission).validateAll && item.child.length && item.isShow" 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="16" />
                                        </Tooltip>
                                        <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                        <span>{{item.name}}</span>
                                    </template>
                                    <MenuItem :name="menuItem.menuName" :to="menuItem.router" v-for="(menuItem,i) in item.child" :key="i" v-show="$access.ability(menuItem.role,menuItem.permission).validateAll && menuItem.isShow">
                                    <Tooltip :content="menuItem.name" placement="right" transfer v-show="isCollapsed">
                                        <Icon class="sub-menu-icon" :custom="menuItem.icon" size="16" />
                                    </Tooltip>
                                    <Icon v-show="!isCollapsed" class="sub-menu-icon" :custom="menuItem.icon" size="16" />
                                    <span>
                                        {{menuItem.name}}
                                        <Tooltip v-show="menuItem.info" :content="menuItem.info" transfer theme="light" max-width="180">
                                            <Icon type="ios-information-circle-outline" color="#1cc0f3" />
                                        </Tooltip>
                                        <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                            {{menuItem.tag}}
                                        </span>
                                    </span>
                                    </MenuItem>
                                </Submenu>
                                <MenuItem :name="item.menuName" v-else-if="$access.ability(item.role,item.permission).validateAll && item.isShow" :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="16" />
                                </Tooltip>
                                <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                <span>
                                    {{item.name}}
                                    <Tooltip v-show="item.info" :content="item.info" theme="light" transfer max-width="180">
                                        <Icon type="ios-information-circle-outline" color="#1cc0f3" />
                                    </Tooltip>
                                    <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                        {{item.tag}}
                                    </span>
                                </span>
                                </MenuItem>
                            </div>
                        </div>
                    </MenuGroup>
                    <MenuGroup :title="$t('system.menu.private')">
                        <div v-for="(item,index) in teacherMenu" :key="index">
                            <Submenu :name="item.subName" v-if="$access.ability(item.role,item.permission).validateAll && item.child.length && item.isShow" 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="16" />
                                    </Tooltip>
                                    <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                    <span>{{item.name}}</span>
                                </template>
                                <MenuItem :name="menuItem.menuName" :to="menuItem.router" v-for="(menuItem,i) in item.child" :key="i" v-show="$access.ability(menuItem.role,menuItem.permission).validateAll && menuItem.isShow">
                                <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="16" />
                                <span>
                                    {{menuItem.name}}
                                    <Tooltip v-show="menuItem.info" :content="menuItem.info" transfer theme="light" max-width="180">
                                        <Icon type="ios-information-circle-outline" color="#1cc0f3" />
                                    </Tooltip>
                                    <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                        {{menuItem.tag}}
                                    </span>
                                </span>
                                </MenuItem>
                            </Submenu>
                            <MenuItem :name="item.menuName" v-else-if="$access.ability(item.role,item.permission).validateAll && item.isShow" :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="16" />
                            </Tooltip>
                            <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                            <span>
                                {{item.name}}
                                <Tooltip v-show="item.info" :content="item.info" theme="light" transfer max-width="180">
                                    <Icon type="ios-information-circle-outline" color="#1cc0f3" />
                                </Tooltip>
                                <span style="color: aqua;margin-left: 2px;font-size: 12px;margin-top:3px">
                                    {{item.tag}}
                                </span>
                            </span>
                            </MenuItem>
                        </div>
                    </MenuGroup>
                </vuescroll>
            </Menu>
            <p class="copyright-info" v-show="!isCollapsed">
                {{$t('system.menu.copyright')}}
            </p>
        </Sider>
        <!-- Body内容部分 -->
        <Layout :class="isCollapsed ?'collapsed-padding content-wrap':'content-wrap'">
            <slot name="content"></slot>
        </Layout>
    </div>
</template>
<script>
import jwtDecode from 'jwt-decode'
export default {
    data() {
        return {
			isShowAreaSelect:true,
            openNames: [],
            activeName: '',
            tipsOpt: {
                offset: [0, 20]
            },
            ops: {
                bar: { opacity: 0 }
            },
            isCollapsed: false,
            menuTree: [],
            schoolMenu: [],
            teacherMenu: [],
            isShowLogo: true
        }
    },

    methods: {
        initMenu() {
            //判断当前学校是否购买服务 暂未提供字段
            this.schoolMenu = !this.$store.state.userInfo.schoolPay ? [
                // 学校管理
                {
                    icon: 'iconfont icon-school',
                    name: this.$t('system.menu.schoolMgt'),
                    router: '',
                    subName: 'schoolMgt',
                    role: 'admin',
                    permission: 'schoolSetting-read|teacher-read|student-read|classroom-read|auth-read|course-read',
                    isShow: true,
                    child: [
                        // 基础设置
                        {
                            icon: 'iconfont icon-basic-setting',
                            name: this.$t('system.menu.baseSetting'),
                            router: '/home/system',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolSetting-read|schoolSetting-upd',
                            menuName: 'system',
                            isShow: true
                        },
                        // 教师管理
                        {
                            icon: 'iconfont icon-teacher-mgt',
                            name: this.$t('system.menu.teacherMgt'),
                            router: '/home/teachermgmt',
                            tag: '',
                            role: 'admin',
                            permission: 'teacher-read|teacher-upd',
                            menuName: 'teachermgmt',
                            isShow: true
                        },
                        // 学生管理
                        {
                            icon: 'iconfont icon-student-mgt',
                            name: this.$t('system.menu.stuMgt'),
                            router: '/home/studentAccount',
                            tag: '',
                            role: 'admin',
                            permission: 'student-upd|student-read',
                            menuName: 'studentAccount',
                            isShow: true
                        },
                        // 课程管理
                        {
                            icon: 'iconfont icon-kecheng',
                            name: this.$t('system.menu.cusMgt'),
                            router: '/home/NewCusMgt',
                            tag: '',
                            role: 'admin',
                            permission: 'course-read|course-upd',
                            menuName: 'NewCusMgt',
                            isShow: true
                        },
                        // 教室管理
                        {
                            icon: 'iconfont icon-class-mgt',
                            name: this.$t('system.menu.classMgt'),
                            router: '/home/classroom',
                            tag: '',
                            role: 'admin',
                            permission: 'classroom-upd|classroom-read',
                            menuName: 'classroom',
                            isShow: true
                        },
                        // 学校公告
                        {
                            icon: 'iconfont icon-notify',
                            name: this.$t('system.menu.schoolNotify'),
                            router: '/home/schoolNotify',
                            tag: '',
                            role: 'admin',
                            permission: 'notify-upd',
                            menuName: 'schoolNotify',
                            isShow: this.$store.state.config.srvAdr == 'China'
                        },
                        // 授权管理
                        {
                            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',
                            menuName: 'serviceDriveAuth',
                            isShow: process.env.NODE_ENV == 'development'
                        }
                    ]
                },
                // 学校资源
                {
                    icon: 'iconfont icon-textbook',
                    name: this.$t('system.menu.schoolRes'),
                    router: '',
                    subName: 'schoolRes',
                    role: 'admin|teacher',
                    permission: '',
                    isShow: true,
                    child: [
                        // 校本课纲
                        {
                            icon: 'iconfont icon-syllabus',
                            name: this.$t('system.menu.scSyllabus'),
                            router: '/home/syllabus',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'syllabus-read|syllabus-upd',
                            menuName: 'syllabus',
                            isShow: true
                        },
                        // 校本内容
                        {
                            icon: 'iconfont icon-file',
                            name: this.$t('system.menu.scContent'),
                            router: '/home/schoolcontent',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'content-read|content-upd',
                            menuName: 'schoolcontent',
                            isShow: true
                        },
                        // 校本题库
                        {
                            icon: 'iconfont icon-question-bank',
                            name: this.$t('system.menu.scQuBack'),
                            router: '/home/evaluation/schoolBank',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'exercise-read|exercise-upd',
                            menuName: 'schoolBank',
                            isShow: true
                        },
                        // 知识点库
                        {
                            icon: 'iconfont icon-k-point',
                            name: this.$t('system.menu.kdBack'),
                            router: '/home/knowledge',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'knowledge-read|knowledge-upd',
                            menuName: 'knowledge',
                            info: this.$t('tip.menuKlg'),
                            isShow: true
                        }
                    ]
                },
                // 校园活动
                {
                    icon: 'iconfont icon-activityS',
                    name: this.$t('system.menu.scAc'),
                    router: '',
                    role: 'admin',
                    permission: 'schoolAc-read|schoolAc-upd',
                    subName: 'scAc',
                    isShow: true,
                    child: [
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.scEv'),
                            router: '/home/schoolEvaluation',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolAc-read|schoolAc-upd',
                            menuName: 'schoolEvaluation',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-vote',
                            name: this.$t('system.menu.scVote'),
                            router: '/home/manageVote',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolAc-read|schoolAc-upd',
                            menuName: 'manageVote',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-questionnaire',
                            name: this.$t('system.menu.scQu'),
                            router: '/home/manageQuestionnaire',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolAc-read|schoolAc-upd',
                            menuName: 'manageQuestionnaire',
                            isShow: true
                        },
                    ]
                },
                // 研修中心
                {
                    icon: 'iconfont icon-train',
                    name: this.$t('system.menu.train'),
                    router: '',
                    role: 'admin',
                    permission: '',
                    subName: 'scTrain',
                    // isShow: true,
                    // isShow: this.srvAdr == 'China',
                    isShow: this.$store.state.config.srvAdr == 'China',
                    child: [
                        {
                            icon: 'iconfont icon-policy',
                            name: '政策文件',
                            router: '/home/policy',
                            tag: '',
                            role: 'admin|teacher|expert',
                            permission: '',
                            menuName: 'policy',
                            child: [],
                            isShow: this.$store.state.config.srvAdr == 'China'
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.trainData'),
                            router: '/home/Statistics/training',
                            tag: '',
                            role: 'admin',
                            permission: '',
                            menuName: 'statistics',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.abilityPoint'),
                            router: '/home/abilityMgmt',
                            tag: '',
                            role: 'admin',
                            permission: '',
                            menuName: 'abilityMgmt',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.scTrain'),
                            router: '/home/TrainMgt',
                            tag: '',
                            role: 'admin',
                            permission: '',
                            menuName: 'TrainMgt',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.appAbility'),
                            router: '/home/ability',
                            tag: '',
                            role: 'admin',
                            permission: '',
                            menuName: 'ability',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.classRecord'),
                            router: '/home/video',
                            tag: '',
                            role: 'admin',
                            permission: '',
                            menuName: 'video',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.resourceCenter'),
                            router: '/home/resource',
                            tag: '',
                            role: 'admin|teacher',
                            permission: '',
                            menuName: 'resource',
                            isShow: this.$store.state.config.srvAdr == 'China'
                        }
                    ]
                },
                // 学情分析
                {
                    icon: 'iconfont icon-xueqing',
                    name: this.$t('system.menu.evAna'),
                    router: '/totalIndex',
                    tag: '',
                    role: 'admin',
                    permission: 'analysis-read',
                    menuName: 'totalIndex',
                    child: [],
                    isShow: true
                },
                //开放平台
                {
                    icon: 'iconfont icon-open',
                    name: this.$t('settings.setting_title3'),
                    router: '/home/OpenPlat',
                    tag: this.$t('system.preview'),
                    role: 'admin',
                    permission: '',
                    menuName: 'OpenPlat',
                    child: [],
                    isShow: process.env.NODE_ENV == 'development'
                }
            ] : []
            this.teacherMenu = [
                // 我的班级
                {
                    icon: 'iconfont icon-class-self',
                    name: this.$t('system.menu.myClass'),
                    router: '/home/manageClass',
                    tag: '',
                    role: 'teacher',
                    permission: '',
                    child: [],
                    menuName: 'manageClass',
                    isShow: this.$store.state.userInfo.hasSchool && this.$store.state.userInfo.isHeadmaster
                },
                // 我的课程
                {
                    icon: 'iconfont icon-course-self',
                    name: this.$t('system.menu.myCus'),
                    router: '/home/myCourse',
                    tag: '',
                    role: 'teacher',
                    permission: '',
                    child: [],
                    menuName: 'myCourse',
                    isShow: true,
                    info: this.$t('tip.myCus')
                },
                // 我的资源
                {
                    icon: 'iconfont icon-textbook',
                    name: this.$t('system.menu.cusContent'),
                    router: '',
                    role: 'teacher',
                    permission: '',
                    subName: 'cusContent',
                    isShow: true,
                    child: [
                        {
                            icon: 'iconfont icon-syllabus',
                            name: this.$t('system.menu.prtSyllabus'),
                            router: '/home/personalSyllabus',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalSyllabus',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-file',
                            name: this.$t('system.menu.prtContent'),
                            router: '/home/personalcontent',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalcontent',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-question-bank',
                            name: this.$t('system.menu.prtQuBack'),
                            router: '/home/evaluation/personalBank',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalBank',
                            isShow: true
                        }
                    ]
                },
                // 学习活动
                {
                    icon: 'iconfont icon-activityT',
                    name: this.$t('system.menu.stuAc'),
                    router: '',
                    role: 'teacher|admin',
                    permission: '',
                    subName: 'stuAc',
                    isShow: true,
                    child: [
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.prtEv'),
                            router: '/home/privateEvaluation',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'privateEvaluation',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-vote',
                            name: this.$t('system.menu.prtVote'),
                            router: '/home/personalVote',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalVote',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-questionnaire',
                            name: this.$t('system.menu.prtQu'),
                            router: '/home/personalSurvey',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalSurvey',
                            isShow: true
                        },
                        // 自主学习和作业活动暂时隐藏
                        // {
                        //     icon: 'iconfont icon-learning-self',
                        //     name: this.$t('system.menu.selfLearn'),
                        //     router: '/home/SelfLearn',
                        //     tag: this.$t('system.menu.preview'),
                        //     role: 'teacher|admin',
                        //     permission: '',
                        //     menuName: 'selfLearn',
                        // isShow:true
                        // },
                        // {
                        //     icon: 'iconfont icon-hw',
                        //     name: this.$t('system.menu.homework'),
                        //     router: '/home/manageHomeWork',
                        //     tag: this.$t('system.menu.preview'),
                        //     role: 'teacher|admin',
                        //     permission: '',
                        //     menuName: 'manageHomeWork',
                        // isShow:true
                        // }
                    ]
                },
                // 个人研修
                {
                    icon: 'iconfont icon-train',
                    name: this.$t('system.menu.train'),
                    router: '',
                    role: 'teacher|admin',
                    permission: '',
                    subName: 'privTrain',
                    // isShow: process.env.NODE_ENV == 'development',
                    // isShow: this.$store.state.config.srvAdr == 'China',
                    isShow: true,
                    child: [
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.trainCount'),
                            router: '/home/jyHome',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'jyHome',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.onlineTrain'),
                            router: '/home/online',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'online',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.scTrain'),
                            router: '/home/offline',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'offline',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.appAssassment'),
                            router: '/home/application',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'application',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.classRecord'),
                            router: '/home/classMemoir',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'classmemoir',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.discuss'),
                            router: '/home/discuss',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'discuss',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-vote',
                            name: this.$t('system.menu.scVote'),
                            router: '/home/privateVote',
                            tag: '',
                            role: 'admin|teacher',
                            permission: '',
                            child: [],
                            menuName: 'privateVote',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-questionnaire',
                            name: this.$t('system.menu.scQu'),
                            router: '/home/privateQuestionnaire',
                            tag: '',
                            role: 'admin|teacher',
                            permission: '',
                            child: [],
                            menuName: 'privateQuestionnaire',
                            isShow: true
                        },
                    ]
                },

                // 任务列表（暂时隐藏）
                {
                    icon: 'iconfont icon-task',
                    name: this.$t('system.menu.taskList'),
                    router: '/home/taskList',
                    tag: this.$t('system.menu.preview'),
                    role: 'teacher',
                    permission: '',
                    child: [],
                    menuName: 'taskList',
                    isShow: process.env.NODE_ENV == 'development' && this.$store.state.userInfo.hasSchool,
                    info: this.$t('tip.task')
                }
            ]
        },
        changeMenuStatus() {
            this.$refs.side1.toggleCollapse()
            this.$EventBus.$emit('onCollapseChange', this.isCollapsed)
        },
        // 获取账号详细信息，用来验证大陆站用户是否完成手机号绑定
        getIdInfo() {
            let host = this.$store.state.config.China.coreAPIUrl
            let clientId = this.$store.state.config.China.clientID
            let idToken = localStorage.getItem('id_token')
            let tokenData = jwtDecode(idToken)
            let nonce = tokenData ? tokenData.nonce : ''
            let params = {
                "grant_type": "get",
                "nonce": nonce,
                "client_id": clientId,
                "id_token": idToken
            }
            this.$api.service.getIdProfile(host, params).then(
                res => {
                    console.log(res)
                    if (!res.error) {
                        if (!res.mobile) {
                            this.$Notice.warning({
                                title: this.$t('home.verifyPhTitle'),
                                duration: 0,
                                render: (h, params) => {
                                    return h('span', {
                                        style: {
                                            color: 'red'
                                        }
                                    }, [
                                        h('span', this.$t('home.verifyPh') + ', '),
                                        h('a', {
                                            domProps: {
                                                innerHTML: this.$t('home.toPhone')
                                            },
                                            on: {
                                                'click': () => {
                                                    this.$router.push({
                                                        path: '/home/userCenter'
                                                    })
                                                }
                                            }
                                        })
                                    ])
                                }
                            })
                        } else {
                            this.hasVerify = true
                        }
                    } else {
                        this.$Message.error('API Error')
                    }
                },
                err => {
                    console.log(err)
                }
            )
        },
    },
    computed: {
        rotateIcon() {
            return ["collapse-icon", this.isCollapsed ? "rotate-icon" : ""]
        },
        schoolStatusInfo() {
            if (this.isCollapsed) {
                return ''
            } else {
                //学校没有购买服务
                if (this.$store.state.userInfo.schoolPay) {
                    return this.$t('system.menu.noSchool1')
                } else if (!this.$store.state.userInfo.hasSchool) {
                    // 没有加入学校，但是有申请中的学校 
                    let requestSchool = this.$store.state.user.userProfile.schools

                    return requestSchool.length ? `${requestSchool[0].name}（${this.$t('settings.status3')}）` : this.$t('system.menu.noSchool2')
                } else {
                    return ''
                }
            }
        }
    },
    created() {
        console.log(process.env.NODE_ENV)
        this.initMenu()
        let cloudSetting = localStorage.getItem('cloudSetting')
        if (cloudSetting) {
            cloudSetting = JSON.parse(cloudSetting)
            if (cloudSetting.menuStatus == 'close') {
                this.isCollapsed = true
            }
            this.isShowLogo = cloudSetting.logoStatus === 'open'
        }
        //只有大陆站才验证手机号
        if (this.$store.state.config.srvAdr == 'China') {
            // 暂不提示
            // this.getIdInfo()
        } else {
            this.hasVerify = true
        }
        //判断是否绑定手机、加入学校
        this.$Notice.destroy()
        // if (!this.$store.state.userInfo.hasSchool) {
        //     this.$Notice.warning({
        //         title: this.$t('home.verifySchoolTitle'),
        //         duration: 0,
        //         render: (h, params) => {
        //             return h('span', {
        //                 style: {
        //                     color: 'red'
        //                 }
        //             }, [
        //                 h('span', this.$t('home.verifySchool') + ' ,'),
        //                 h('a', {
        //                     domProps: {
        //                         innerHTML: this.$t('home.toSchool')
        //                     },
        //                     on: {
        //                         'click': () => {
        //                             this.$router.push({
        //                                 path: '/home/settings'
        //                             })
        //                         }
        //                     }
        //                 })
        //             ])
        //         }
        //     })
        // }
    },
    mounted() {
        this.$EventBus.$off('onLogoStatusChange')
        this.$EventBus.$on('onLogoStatusChange', val => {
            this.isShowLogo = val === 'open'
        })
        console.log('站点：', this.$store.state.config.srvAdr)
    },
    watch: {
        $route: {
            handler(val, oldval) {
                if (this.schoolMenu.length == 0) {
                    this.initMenu()
                }
                let metaName = val.meta.activeName
                this.activeName = metaName
                this.openNames = []
                for (let i in this.schoolMenu) {
                    if (this.schoolMenu[i].child.length) {
                        for (let j in this.schoolMenu[i].child) {
                            if (this.schoolMenu[i].child[j].menuName == metaName) {
                                this.activeName = metaName
                                this.openNames.push(this.schoolMenu[i].subName)
                                break
                            }
                        }
                    }
                }
                for (let i in this.teacherMenu) {
                    if (this.teacherMenu[i].child.length) {
                        for (let j in this.teacherMenu[i].child) {
                            if (this.teacherMenu[i].child[j].menuName == metaName) {
                                this.activeName = metaName
                                this.openNames.push(this.teacherMenu[i].subName)
                                break
                            }
                        }
                    }
                }
            },
            // 深度观察监听
            deep: true,
            //立即执行
            immediate: true
        },
        '$i18n.locale'(n, o) {
            this.initMenu()
        }
    }

};
</script>
<style lang="less" scoped>
@import "./BaseLayout.less";
</style>
<style lang="less">
.biz-menu .ivu-menu-vertical .ivu-menu-item-group-title {
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    position: relative;
    color: white;
}
.ivu-menu-item-group {
    position: relative;
}
.biz-menu .ivu-menu-vertical .ivu-menu-item-group::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #303030;
    position: absolute;
    right: 0px;
    bottom: -10px;
    box-shadow: 0px 12px 8px -12px #000;
}
.biz-menu .ivu-menu-item-group:nth-child(2)::after {
    background: transparent;
}
.biz-menu .ivu-menu-item-group:nth-child(2) {
    margin-top: 30px;
}

.biz-menu .ivu-menu-item-group:first-child {
    margin-top: 0px;
}
.biz-menu .ivu-menu-item-group {
    margin-top: 10px;
}
.layout .ivu-layout-header {
    padding: 0px;
}

.biz-menu .ivu-menu-light {
    // background: var(--side-bg);
    background: #1d1e23;
    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: #33343a;
    color: white;
    z-index: 2;
}

.collapsed-menu span {
    position: absolute;
    opacity: 0;
    float: right;
    width: 0px;
}
.menu-item span {
    display: inline-block;
    white-space: nowrap;
    font-size: 15px;
    // position: absolute;
    width: ~"calc(100% - 50px)";
    max-width: 150px;
    vertical-align: top;
    transition: width 0.2s;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,
        Microsoft JhengHei !important;
}

.menu-item i {
    margin-right: 10px;
    transform: translateX(0px);
    transition: font-size 0.5s ease, transform 0.5s ease;
    font-size: 16px;
}

.menu-item .ivu-menu .ivu-menu-item {
    color: #cccccc;
}
.menu-item .ivu-menu-item {
    color: hsla(0, 0%, 100%, 0.7);
    display: flex;
    align-items: center;
}

.menu-item .ivu-menu-submenu-title {
    color: hsla(0, 0%, 100%, 0.7);
    display: flex;
    align-items: center;
}

.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: -6px;
    font-size: 15px;
}

.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: 13px 24px;
}
.biz-menu .ivu-menu-submenu .ivu-menu-item {
    background: #101117;
    display: flex;
    align-items: center;
}

.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: transparent;
    background: #1cc0f3;
    width: 1px;
}

// .ivu-menu-submenu-title:hover .ivu-menu-submenu-title-icon::before,.ivu-menu-submenu-title:hover span, .ivu-menu-submenu-title:hover .ivu-icon{
//     color: #fff;
// }
.ivu-menu-submenu-title:hover .ivu-menu-submenu-title-icon::before {
    color: rgb(45, 183, 245);
}
.ivu-menu-item:hover,
.ivu-menu-submenu-title:hover {
    color: #1cc0f3 !important;
    .ivu-icon-ios-arrow-down:before {
        color: #1cc0f3 !important;
    }
}
</style>