<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">
                            <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>
                <!--通知彈窗區域-->
                <!-- <span class="dropdown"> -->
                <MenuItem name="6" @click.native="noData" title="通知">
                    <span class="info-badge" v-if="MyNo != 6"></span>
                    <svg-icon icon-class="bell" class="tabIcon1" />
                </MenuItem>
                <!-- </span> -->
                <!-- hiteach课堂记录 -->
                <MenuItem name="5" @click.native="noData" title="hiteach">
                    <svg-icon icon-class="hiteach" class="tabIcon4" />
                </MenuItem>
                <!-- 自主学习 -->
                <MenuItem name="3" @click.native="noData" title="自主学习">
                    <svg-icon icon-class="note" class="tabIcon1" />
                </MenuItem>
                <MenuItem name="4" to="/studentWeb/eventView" title="活动">
                    <svg-icon icon-class="selflearning" class="tabIcon2" />
                </MenuItem>
                <MenuItem name="1" to="/studentWeb/homeView" title="首页">
                    <svg-icon icon-class="home" class="tabIcon3" />
                </MenuItem>
                <!-- 加入课程 -->
                <button class="addcoursebtn"
                        @click='sentcourseID()'
                        v-if="MyName == this.$t('studentWeb.courseList-title')">
                    {{$t("studentWeb.home.joinClass")}}
                </button>
                <input maxlength="6"
                       class="addcourseinput"
                       v-model="courseID"
                       placeholder="輸入課程代碼.... ex:T10000"
                       value="T"
                       v-if="MyName == this.$t('studentWeb.courseList-title')" />
                <div class="clearinput">
                    <Icon @click="clearInput()" v-if="isTyping == true" type="md-close" />
                </div>
                <!-- 加入课程 -->
            </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,
                bgc: "red",
                active: false,
                mockdata: "",
                isClickInfoPop: false,
                isTyping: false,
                curRole: '',
                users: '',
                identity: localStorage.getItem('identity'),
                userInfo: {}
            };
        },
        computed: {
            getRoleName() {
                return val => {
                    return val === 'student' ? '学生' : '教师'
                }
            },
            //判断用户权限
            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())
            },
            clearInput() {
                this.courseID = "";
            },
            onResize() {
                this.windowWidth = window.innerWidth;
                this.windowHeight = window.innerHeight;
            },
            pagebgc() {
                if (this.MyNo == "1") {
                    return "#f0f0f0";
                }
            },
            mouseOver: function () {
                this.active = !this.active;
            },
            clickSidebarToggle() {
                this.$store.commit("ToggleSidebar");
            },
            changeBgc() {
                if (this.MyNo == "4") {
                    return true;
                }
            },
            noData() {
                this.$Message.warning('此功能暂未开放！')
            },
            reload() {
                this.isRouterAlive = false;
                this.$nextTick(() => (this.isRouterAlive = true));
            },

            getNavNo: function (MyNo) {
                this.MyNo = MyNo;
            },
            getNavName: function (MyName) {
                this.MyName = MyName;
            },
            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)
                }
                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.$User.logout()
                this.$router.push({
                    path: '/login'
                })
            },
        },
    };
</script>

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