<template>
  <!-- 专业搜索 -->
  <div class="major_search">
    <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>专业数据库</el-breadcrumb-item>
          <el-breadcrumb-item class="last_brand">搜索“{{keyword == "" || keyword.trim().length ==0?'全部':keyword}}”</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">
            <!-- 学科名称 -->
            <div class="layout justify align_center major_name">
              <h1>搜索“{{keyword == "" || keyword.trim().length ==0?'全部':keyword}}”</h1>
            </div>
            <!-- 下属专业 -->
            <div class="layout align_left flex_diection branch_box">
              <div class="layout flex_diection similar_box">
                <div class="branch_det" v-for="item in branchList" :key="item.id">
                  <h3
                    @click="majorDetail(item)"
                  >{{item.major_category == 1?"【本科】":"【专科】"}}{{item.name}}</h3>
                  <div class="branch_summary">{{item.introduce}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </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 {
      keyword: "",
      // 专业名称
      majorName: "",
      // 概述
      summary: "",
      targets: "",
      // 热门专业
      botList: [],
      // 下属专业
      branchList: [],
      // 分页
      total: 0,
      page: 1
    };
  },
  methods: {
    // 专业首页
    toMajorIndex(){
      this.$router.push({path:"/Major"})
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.getMajorsSearchList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    // 专业详情
    majorDetail(item) {
      this.$router.push({ path: "/HotMajor", 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" });
    },
    //   二级专业详情
    getMajorsSearchList() {
      let url = "/api/major/getMajorsSearchList/";
      let params = {
        keyword: this.keyword,
        page: this.page
      };
      post(url, params).then(res => {
        this.branchList = res.majors_list;
        this.total = res.total_page;
      });
    },
    // 热门专业
    getHotList() {
      let url = "/api/major/getHotList/";
      post(url).then(res => {
        this.botList = res.hot_list;
      });
    }
  },
  mounted() {
    this.keyword = this.$route.query.keyWord;
    this.getMajorsSearchList();
    this.getHotList();
  }
};
</script>
<style scoped>
@import "../../../../style/majorDetail.css";
@import "../../../../style/majorSearch.css";
.major_search {
  background-color: #f2f5fa;
}
h1 {
  position: relative;
}
h1::after {
  content: "";
  display: block;
  width: 770px;
  height: 1px;
  background-color: #eee;
  position: absolute;
  bottom: -10px;
  left: 0;
}
h3::before {
  content: "";
  display: block;
  height: 14px;
  width: 4px;
  border-radius: 2px;
  background-color: #409eff;
  position: absolute;
  left: -4px;
  top: 5px;
}
.similar_box {
  margin-left: 14px;
}
.branch_box {
  width: 100%;
}
</style>