<template>
  <div class="personal_center">
    <!-- 个人中心 -->
    <Top :isPersonal="isPersonal"></Top>
    <!-- 主体内容 -->
    <div class="personal_main">
      <div class="personal_box clearfix">
        <!-- 左侧 -->
        <div class="personal_l clearfix">
          <!-- 头像等 -->
          <div class="personal_header layout justify_center flex_diection align_center">
            <!-- 头像 -->
            <div class="personal_img">
              <img :src="img" alt />
            </div>
            <div
              class="personal_name"
            >{{name}}
            {{groupId == 3?"(班主任)":groupId == 2?"(家长)":group.length>0?"("+group+")":""}}
            </div>
            <div>{{schoolName}}</div>
          </div>
          <!-- 学生端 家长端 -->
          <div class="personal_msg" v-show="groupId == 1 || groupId == 2">
            <ul class="layout justify flex_diection personal_ul">
              <li
                class="personal_li"
                v-for="item in msgList"
                :key="item.index"
                :class="{blue_personal:isBlue == item.index}"
                @click="change(item.index)"
              >
                <img :src="isBlue == item.index?item.img2:item.img" alt class="personal_pic" />
                {{item.content}}
              </li>
            </ul>
          </div>
          <!-- 教师端 -->
          <div class="personal_msg" v-show="groupId == 3">
            <ul class="layout justify flex_diection personal_ul">
              <li
                class="personal_li"
                v-for="item in msgList2"
                :key="item.index1"
                :class="{blue_personal:isBlue == item.index1}"
                @click="change(item.index1)"
              >
                <img :src="isBlue == item.index1?item.img2:item.img" alt class="personal_pic" />
                {{item.content}}
              </li>
            </ul>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="personal_r clearfix">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <Bottom2></Bottom2>
  </div>
</template>
<script>
import Top from "../../common/Top";
import Bottom2 from "../../common/Bottom2";
import { post } from "@/api/http";
import { Notification } from "element-ui";
export default {
  data() {
    return {
      // 身份判断
      groupId: "",
      isPersonal: 1,
      img: "",
      name: "",
      schoolName: "",
      group: "",
      classical: "",
      msgList2: [
        {
          index1: 11,
          img: require("../../../assets/img/27.png"),
          img2: require("../../../assets/img/40.png"),
          content: "个人信息"
        },
        {
          index1: 12,
          img: require("../../../assets/img/39.png"),
          img2: require("../../../assets/img/28.png"),
          content: "测评管理"
        },
        {
          index1: 17,
          img: require("../../../assets/img/34.png"),
          img2: require("../../../assets/img/33.png"),
          content: "我的收藏"
        }
      ],
      msgList: [
        {
          index: 1,
          img: require("../../../assets/img/27.png"),
          img2: require("../../../assets/img/40.png"),
          content: "个人信息"
        },
        {
          index: 2,
          img: require("../../../assets/img/39.png"),
          img2: require("../../../assets/img/28.png"),
          content: "测评管理"
        },
        {
          index: 3,
          img: require("../../../assets/img/38.png"),
          img2: require("../../../assets/img/29.png"),
          content: "选课管理"
        },
        {
          index: 4,
          img: require("../../../assets/img/37.png"),
          img2: require("../../../assets/img/30.png"),
          content: "活动管理"
        },
        {
          index: 5,
          img: require("../../../assets/img/36.png"),
          img2: require("../../../assets/img/31.png"),
          content: "学期总结"
        },
        {
          index: 6,
          img: require("../../../assets/img/35.png"),
          img2: require("../../../assets/img/32.png"),
          content: "生涯报告"
        },
        {
          index: 7,
          img: require("../../../assets/img/34.png"),
          img2: require("../../../assets/img/33.png"),
          content: "我的收藏"
        }
      ],
      isBlue: 1
    };
  },
  methods: {
    // 个人信息
    inform() {
      let url = "";
      if (this.groupId == 1) {
        url = "/api/student/inform";
      } else if (this.groupId == 2) {
        url = "/api/parents/inform";
      } else if (this.groupId == 3) {
        url = "/api/teacher/inform";
      }
      post(url).then(res => {
        this.group = res.nianji;
        this.name = res.nickname;
        this.schoolName = res.school_name;
      });
    },
    change(index) {
      this.isBlue = index;
      localStorage.setItem("personalIndex", index);
      switch (index) {
        case 1:
          this.$router.push({ path: "/PersonalMsg" });
          break;
        case 2:
          this.$router.push({ path: "/EvaluteManage" });
          break;
        case 3:
          this.$router.push({ path: "/CourseSelect" });
          break;
        case 4:
          this.$router.push({ path: "/ActivityManagement" });
          break;
        case 5:
          this.$router.push({ path: "/TermSummary" });
          break;
        case 6:
          this.$router.push({ path: "/CareeReport" });
          break;
        case 7:
          this.$router.push({ path: "/Collection" });
          break;
        case 11:
          this.$router.push({ path: "/PersonalMsg" });
          break;
        case 12:
          this.$router.push({ path: "/TeachEvaDet" });
          break;
        case 17:
          this.$router.push({ path: "/Collection" });
          break;
      }
    }
  },
  components: {
    Top,
    Bottom2
  },
  mounted() {
    this.inform();
  },
  created() {
    this.img = localStorage.getItem("headImg");
    this.groupId = localStorage.getItem("groupId");
    if (this.groupId == 3) {
      this.isBlue = 11;
    } else {
      // this.isBlue = 1;
      if (localStorage.getItem("personalIndex")) {
        this.isBlue = localStorage.getItem("personalIndex");
      } else {
        this.isBlue = 1;
      }
    }
  },
  destroyed(){
    localStorage.removeItem("personalIndex")
  },
  watch: {
    $route(to, form) {
      if (to.name == "PersonalMsg") {
        if (this.groupId == 3) {
          this.isBlue = 11;
        } else {
          this.isBlue = 1;
        }
      }
    }
  }
};
</script>
<style scoped>
/* 个人中心主体内容 */
.personal_main {
  width: 100%;
  background-color: #f2f5fa;
}
.personal_box {
  width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
}
/* 左侧 */
.personal_l {
  width: 180px;
  height: 509px;

  margin-bottom: 368px;
  float: left;
}
/* 头像 */
.personal_header {
  height: 187px;
  border-bottom: 1px solid #eee;
  color: #8c9198;
  font-size: 14px;
  line-height: 19px;
  background: #fff;
}
.personal_img {
  width: 84px;
  height: 84px;
}
.personal_img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/* 姓名 */
.personal_name {
  margin: 12px 0 4px;
}
.personal_msg {
  background: #fff;
}
.personal_li {
  height: 44px;
  line-height: 44px;
  text-align: left;
  font-size: 14px;
  color: #8c9198;
}
.personal_pic {
  margin: -3px 13px 0 23px;
  width: 14px;
  height: 15px;
}
.personal_li:hover {
  background-color: #eee;
}
.blue_personal {
  color: #409eff;
}
/* 右侧 */
.personal_r {
  width: 996px;
  float: right;
}
</style>