<template>
  <!-- 一级专业详情 -->
  <div class="major_detail">
    <div class="major_det_box">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item @click.native="toMajorIndex">首页</el-breadcrumb-item>
          <el-breadcrumb-item class="last_brand">学科介绍</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 信息 -->
      <div class="major_det_msg clearfix">
        <!-- 左侧专业详情 -->
        <div class="major_det_l">
          <div class="major_l_box layout align_left flex_diection">
            <h1>{{majorName}}</h1>
            <!-- 学科介绍 -->
            <div class="subject_induction">{{summary}}</div>
            <!-- 相近部门 -->
            <div class="layout align_left flex_diection">
              <h2>相近相关部门</h2>
              <div class="layout flex_row similar_box">
                <div
                  class="similar"
                  v-for="item in similarList"
                  :key="item.id"
                  @click="getMajorDetail(item.id)"
                >{{item.name}}</div>
              </div>
            </div>
            <!-- 兴趣类型 -->
            <div class="layout align_left flex_diection">
              <h2>兴趣类型</h2>
              <ul class="similar_box type_box" >
                <li class="type_li" v-for="(item,index) in typeList" :key="index">{{item}}</li>
              </ul>
            </div>
            <!-- 需要能力 -->
            <div class="layout align_left flex_diection">
              <h2>需要能力</h2>
              <ul class="similar_box type_box">
                <li class="type_li" v-for="(item,index) in abilityList" :key="index">{{item}}</li>
              </ul>
            </div>
            <!-- 包含专业类 -->
            <div class="layout align_left flex_diection">
              <h2>本学门包含的专业类（{{includeList.length}}）</h2>
              <div class="clearfix similar_box type_box">
                <div
                  class="include_category layout justify align_center"
                  v-for="item in includeList"
                  :key="item.id"
                  @click="secondMajor(item.id)"
                >
                  <div class="include_name">{{item.name}}</div>
                  <div class="cate_num">
                    <div>专业数</div>
                    <div>{{item.count}}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 生涯发展 -->
            <div class="layout align_left flex_diection">
              <h2>生涯发展</h2>
              <div class="clearfix similar_box">
                <div class="similar" v-for="item in developList" :key="item.id" @click="occupation(item)">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧跳转链接 -->
        <div class="major_link_r clearfix">
          <div class="link_img" @click="classify()">
            <img src="@/assets/img/major2.png" alt />
          </div>
          <!-- 热门专业 -->
          <div class="link_hot_major clearfix" v-show="botList.length>0">
            <!-- 上层标题 -->
            <div class="hot_major_top layout align_center">
              <h2 class="white_h2">热门专业</h2>
            </div>
            <!-- 下层内容 -->
            <div class="hot_major_bot clearfix">
              <div
                class="bot_content"
                v-for="item in botList"
                :key="item.id"
                @click="hotMajor(item)"
              >{{item.name}}</div>
            </div>
          </div>
          <!-- 重点学科 -->
          <div class="link_img" @click="discipline()">
            <img src="@/assets/img/major3.png" alt />
          </div>
          <!-- 双一流建设学科名单 -->
          <div class="link_img" @click="doubleFirst()">
            <img src="@/assets/img/major4.png" alt />
          </div>
          <!-- 高校学科评估结果 -->
          <div class="link_img" @click="assessResult()">
            <img src="@/assets/img/major5.png" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      id: "",
      //   专业名称
      majorName: "",
      // 概述
      summary: "",
      //   相近部门
      similarList: [],
      //   兴趣类型
      typeList: [],
      // 需要能力
      abilityList: [],
      // 包含的类别
      includeList: [],
      // 生涯发展
      developList: [],
      //   热门专业
      botList: []
    };
  },
  methods: {
    // 专业首页
    toMajorIndex(){
      this.$router.push({path:"/Major"})
    },
    // 职业详情
    occupation(item){
      // console.log(item.id)
      this.$router.push({path:'/Occupation',query:{id:item.id}})
    },
    // 热门专业
    hotMajor(item) {
      this.$router.push({ path: "/HotMajor", query: { id: item.id } });
    },
    // 教育部专业分类
    classify() {
      this.$router.push({ path: "/Major" });
    },
    // 重点学科
    discipline() {
      this.$router.push({ path: "/KeyDiscipline" });
    },
    // 双一流学科
    doubleFirst() {
      this.$router.push({ path: "/DoubleFirst" });
    },
    // 高校学科评估结果
    assessResult() {
      this.$router.push({ path: "/AssessResult" });
    },
    //   一级专业详情
    getMajorDetail(itemId) {
      if (itemId) {
        this.id = itemId;
      }
      let url = "/api/major/getMajorDetail/";
      let params = {
        id: this.id 
      };
      post(url, params).then(res => {
        // 专业名称
        this.majorName = res.major.name;
        // 概述
        this.summary = res.major.summary;
        // 相近部门
        this.similarList = res.major.like;
        // 兴趣类型
        this.typeList = res.major.interest_sort;
        // 需要的能力
        this.abilityList = res.major.ability;
        // 包含的类别
        this.includeList = res.major.child;
        // 生涯发展
        this.developList = res.major.career;
      });
    },
    // 热门专业
    getHotList() {
      let url = "/api/major/getHotList/";
      post(url).then(res => {
        this.botList = res.hot_list;
      });
    },
    // 二级专业详情
    secondMajor(secondId) {
      this.$router.push({
        path: "/SecondMajorDetail",
        query: { secondId: secondId }
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getMajorDetail();
    this.getHotList();
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.getMajorDetail();
    }
  },
};
</script>
<style scoped>
@import "../../../../style/majorDetail.css";
/* 左侧 */
.major_l_box {
  padding: 21px 23px 13px 29px;
  background-color: #fff;
}
</style>