<template>
  <div class="profession_by_code">
    <div class="profession_code_box">
      <!-- 职业查找条件 -->
      <div class="profess_condition layout flex_diection">
        <!-- 兴趣代码查找 -->
        <div class="condition_code layout flex_row align_left">
          <div class="code_title">兴趣代码查找</div>
          <div class="school_select pro_select layout flex_row align_center">
            <div class="search_title">1-</div>
            <el-select v-model="value">
              <el-option
                v-for="item in addressList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="school_select pro_select layout flex_row align_center">
            <div class="search_title">2-</div>
            <el-select v-model="value2">
              <el-option
                v-for="item in addressList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="school_select pro_select layout flex_row align_center">
            <div class="search_title">3-</div>
            <el-select v-model="value3">
              <el-option
                v-for="item in addressList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <!-- 按钮 -->
          <div class="code_btn" @click="codeSearch()" >搜索</div>
        </div>
        <!-- 职业推荐查找 -->
        <div class="condition_recommend clearfix">
          <div class="code_title">职业推荐查找</div>
          <div class="profession_box">
            <div class="profession_det" v-for="item in list" :key="item.id" @click="hotProfession(item)">{{item.name}}</div>
          </div>
        </div>
      </div>
      <h2>搜索<i class="search_code">“{{value}}{{value2}}{{value3}}型”</i></h2>
      <!-- 搜索到的结果 -->
      <div class="search_result layout flex_diection" v-show="item.id" v-for="item in codeList" :key="item.id">
        <div class="result_title" @click="hotProfession(item)">
          {{item.name}}
          <i>{{item.interest}}</i>
        </div>
        <div class="profession_explain">{{item.introduce}}</div>
      </div>
      <div class="no_content" v-show="!codeList">暂无数据</div>
      <!-- 分页 -->
      <div class="pagation" v-show="codeList">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="totalPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      value: "",
      value2: "",
      value3: "",
      totalPage:0,
      page: 1,
      addressList: [
        {
          value: "R",
          label: "R型 (实际型)"
        },
        {
          value: "I",
          label: "I型 (传统型)"
        },
        {
          value: "A",
          label: "A型 (艺术型)"
        },
        {
          value: "S",
          label: "S型 (社会型)"
        },
        {
          value: "E",
          label: "E型 (企业型)"
        },
        {
          value: "C",
          label: "C型 (传统型)"
        }
      ],
      list: [],
      codeList: [],
      interestArr: [],
    };
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.getSearchList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    // 推荐职业
    getHotAndRecommendList() {
      let url = "/api/profession/getHotAndRecommendList/";
      post(url).then(res => {
        this.list = res.recommend_list;
      });
    },
    // 职业详情
    hotProfession(item) {
      this.$router.push({ path: "/Occupation", query: { id: item.id } });
    },
    // 根据兴趣代码搜索
    codeSearch(){
      this.interestArr = [];
      this.interestArr.push(this.value,this.value2,this.value3)
      this.getSearchList();
    },
    // 筛选职业
    getSearchList() {
      let str = "";
      str = this.interestArr.toString();
      let strCode = "";
      strCode = str.replace(/,/g, "  ");
      let url = "/api/profession/getSearchList/";
      let params = {
        interest: strCode,
        page: this.page
      };
      post(url, params).then(res => {
        this.totalPage = res.total_page;
        this.codeList = res.profession_list;
      });
    }
  },
  mounted() {
    this.interestArr = this.$route.query.interest;
    this.getSearchList();
    this.value = this.interestArr[0];
    this.value2 = this.interestArr[1];
    this.value3 = this.interestArr[2];
    this.getHotAndRecommendList();
  }
};
</script>
<style scoped>
@import "../../../../style/profession.css";
.profession_by_code {
  width: 100%;
  background-color: #f2f5fa;
}
.profession_code_box {
  width: 1200px;
  margin: 0 auto;
  padding-top: 36px;
}
.profess_condition {
  margin-top: 0;
}
h2 {
  margin-bottom: 0;
}
.search_result {
  margin: 0 auto;
  width: 1200px;
  background-color: #fff;
  text-align: left;
  margin-top: 20px;
}
/* .search_result:hover{
  background-color: #f1f2f1;
} */
.search_result:hover .result_title{
  color:#409eff;
}
.result_title {
  font-weight: bold;
  font-size: 16px;
  color: #34485e;
  border-bottom: 1px solid #eee;
  padding: 14px;
}
.result_title i {
  color: #409eff;
}
.profession_explain {
  font-size: 14px;
  color: #8c9198;
  padding: 14px;
}
.pagation{
  margin-top:34px;
  /* text-align: right; */
}
/* 搜索的代码 */
.search_code{
  color: #409eff;
  margin-left:10px;
}
/* 暂无数据 */
.no_content{
  text-align: left;
  font-size:14px;
  color: #34485E;
  margin-top:34px;
}
</style>