<template>
  <div class="mark-home home">
    <view-header key="1" v-if="IS_ADMIN">
      <div class="grading-subnav" slot="navSub">
        <div class="grading-title">
          <h1>{{ curSubject.name }}</h1>
          <span>当前阶段：打分阶段</span>
        </div>
        <div class="home-navs">
          <ul>
            <li
              :class="{ act: curNav.name === nav.name }"
              v-for="(nav, index) in navs"
              :key="index"
              @click="switchNav(nav)"
            >
              <i
                :class="[
                  'icon',
                  curNav.name === nav.name ? `${nav.icon}-act` : nav.icon
                ]"
                v-if="nav.icon"
              ></i>
              <span class="nav-item-cont">{{ nav.title }}</span>
            </li>
          </ul>
        </div>
      </div>
    </view-header>
    <view-header key="2" v-else>
      <div class="home-navs" slot="navTop">
        <ul>
          <li
            :class="{ act: curNav.name === nav.name }"
            v-for="(nav, index) in navs"
            :key="index"
            @click="switchNav(nav)"
          >
            <i
              :class="[
                'icon',
                curNav.name === nav.name ? `${nav.icon}-act` : nav.icon
              ]"
              v-if="nav.icon"
            ></i>
            <span class="nav-item-cont">{{ nav.title }}</span>
          </li>
        </ul>
      </div>
    </view-header>

    <div class="home-body">
      <div class="home-main">
        <router-view />

        <view-footer></view-footer>
      </div>
    </div>
  </div>
</template>

<script>
import { subjectDetail } from "@/api";
import { mark, main } from "@/constants/authority";
import menuMixins from "@/components/homeMenuMixins";
import { SUBJECT_STAGE } from "@/constants/enumerate";
import { deepCopy } from "@/plugins/utils";

export default {
  name: "mark-home",
  mixins: [menuMixins],
  data() {
    return {
      subjectId: this.$route.params.subjectId,
      navs: [],
      curNav: {},
      curSubject: { name: "" },
      SUBJECT_STAGE,
      IS_ADMIN: true
    };
  },
  watch: {
    $route: {
      handler(val) {
        this.actSubNav();
      }
    }
  },
  mounted() {
    const curUserRoleType = this.$ls.get("user", { role: "" }).role;
    this.IS_ADMIN = curUserRoleType === "ADMIN";
    this.initData();
  },
  methods: {
    async initData() {
      this.curSubject = await subjectDetail(this.subjectId);
      if (this.curSubject.stage === "LEVEL") {
        this.$router.replace({
          name: "Grading",
          params: {
            workId: this.subjectId.split("-")[0],
            subjectId: this.subjectId
          }
        });
        return;
      }
      this.buildNavs();
      this.actSubNav();
    },
    buildNavs() {
      this.navs = deepCopy(mark);
      if (this.IS_ADMIN) {
        this.navs.pop();
        this.navs = [...main.slice(0, 2), ...this.navs];
      } else {
        this.navs.splice(1, 1);
      }
    },
    actSubNav() {
      const router = this.$route.matched.filter(
        item => item.name !== "Mark"
      )[0];
      this.actCurNav(router);
    }
  }
};
</script>
