<template>
    <div id="app" :style="{ 'background-color': pagebgc() }">
        <!--導航列-->
        <div class="myNav">
            <Menu mode="horizontal" :active-name="MyNo" class="menubar">
                <span @click="clickSidebarToggle()"
                    v-if="MyNo != '1' && MyNo != 'X'"
                    class="sidebar-toggle">
                    <Icon class="menu-icon"
                        type="md-menu"
                        :class="{'menu-icon-close': this.$store.getters.getSidebarisOpen == false}" />
                </span>
                <span class="mytitle">{{ MyName }}</span>
                <!--<span class="pixel">{{ windowWidth }} * {{ windowHeight }} px</span>-->
                <!-- 头像 -->
                <span class="profile-dropdown">
                    <!-- <p>{{userInfo.name}}</p> -->
                    <PersonalPhoto v-if="userInfo.name !== undefined" class="avatar-link" :width="'35px'" :height="'35px'" :fontSize="'0.8rem'" :name="userInfo.name" color="#00AD6C" />
                    <div id="profile-pop">
                        <span class="profile-pop-triangle"></span>
                        <h5 class="profileName">{{userInfo.name}} ({{userInfo.studentId}})</h5>
                        <Dropdown v-if="isTeacher" @on-click="onRoleSelect" trigger="click" style="width: 100%;" transfer-class-name="test">
                            <li class="profile-pop-item">
                                <a href="javascript:void(0)">
                                    <Icon size="15" type="ios-person" class="profile-pop-itemIcon3" />
                                    {{ getRoleName(curRole) }}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                            </li>
                            <DropdownMenu slot="list">
                                <DropdownItem :name="'teacher'">{{$t("studentWeb.home.teacher")}}</DropdownItem>
                                <DropdownItem :name="'student'">{{$t("studentWeb.home.student")}}</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <!-- <li class="profile-pop-item" @click="onSet">
                            <svg-icon icon-class="setting"
                                      class="profile-pop-itemIcon1" />{{ $t("studentWeb.home.setting") }}
                        </li> -->
                        <li class="profile-pop-item" @click="onQuit">
                            <svg-icon icon-class="logout" class="profile-pop-itemIcon2" />{{$t("studentWeb.home.logout")}}
                        </li>
                    </div>
                </span>
                <!--通知彈窗區域-->
                <!-- <MenuItem name="6" @click.native="noData" :title="$t('studentWeb.type.note')">
                    <span class="info-badge" v-if="MyNo != 6"></span>
                    <div class="dev-top">
                        <svg-icon icon-class="bell" class="tabIcon1" />
                        <span class="develop">{{ $t("studentWeb.public.develop") }}</span>
                    </div>
                </MenuItem> -->
                <!-- hiteach课堂记录 -->
                <!-- <MenuItem name="5" @click.native="noData" :title="$t('studentWeb.type.hiteach')">
                    <div class="dev-top">
                        <svg-icon icon-class="hiteach" class="tabIcon4" />
                        <span class="develop">{{ $t("studentWeb.public.develop") }}</span>
                    </div>
                </MenuItem> -->
                <!-- 自主学习 -->
                <!-- <MenuItem name="3" @click.native="noData" :title="$t('studentWeb.type.studyview')">
                    <div class="dev-top">
                        <svg-icon icon-class="note" class="tabIcon1" />
                        <span class="develop">{{ $t("studentWeb.public.develop") }}</span>
                    </div>
                </MenuItem> -->
                <MenuItem name="4" to="/studentWeb/eventView" :title="$t('studentWeb.type.activity')">
                    <svg-icon icon-class="selflearning" class="tabIcon2" />
                </MenuItem>
                <MenuItem name="1" to="/studentWeb/homeView" :title="$t('studentWeb.type.home')">
                    <svg-icon icon-class="home" class="tabIcon3" />
                </MenuItem>
            </Menu>
        </div>
        <!-- 小屏幕 -->
        <SmallNavBar :MyName="MyName" :MyNo="MyNo" :windowWidth="windowWidth" />
        <div></div>
        <!---->
        <!--內容區-->
        <div class="myContent">
            <router-view @onNavNo="getNavNo"
                         @onNavName="getNavName"
                         v-if="isRouterAlive">
            </router-view>
        </div>
    </div>
</template>

