<template>
    <div class="layout">
        <!-- 头部菜单栏 -->
        <Header class="header">
            <div class="logo-wrap">
                <!-- <img src="@/assets/login/ies5_logo_2.svg" :class="isCollapsed ? 'collapsed-logo-width unit-logo':'collapsed-logo-width  unit-logo'" v-show="isShowLogo" /> -->
                <BaseAreaList></BaseAreaList>
            </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="isCollapsed ? '区级' : '区级平台'">
                        <!-- 暂未提供判断是否购买服务的字段 -->
                        <div>
                            <div v-for="(item,index) in areaMenu" :key="index">
                                <Submenu :name="item.subName" v-if="item.child.length">
                                    <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">
                                    <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" :to="item.router" v-else>
                                <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>
                </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 {
            openNames: [],
            activeName: '',
            tipsOpt: {
                offset: [0, 20]
            },
            ops: {
                bar: { opacity: 0 }
            },
            isCollapsed: false,
            areaMenu: [],
            isShowLogo: true
        }
    },

    methods: {
        initMenu() {
            // 区级菜单
            this.areaMenu = [
                {
                    icon: 'iconfont icon-policy',
                    name: '政策文件',
                    router: '/area/policy',
                    tag: '',
                    role: 'admin|teacher|expert',
                    permission: '',
                    menuName: 'policy',
                    child: [],
                    isShow: true
                },
                {
                    icon: 'iconfont icon-shujufenxi',
                    name: '区级数据',
                    router: '/area/areaMgmt',
                    tag: '',
                    role: '',
                    permission: '',
                    menuName: 'areaMgmt',
                    child: []
                },
                {
                    icon: 'iconfont icon-basic-setting',
                    name: '研修总览',
                    router: '/area/TrainAreaMgt',
                    tag: '',
                    role: '',
                    permission: '',
                    menuName: 'TrainAreaMgt',
                    child: []
                },
                {
                    icon: 'iconfont icon-activityT',
                    name: '创建研修',
                    router: '/area/CreateAreaTrain',
                    tag: '',
                    role: '',
                    permission: '',
                    menuName: 'CreateAreaTrain',
                    child: []
                },
				{
				    icon: 'iconfont icon-activityT',
				    name: '专家抽查',
				    router: '/area/spotCheck',
				    tag: '',
				    role: '',
				    permission: '',
				    menuName: 'spotCheck',
				    child: []
				},
                // 区级研修
                // {
                //     icon: 'iconfont icon-activityT',
                //     name: '区级研修',
                //     router: '',
                //     subName: 'areatraining',
                //     role: '',
                //     permission: '',
                //     child: [{
                //         icon: 'iconfont icon-basic-setting',
                //         name: '研修总览',
                //         router: '/area/TrainAreaMgt',
                //         tag: '',
                //         role: '',
                //         permission: '',
                //         menuName: 'TrainAreaMgt'
                //     },
                //     {
                //         icon: 'iconfont icon-basic-setting',
                //         name: '创建研修',
                //         router: '/area/CreateAreaTrain',
                //         tag: '',
                //         role: '',
                //         permission: '',
                //         menuName: 'CreateAreaTrain'
                //     }
                //     ]
                // },
                {
                    icon: 'iconfont icon-vote',
                    name: this.$t('system.menu.scVote'),
                    router: '/area/manageAreaVote',
                    tag: '',
                    role: '',
                    permission: '',
                    menuName: 'manageAreaVote',
                    child: []
                },
                {
                    icon: 'iconfont icon-questionnaire',
                    name: this.$t('system.menu.scQu'),
                    router: '/area/manageAreaQuestionnaire',
                    tag: '',
                    role: '',
                    permission: '',
                    menuName: 'manageAreaQuestionnaire',
                    child: []
                },
				{
				    icon: 'iconfont icon-questionnaire',
				    name: '微能力点',
				    router: '/area/areaAbilityMgmt',
				    tag: '',
				    role: '',
				    permission: '',
				    menuName: 'areaAbilityMgmt',
				    child: []
				},
                // {
                //     icon: 'iconfont icon-activityS',
                //     name: '调研活动',
                //     router: '',
                //     role: '',
                //     permission: '',
                //     subName: 'scAcArea',
                //     isShow: true,
                //     child: [{
                //         icon: 'iconfont icon-vote',
                //         name: this.$t('system.menu.scVote'),
                //         router: '/area/manageAreaVote',
                //         tag: '',
                //         role: '',
                //         permission: '',
                //         menuName: 'manageAreaVote'
                //     },
                //     {
                //         icon: 'iconfont icon-questionnaire',
                //         name: this.$t('system.menu.scQu'),
                //         router: '/area/manageAreaQuestionnaire',
                //         tag: '',
                //         role: '',
                //         permission: '',
                //         menuName: 'manageAreaQuestionnaire'
                //     }
                //     ]
                // }
            ]
        },
        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'
        }
        this.srvAdr = this.$store.state.config.srvAdr
        //只有大陆站才验证手机号
        if (this.srvAdr == 'China') {
            // 暂不提示
            // this.getIdInfo()
        } else {
            this.hasVerify = true
        }
        //判断是否绑定手机、加入学校
        this.$Notice.destroy()
    },
    mounted() {
        this.$EventBus.$off('onLogoStatusChange')
        this.$EventBus.$on('onLogoStatusChange', val => {
            this.isShowLogo = val === 'open'
        })
    },
    watch: {
        $route: {
            handler(val, oldval) {
                if (this.areaMenu.length == 0) {
                    this.initMenu()
                }
                let metaName = val.meta.activeName
                this.activeName = metaName
                this.openNames = []
                for (let i in this.areaMenu) {
                    if (this.areaMenu[i].child.length) {
                        for (let j in this.areaMenu[i].child) {
                            if (this.areaMenu[i].child[j].menuName == metaName) {
                                this.activeName = metaName
                                this.openNames.push(this.areaMenu[i].subName)
                                break
                            }
                        }
                    }
                }
            },
            // 深度观察监听
            deep: true,
            //立即执行
            immediate: true
        },
        '$i18n.locale'(n, o) {
            this.initMenu()
        }
    }

};
</script>
<style lang="less" scoped>
@import "./AreaLayout.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: 0px;
    // 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>