<template>
  <div id="global-header-body">
    <el-backtop/>
    <img id="global-header-logo" alt="err" src="@/assets/seec-logo--full.png" @click="toPortal">
    <el-menu :default-active="activeMenu" mode="horizontal" @select="handleMenuSelect">
      <el-menu-item index="1">
        首页
      </el-menu-item>
      <el-menu-item v-if="isStudent" index="2">
        任务
      </el-menu-item>
      <el-menu-item index="3">
        课程广场
      </el-menu-item>
      <el-menu-item index="4">
        项目广场
      </el-menu-item>
      <el-menu-item index="5">
        测试广场
      </el-menu-item>
      <el-menu-item index="6">
        个人中心
      </el-menu-item>
      <el-menu-item v-if="isTeacher" index="7">
        管理
      </el-menu-item>
    </el-menu>
    <div id="global-header-icon">
      <el-tooltip content="前往通知页" placement="bottom" effect="light" :show-after="1000">
        <div class="global-header-icon-content" @click="toMessage" style="position: relative">
          <sup v-if="unreadNum !== '0'" class="reminder">
            {{ unreadNum }}
          </sup>
          <svg height="32" viewBox="0 0 1024 1024" width="32" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M849.6 713.4c8.4-0.4 16.7 1.8 23.8 6.4-28.9-18.5-46.4-50.4-46.3-84.8V436c0-145.9-105.7-267.6-246.9-297.5v-7.2c0-37.1-30.1-67.1-67.2-67.1h-0.1c-37.1 0-67.3 30.1-67.3 67.2v7C304.3 168.4 198.7 290 198.7 436v199.1c0 35.7-18.6 66.9-46.4 84.8 7-4.6 15.4-6.9 23.8-6.4-24.7-0.9-45.5 18.4-46.4 43.1-0.9 24.7 18.4 45.5 43.1 46.4h676.6c24.7 0.1 44.8-20 44.9-44.7 0.1-24.8-19.9-44.9-44.7-44.9zM513 959.8c62 0 112.2-50.2 112.2-111.9H400.7c0 61.7 50.2 111.9 112.3 111.9z"
              fill="#E8AA5B"></path>
          </svg>
        </div>
      </el-tooltip>
      <el-tooltip content="前往个人中心页" placement="right" effect="light" :show-after="1000">
        <div class="global-header-icon-content" @click="toHome">
        <ElPopover trigger="hover">
          <template #reference>
            <div v-if="isLogin" id="info-circle">
              <span>
                {{ singleName }}
              </span>
            </div>
            <div v-else>
              <svg height="32" viewBox="0 0 1025 1024" width="32" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M511.999723 331.913794m-117.748854 0a117.748854 117.748854 0 1 0 235.497708 0 117.748854 117.748854 0 1 0-235.497708 0Z"
                  fill="#82BAD8"></path>
                <path
                  d="M511.999723 0.000554A511.999723 511.999723 0 1 0 1025.10767 512.000277 512.276779 512.276779 0 0 0 511.999723 0.000554zM792.380524 779.636496a24.935051 24.935051 0 0 1-24.935052-24.935052
                  255.445749 255.445749 0 0 0-510.614442 0 24.935051 24.935051 0 0 1-49.870103 0 304.76174 304.76174 0 0 1 205.29859-288.138372 167.896013 167.896013 0 1 1 199.480412 0 304.76174 304.76174 0 0 1 205.575646 288.138372 24.935051 24.935051 0 0 1-24.935051 24.935052z"
                  fill="#82BAD8"></path>
              </svg>
            </div>
          </template>
          <InfoCard/>
        </ElPopover>
      </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import InfoCard from "@/components/InfoCard";

export default {
  name: "GlobalHeader",
  components: { InfoCard },
  data() {
    return {
      menuIndex: [
        ["1", "Portal"],
        ["2", "Task"],
        ["3", "Course"],
        ["4", "Project"],
        ["5", "Test"],
        ["6", "Home"],
        ["7", "Manage"],
        ["8", "Problem"],
        ["9", "CourseDetail"],
        
      ]
    };
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin;
    },
    name() {
      return this.$store.state.user.name || "无名氏";
    },
    singleName() {
      return this.name.substring(0, 1);
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    activeMenu() {
      let out = "1";
      this.menuIndex.forEach(i => {
        if (i[1] === this.$route.name) {
          out = i[0];
        }
      });
      return out;
    },
    unReadMessages() {
      return this.$store.getters.unReadMessages;
    },
    unReadAnnouncements() {
      return this.$store.getters.unReadAnnouncements;
    },
    unreadNum() {
      return this.unReadAnnouncements.length + this.unReadMessages.length > 99 ? "99+" : this.unReadAnnouncements.length + this.unReadMessages.length + "";
    },
  },

  watch: {
    isLogin(newData) {
      if (newData) {
        this.$store.dispatch("fetchMessages", this);
      }
    },
    $route() {
      if (this.isLogin) {
        this.$store.dispatch("fetchMessages", this);
      }
    }
  },

  created() {
    if (this.isLogin) {
      this.$store.dispatch("fetchMessages", this);
    }
  },

  methods: {
    toPortal() {
      this.$router.push("/portal");
    },
    toHome() {
      this.$router.push("/home");
    },
    toMessage() {
      this.$router.push("/message");
    },
    handleMenuSelect(key) {
      let target = "/portal";
      this.menuIndex.forEach(i => {
        if (i[0] === key) {
          target = i[1];
        }
      });
      this.$router.push({ name: target });
    },
  },
};
</script>

<style scoped>
#global-header-body {
  width: calc(100% - 2px);
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

#global-header-logo {
  height: 32px;
  margin-left: 160px;
  cursor: pointer;
}

:deep(.el-menu--horizontal) {
  height: 48px;
}

:deep(.el-menu--horizontal>.el-submenu .el-submenu__title) {
  height: 48px;
  position: relative;
  bottom: 5px;
}

:deep(.el-menu--horizontal>.el-menu-item) {
  height: 48px;
  position: relative;
  bottom: 5px;
}

#global-header-icon {
  width: 120px;
  margin-right: 160px;
  display: flex;
  justify-content: space-around;
}

.global-header-icon-content {
  cursor: pointer;
}

#info-circle {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #619dc9;
}

#info-circle span {
  color: white;
  font-weight: bold;
}

.reminder {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-25%) translateX(35%);
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
</style>