<script>
    import jwtDecode from 'jwt-decode'
    import SmallNavBar from "@/components/student-web/SmallNavBar";
    import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
    export default {
        name: "App",
        components: {
            SmallNavBar,
            jwtDecode,
            PersonalPhoto
        },
        provide() {
            return {
                reload: this.reload,
            };
        },
        data() {
            return {
                courseID: "",
                MyNo: "", //接收NavBar 選定的那一頁icon標示
                MyName: "", //接收NavBar 那一頁的名字
                isRouterAlive: true,
                windowWidth: window.innerWidth,
                windowHeight: window.innerHeight,
                isTyping: false,
                curRole: '',
                users: '',
                identity: localStorage.getItem('identity'),
                userInfo: {},
                isAddClass: false,
            };
        },
        computed: {
            getRoleName() {
                return val => {
                    // return val === 'student' ? '学生' : '教师'
                    return val === 'student' ? this.$t("studentWeb.home.student") : this.$t("studentWeb.home.teacher")
                }
            },
            //判断用户权限
            isTeacher() {
                let state = false
                if (this.users.roles.length) {
                    for (let item of this.users.roles) {
                        if (item == 'teacher' || item == 'admin') {
                            state = true
                        }
                    }
                }
                return state
            }
        },
        watch: {
            courseID: function (value) {
                if (value != "") {
                    this.isTyping = true
                } else if (value == "") {
                    this.isTyping = false
                }
            },
        },
        created() {
            this.getUsers();
        },
        mounted() {
            this.getStudentData()
            this.$nextTick(() => {
                window.addEventListener("resize", this.onResize);
            });
        },
        beforeDestroy() {
            window.removeEventListener("resize", this.onResize);
        },
        methods: {
            sentcourseID() {
                this.$store.commit('searchCourseIDforAdd', this.courseID.trim())
            },
            onResize() {
                this.windowWidth = window.innerWidth;
                this.windowHeight = window.innerHeight;
            },
            pagebgc() {
                if (this.MyNo == "1") {
                    return "#f0f0f0";
                }
            },
            clickSidebarToggle() {
                this.$store.commit("ToggleSidebar");
            },
            noData() {
                this.$Message.warning(this.$t("studentWeb.public.notice"))
            },
            reload() {
                this.isRouterAlive = false;
                this.$nextTick(() => (this.isRouterAlive = true));
            },
            getNavNo: function (MyNo) {
                this.MyNo = MyNo;
            },
            getNavName: function (MyName) {
                this.MyName = MyName;
                if(MyName == this.$t("studentWeb.courseList-title") || MyName == this.$t("studentWeb.homeView-title")) {
                    this.isAddClass = true
                } else {
                    this.isAddClass = false
                }
            },
            getUsers() {
                this.users = JSON.parse(decodeURIComponent(localStorage.userInfo, "utf-8"));
                let data = jwtDecode(localStorage.getItem('auth_token'))
                if (data.name !== "") {
                    this.$store.commit("setUserInfo", data)
                    localStorage.setItem("userInfo", JSON.stringify(data))
                }
                if (this.users.roles.length) {
                    this.curRole = localStorage.getItem('identity')
                }
            },
            getStudentData() {
                this.userInfo = this.$store.state.studentWeb.userInfo
            },
            onRoleSelect(val) {
                if (localStorage.getItem('identity') != val) {
                    this.curRole = val
                    let path = val === 'student' ? '/studentWeb' : '/home'
                    localStorage.setItem('identity', val)
                    this.$router.push({ path: path })
                }
            },
            onQuit() {
                this.$store.commit('user/resetSchoolProfile')
                this.$store.commit("ChangeItemName",{})
                this.$User.logout()
                this.$router.push({
                    path: '/login'
                })
            },
            onSet() {
                this.$router.push({
                    path: '/studentWeb/setting'
                })
            }
        },
    };
</script>

<style scoped>
    @import "~@/assets/student-web/component_styles/app-nav.css";
</style>

<style lang="less" scoped>
.dev-top{
    .develop{
        position: absolute;
        bottom: 10px;
        right: -11px;
        font-size: xx-small;
        color: #fff;
        padding: 2px 5px;
        z-index: 99;
        transform: scale(0.7) rotate(45deg);
    }

    &::after{
        position: absolute;
        content: " ";
        right: 0px;
        top: -4px;
        z-index: -1;
        width: 33px;
        height: 20px;
        background-color: #64AE16;
        transform: skewY(45deg);
    }
}

</style>