<template>
  <!-- 职业介绍 -->
  <div class="major_search">
    <div class="major_det_box">
      <!-- 面包屑 -->
      <div class="major_title layout align_left" v-show="!sort">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item @click.native="toProfessionIndex">首页</el-breadcrumb-item>
          <el-breadcrumb-item>职业数据库</el-breadcrumb-item>
          <el-breadcrumb-item
            class="last_brand"
          >搜索“{{keyword == "" || keyWordLength ==0?'全部':keyword}}”</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="major_title layout align_left" v-show="sort">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>职业数据库</el-breadcrumb-item>
          <el-breadcrumb-item class="last_brand">{{sortName}}</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 v-show="!sort">搜索“{{keyword == "" || keyWordLength == 0?'全部':keyword}}”</h1>
              <h1 v-show="sort">{{sortName}}</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="hotProfession(item)">{{item.name}}</h3>
                  <div class="branch_summary">{{item.introduce}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="totalPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <!-- 右侧跳转链接 -->
        <div class="major_link_r clearfix">
          <!-- 热门职业 -->
          <div class="link_hot_major clearfix" v-show="hotList.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 hotList"
                :key="item.id"
                @click="hotProfession(item)"
              >{{item.name}}</div>
            </div>
          </div>
          <!-- 职业推荐 -->
          <div class="link_hot_major clearfix" v-show="recommendList2.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_classic"
                v-for="item in recommendList2"
                :key="item.id"
                @click="hotProfession(item)"
              >{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      // 搜索条件
      keyword: "",
      keyWordLength: 1,
      sort: "",
      page: 1,
      totalPage: 0,
      // 专业名称
      sortName: "",
      // 下属专业
      branchList: [],
      // 热门职业
      hotList: [],
      recommendList2: []
    };
  },
  methods: {
    // 职业首页
    toProfessionIndex() {
      this.$router.push({ path: "/Profession" });
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.sort) {
        this.getProfessionList();
      } else {
        this.getSearchList();
      }
    },
    //  热门及推荐职业
    getHotAndRecommendList() {
      let url = "/api/profession/getHotAndRecommendList/";
      post(url).then(res => {
        //   热门职业
        this.hotList = res.hot_list;
        //   职业推荐
        this.recommendList2 = res.recommend_list;
      });
    },
    // 职业详情
    hotProfession(item) {
      this.$router.push({ path: "/Occupation", query: { id: item.id } });
    },
    //筛选职业
    getSearchList() {
      let url = "/api/profession/getSearchList/";
      let params = {
        keyword: this.keyword,
        page: this.page
      };
      post(url, params).then(res => {
        this.branchList = res.profession_list;
        this.totalPage = res.total_page;
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        // console.log(this.branchList)
      });
    },
    // 某分类下职业列表
    getProfessionList() {
      let url = "/api/profession/getProfessionList/";
      let params = {
        sort_id: localStorage.getItem("sortId"),
        page: this.page
      };
      post(url, params).then(res => {
        this.branchList = res.profession_list;
        this.totalPage = res.total_page;
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      });
    }
  },
  mounted() {
    
    this.sort = this.$route.query.sort;
    this.sortName = localStorage.getItem("sortName");
    this.getHotAndRecommendList();
    if (this.sort) {
      this.getProfessionList();
    } else {
      this.keyword = this.$route.query.key;
      if (this.keyword.split(" ").join("").length == 0) {
        this.keyWordLength = 0;
      }
      this.getSearchList();
    }
  }
};
</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 {
  margin-left: 0px;
}
h3::before {
  content: "";
  display: block;
  height: 14px;
  width: 4px;
  border-radius: 2px;
  background-color: #409eff;
  position: absolute;
  left: -14px;
  top: 5px;
}
.similar_box {
  margin-left: 14px;
}
.branch_box {
  width: 100%;
}
.bot_classic {
  font-size: 14px;
  float: left;
  width: 50%;
  color: #409eff;
  text-align: left;
  margin-bottom: 20px;
}
</style>