<template>
  <!-- 头部 -->
  <div class="wrap">
    <div class="main layout justify align_center">
      <!-- logo -->
      <div class="logo">
        <img src="@/assets/img/3.png" alt />
      </div>
      <!-- 导航栏 -->
      <div class="nav">
        <ul class="nav_ul layout align_center justify" v-show="groupId == 1 || groupId == 2">
          <li class="nav_ul_li" :class="{nav_border:num == 0}" @click="change(0)">首页</li>
          <li class="nav_ul_li" :class="{nav_border:num == 1}" @click="change(1)">生涯测评</li>
          <li
            class="nav_ul_li"
            :class="{nav_border:num == 2}"
            @click="change(2)"
            v-show="groupNumber == 1||groupNumber == ''"
          >选课建议</li>
          <li
            class="nav_ul_li"
            :class="{nav_border:num == 3}"
            @click="change(3)"
            @mouseenter="showWis()"
            @mouseleave="hiddenWis()"
          >
            智慧选校
            <div class="nav_icon icon_block"></div>
            <ol class="wisdom" v-show="isWis">
              <li
                v-for="(item,index) in wisdomList"
                :key="index"
                :class="{wisdom_choice:isWisdom == index}"
                @click="toWisdom(index)"
              >{{item}}</li>
            </ol>
          </li>
          <li
            class="nav_ul_li"
            :class="{nav_border:num == 4}"
            @click="change(4)"
            @mouseenter="showStu()"
            @mouseleave="hiddenStu()"
          >
            生涯学习
            <div class="nav_icon icon_block"></div>
            <ol class="study" v-show="isStu">
              <li
                v-for="(item,index) in studyList"
                :class="{wisdom_choice:isCareer == index || isCareerTop == index}"
                :key="index"
                @click="toCareer(index)"
              >{{item}}</li>
            </ol>
          </li>
        </ul>
        <ul class="nav_ul layout align_center justify" v-show="groupId == 3">
          <li class="nav_ul_li" :class="{nav_border:num == 0}" @click="change(0)">首页</li>
          <li class="nav_ul_li" :class="{nav_border:num == 1}" @click="change(1)">学生测评</li>
          <li class="nav_ul_li" :class="{nav_border:num == 2}" @click="change(2)">学生列表</li>
          <li
            class="nav_ul_li"
            :class="{nav_border:num == 3}"
            @click="change(3)"
            @mouseenter="showWis()"
            @mouseleave="hiddenWis()"
          >
            智慧选校
            <div class="nav_icon icon_block"></div>
            <ol class="wisdom" v-show="isWis">
              <li
                v-for="(item,index) in wisdomList"
                :class="{wisdom_choice:isWisdom == index}"
                :key="index"
                @click="toWisdom(index)"
              >{{item}}</li>
            </ol>
          </li>
          <li
            class="nav_ul_li"
            :class="{nav_border:num == 4}"
            @click="change(4)"
            @mouseenter="showStu()"
            @mouseleave="hiddenStu()"
          >
            生涯学习
            <div class="nav_icon icon_block"></div>
            <ol class="study" v-show="isStu">
              <li
                v-for="(item,index) in studyList"
                :class="{wisdom_choice:isCareer == index || isCareerTop == index}"
                :key="index"
                @click="toCareer(index)"
              >{{item}}</li>
            </ol>
          </li>
        </ul>
      </div>
      <!-- 未登录 -->
      <div class="name layout align_center justify" v-show="login_or" @click="outLogin">
        <div class="pic_box">
          <img src="../../assets/img/106.png" alt />
        </div>
        <p class="name_status">未登录</p>
      </div>
      <!-- 登录 -->
      <div class="name layout align_center justify" v-show="!login_or">
        <div class="pic_box">
          <img :src="headImg" alt />
        </div>
        <p class="name_status">{{nickName}}</p>
        <p class="name_status personal" :class="{personal_color:isBlue == 1}" @click="Personal">个人中心</p>
        <p class="sign_out" @click="outLogin">退出</p>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  props: ["active", "isPersonal","isCareerTop"],
  data() {
    return {
      // 是否登陆
      login_or: true,
      isWis: false,
      isStu: false,
      num: -1,
      wisdomList: ["大学专业", "大学院校", "职业大全"],
      studyList: ["推荐书籍", "生涯案例", "生涯故事", "视频资源"],
      nickName: "",
      headImg: "",
      isBlue: 0,
      // 身份判断
      groupId: "",
      groupNumber: "",
      isWisdom: -1,
      isCareer: -1
    };
  },
  methods: {
    // 跳转 改变颜色
    change: function(index) {
      // localStorage.removeItem("wisdomIndex");
      // localStorage.removeItem("careerIndex");
      if (this.groupId == 3) {
        // 教师端
        if (localStorage.getItem("userName")) {
          this.num = index;
          switch (index) {
            case 0:
              this.$router.push({ path: "/Index", query: { active: 0 } });
              break;
            case 1:
              this.$router.push({ path: "/StudentEvalute" });
              break;
            case 2:
              this.$router.push({ path: "/StudentList" });
              break;
          }
        }
      } else {
        if (localStorage.getItem("userName")) {
          this.num = index;
          switch (index) {
            case 0:
              this.$router.push({ path: "/Index", query: { active: 0 } });
              break;
            case 1:
              this.$router.push({ path: "/Evalution" });
              break;
            case 2:
              this.$router.push({ path: "/CourseSuggest" });
              break;
          }
        }
      }
    },
    // 智慧选校下属跳转
    toWisdom(index) {
      this.isWisdom = index;
      localStorage.setItem("wisdomIndex",index);
      switch (index) {
        case 0:
          this.$router.push({ path: "/Major", query: { isNav: 0 } });
          break;
        case 1:
          this.$router.push({ path: "/University", query: { isNav: 1 } });
          break;
        case 2:
          this.$router.push({ path: "/Profession", query: { isNav: 2 } });
          break;
      }
    },
    // 生涯学习下属
    toCareer(index) {
      this.isCareer = index;
      this.isCareerTop = -1;
      this.$store.commit("changeStatus",this.isCareer)
      localStorage.setItem("careerIndex",index);
      switch (index) {
        case 0:
          this.$router.push({ path: "/CareerLearn", query: { isNav: 0 } });
          break;
        case 1:
          this.$router.push({ path: "/CareerLearn", query: { isNav: 1 } });
          break;
        case 2:
          this.$router.push({ path: "/CareerLearn", query: { isNav: 2 } });
          break;
        case 3:
          this.$router.push({ path: "/VideoSource", query: { isNav: 0 } });
          break;
      }
    },
    showWis: function() {
      this.isWis = true;
    },
    hiddenWis: function() {
      this.isWis = false;
    },
    showStu: function() {
      this.isStu = true;
    },
    hiddenStu: function() {
      this.isStu = false;
    },
    // 个人中心
    Personal: function() {
      this.isBlue = 1;
      this.num = -1;
      this.$router.push({ path: "/personal" });
    },
    // 退出
    outLogin: function() {
      post("/api/common/logout").then(res => {
        let test = localStorage.getItem("schoolSymbol");
        localStorage.clear();
        this.$router.push({ path: "/login/" + test });
      });
    }
  },

  mounted() {
    // this.isCareer = localStorage.getItem("careerIndex");
    this.isWisdom = localStorage.getItem("wisdomIndex");
    if (this.active >= 0) {
      this.num = this.active;
    }
    this.groupId = localStorage.getItem("groupId");
  },
  created() {
    this.groupNumber = localStorage.getItem("groupNumber");
    this.num = this.$route.query.active;
    this.nickName = localStorage.getItem("nickName");
    this.headImg = localStorage.getItem("headImg");
    if (localStorage.getItem("userId")) {
      this.login_or = false;
    }
    this.isBlue = this.isPersonal;
    if(this.$route.query.isCareerTop){
      this.isCareerTop = this.$route.query.isCareerTop;
      this.isCareer = -1;
    }else{
      this.isCareer = this.$store.state.isCareer ;
    }
    //  console.log(this.isCareerTop,"首页")
  },
  watch:{
     isCareer(newV,oldV){
      //  console.log(newV,oldV,"首页")
       if(newV == 3){
         this.isCareer = newV
       }else{
         this.isCareer = -1
       }
       
     }
   },
};
</script>
<style scoped>
.wrap {
  width: 100%;
  background-color: #fff;
}
.main {
  width: 1200px;
  height: 100px;

  margin: 0 auto;
}
/* logo */
.logo {
  width: 173px;
  height: 58px;
}
.logo img {
  width: 100%;
  height: 100%;
}
/* 导航栏 */
.nav_ul {
  font-size: 18px;
  width: 687px;
  height: 100px;
  color: #06121e;
}
.nav_ul_li {
  width: 120px;
  height: 98px;
  border-bottom: 2px solid #fff;
  line-height: 100px;
  position: relative;
}
.nav_border {
  border-bottom: 2px solid #409eff !important;
  color: #409eff;
}
.position_li {
  position: relative;
}
/* 智慧选校 */
.wisdom {
  width: 120px;
  height: 161px;
  z-index: 9999;
  background: rgba(255, 255, 255, 1);
  position: relative;
}
/* 生涯学习 */
.study {
  width: 120px;
  height: 214px;
  background: rgba(255, 255, 255, 1);
  z-index: 9999;
  border-radius: 0px 0px 3px 3px;
  position: relative;
}

.wisdom li,
.study li {
  font-size: 18px;
  color: #8c9198;
  line-height: 50px;
  z-index: 888;
}
.wisdom_choice {
  background-color: #eeeeee;
}
/* 向下箭头 */
.nav_icon {
  position: absolute;
  top: 43px;
  right: 0;
  width: 15px;
  height: 15px;
  background-image: url("../../assets/img/105.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  margin-left: 10px;
  display: none;
}
.icon_block {
  display: block;
}
/* 登录人 */
.pic_box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.pic_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.name_status {
  font-size: 14px;
  color: #5b5e63;
  margin-left: 10px;
  margin-right: 14px;
}
.personal {
  margin-left: 0;
}
.personal_color {
  color: #409eff;
}
/* 退出 */
.sign_out {
  font-size: 14px;
  color: #bdc4ce;
}
</style>