<template>
  <div class="nav-bar">
    <div class="nav-bar-logo">
      <img :src="schoolLogo" />
      <!-- <span class="site-name">ADMIN LITE</span> -->
    </div>
    <div class="nav-bar-menu menu-list">
      <ul>
        <li
          v-for="(nav, index) in navs"
          :key="index"
          @click="toPage(nav)"
          :class="{ 'menu-item-act': curNav === nav.name }"
        >
          <div class="menu-item">
            <i
              :class="[
                'icon',
                curNav === nav.name ? `${nav.icon}-act` : `${nav.icon}`,
              ]"
            ></i>
            <span>{{ nav.title }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="nav-bar-user menu-list">
      <ul>
        <li>
          <div class="menu-item">
            <i class="icon icon-user"></i>
            <span v-if="username">{{ username }}，欢迎你</span>
          </div>
        </li>
        <li v-if="showFullScreenBtn">
          <div class="menu-item" @click="toFullscreen">
            <i class="icon icon-scan"></i>
            <span>全屏</span>
          </div>
        </li>
        <li>
          <div class="menu-item" @click="toLogout">
            <i class="icon icon-logout"></i>
            <span>退出登录</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    navs: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    schoolLogo() {
      return this.$store.state.schoolLogo;
    },
    username() {
      return this.$store.state.user.name;
    },
    isFullScreen() {
      return this.$store.state.isFullScreen;
    },
    showFullScreenBtn() {
      return this.$route.name === "ExamInvigilation";
    },
  },
  data() {
    return {
      curNav: "",
      isFullscreen: false,
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.actCurNav();
      },
    },
  },
  mounted() {
    this.registFullscreenChange();
    this.$store.commit("setIsFullScreen", this.checkDocIsFullscreen());
  },
  methods: {
    actCurNav() {
      const curRouterName = this.$route.meta.relate || this.$route.name;
      this.curNav = null;
      this.navs.forEach((nav) => {
        if (this.curNav) return;
        let curRouter = null;
        nav.children.forEach((item) => {
          item.children.forEach((elem) => {
            if (elem.name === curRouterName) curRouter = elem;
          });
        });

        if (curRouter) {
          this.curNav = nav.name;
          this.$emit("on-nav-change", nav.name);
        }
      });
    },
    toPage(nav) {
      this.$router.push({ name: nav.redirect });
    },
    async toLogout() {
      const result = await this.$confirm("确定要退出登录吗？", "退出确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        iconClass: "el-icon-question",
        customClass: "el-message-box__warning",
      }).catch(() => {});

      if (!result) return;

      this.$store.commit("invigilation/setSelectedExamId", null);
      this.logout("?cause=点击退出");
    },
    checkDocIsFullscreen() {
      return (
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullscreenElement ||
        document.webkitFullscreenElement
      );
    },
    registFullscreenChange() {
      document.documentElement.onfullscreenchange = () => {
        const isFullScreen = this.checkDocIsFullscreen();
        this.$store.commit("setIsFullScreen", isFullScreen);
        if (isFullScreen) {
          document.body.className += "app-fullscreen";
        } else {
          document.body.className = document.body.className.replace(
            "app-fullscreen",
            ""
          );
        }
      };

      document.addEventListener("keydown", (e) => {
        if (
          e.keyCode === 122 ||
          (e.keyCode === 27 && this.checkDocIsFullscreen())
        ) {
          e.preventDefault();
          this.toFullscreen();
        }
      });
    },
    async toFullscreen() {
      const fullscreenEnabled =
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled;
      if (!fullscreenEnabled) {
        this.$message.error("当前浏览器不支持全屏！");
        return;
      }
      const de = document.documentElement;
      const requestFullscreen =
        de.requestFullscreen ||
        de.mozRequestFullScreen ||
        de.webkitRequestFullscreen;
      const exitFullscreen =
        document.exitFullscreen ||
        document.mozCancelFullScreen ||
        document.webkitCancelFullScreen;

      if (this.isFullscreen) {
        await exitFullscreen.call(document).catch(() => {});
      } else {
        await requestFullscreen.call(de).catch(() => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1001;
  overflow: hidden;
  background: #fff;

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: auto;
    border-bottom: 1px solid #eee;
  }

  &-logo {
    width: 220px;
    float: left;
    padding: 10px 30px;
    font-size: 20px;
    line-height: 40px;
    > img {
      display: block;
      max-width: 160px;
      height: 40px;
    }
  }
  &-menu {
    float: left;
  }

  .menu-list {
    ul {
      padding: 0;
    }
    li {
      display: inline-block;
      vertical-align: top;
      padding: 20px 15px;
      line-height: 20px;
      font-size: 14px;
      position: relative;
      text-align: center;
      font-weight: 600;
      color: #626a82;
      cursor: pointer;

      &:hover,
      &.menu-item-act {
        color: #1886fe;
      }

      span {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
      }
    }
  }

  &-user {
    float: right;
    &.menu-list li {
      padding: 20px 10px;
    }
  }
}
</style>
