<template>
  <div id="app">
    <div class="head">
      <el-menu class="container" :default-active="$route.path" mode="horizontal" router>
        <el-menu-item index="/logo" disabled id="logo">
          <img
            src="@/assets/logo.png"
            style="height:45px; width:45px"
            alt="在线考试系统"
          />
        </el-menu-item>
        <el-menu-item index="/exam/center">
          <i class="el-icon-copy-document"></i>考试中心
        </el-menu-item>
        <el-menu-item index="/exam/history">
          <i class="el-icon-document-copy"></i>历史考试
        </el-menu-item>
        <el-menu-item index="/login" style="float:right;" v-if="$store.state.userInfo.stuStatus == undefined">登录/注册</el-menu-item>
        <el-menu-item
          style="float:right;"
          index="/login"
          v-if="$store.state.userInfo.stuStatus == 1"
          @click="logout"
        >退出登录</el-menu-item>
        <el-menu-item
          disabled
          style="float:right; color:#666;font-weight: bold"
          index
          v-if="$store.state.userInfo.stuStatus == 1"
        >您好：{{$store.state.userInfo.stuName}}</el-menu-item>
      </el-menu>
    </div>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{}
  },
  created(){
    //刷新页面时从sessionStorage中取出userInfo
    //如果sessionStorage中有userInfo则取出
    if (sessionStorage.getItem("userInfo")) {
      var user = JSON.parse(sessionStorage.getItem("userInfo"));
      // 将user保存到vuex的state
      this.$store.dispatch('login', user);
    }
  },
  methods: {
    //退出登录
    logout() {
      this.$http.get("student/studentLoginOut")
        .then(response => {
          const res = response.data;
          this.$store.dispatch('logout');
          this.$message.success(res.msg);
        }) 
    },
  },
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.head {
  border-bottom: 1px #ccc solid;
  box-shadow: 0px 0px 0px #ccc !important;
  background-color: #fff;
  width: 100%;
}

.container {
  max-width: 1250px;
  min-width: 800px;

  margin: 0 auto;
}

.main {
  /* border: solid red 1px; */
}

.footer {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  padding: 8px 0px 20px 0px;
}

.el-menu-item.is-disabled {
  opacity: 1;
}

#logo {
  cursor: pointer;
}
</style>
