<template>
  <!-- 职业大全 -->
  <div class="major_search clearfix">
    <div class="major_box clearfix">
      <!-- 搜索框 -->
      <div class="search_input clearfix layout flex_row align_center">
        <input type="text" placeholder="职业查询" v-model="professionCon" @keyup.enter="professionSearch()"/>
        <div class="search_tips" @click="professionSearch()">搜索</div>
      </div>
      <!-- 热门职业 -->
      <div class="hot_pro clearfix">
        <div class="hot_major_title">热门职业：</div>
        <div class="clearfix hot_profession">
          <!-- 职业名称 -->
          <div
            class="hot_major_name"
            v-for="item in hotList"
            :key="item.id"
            @click="hotProfession(item)"
          >{{item.name}}</div>
        </div>
      </div>
      <!-- 职业查找条件 -->
      <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="search()">搜索</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>职业分类</h2>
      <div class="clearfix">
        <div class="classification layout flex_row justify">
          <div
            class="classific_box"
            v-for="item in classificList"
            :key="item.id"
            @mouseenter="show(item)"
            @mouseleave="hidden(item)"
          >
            <div class="classification_single layout flex_diection justify_center align_center">
              <div class="classific_single_img">
                <img :src="item.img" alt />
              </div>
              <div class="classific_single_content">{{item.sort_name}}</div>
            </div>
            <div class="mask" v-show="isMask == item.id">
              <div class="mask_box">
                <div
                  class="mask_profession"
                  v-for="items in item.child"
                  :key="items.id"
                  @click="professionIntro(items)"
                >{{items.sort_name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="classification layout flex_row justify">
          <div
            class="classific_box"
            v-for="item in classificList2"
            :key="item.id"
            @mouseenter="show(item)"
            @mouseleave="hidden(item)"
          >
            <div class="classification_single layout flex_diection justify_center align_center">
              <div class="classific_single_img">
                <img :src="item.img" alt />
              </div>
              <div class="classific_single_content">{{item.sort_name}}</div>
            </div>
            <div class="mask" v-show="isMask == item.id">
              <div class="mask_box">
                <div
                  class="mask_profession"
                  v-for="items in item.child"
                  :key="items.id"
                  @click="professionIntro(items)"
                >{{items.sort_name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    
    return {
      // 搜索内容
      professionCon: "",
      isChoice: 0,
      // 热门专业列表
      hotList: [],
      value: "R",
      value2: "",
      value3: "",
      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: [],
      //   遮罩层
      isMask: "",
      classificList: [],
      classificList2: [],
    };
  },
  methods: {
    // 职业搜索
    professionSearch(key) {
      this.$router.push({ path: "/ProfessionIntroduc", query: { key: this.professionCon } });
    },
    //   职业介绍
    professionIntro(item) {
      localStorage.setItem("sortId",item.id);
      localStorage.setItem("sortName",item.sort_name);
      this.$router.push({ path: "/ProfessionIntroduc", query: { sort: item } });
    },
    //   职业分类遮罩层
    show(item) {
      this.isMask = item.id;
    },
    hidden() {
      this.isMask = "";
    },
    // 热门职业
    hotProfession(item) {
        this.$router.push({ path: "/Occupation", query: { id: item.id } });
    },
    // 代码搜索
    search() {
      this.$router.push({
        path: "/ProfessionByCode",
        query: { interest: [this.value, this.value2, this.value3] }
      });
    },
    // 热门及推荐职业
    getHotAndRecommendList() {
      let url = "/api/profession/getHotAndRecommendList/";
      post(url).then(res => {
        this.hotList = res.hot_list;
        this.list = res.recommend_list;
      });
    },
    // 职业分类列表
    getSortList() {
      let url = "/api/profession/getSortList/";
      post(url).then(res => {
        this.classificList = res.slice(0, 3);
        for (let obj of this.classificList) {
          switch (obj.id) {
            case 1:
              obj["img"] = require("../../../../assets/img/64.png");
              break;
            case 6:
              obj["img"] = require("../../../../assets/img/67.png");
              break;
            case 11:
              obj["img"] = require("../../../../assets/img/66.png");
              break;
          }
        }
        this.classificList2 = res.slice(3, 6);
        for (let obj of this.classificList2) {
          switch (obj.id) {
            case 19:
              obj["img"] = require("../../../../assets/img/63.png");
              break;
            case 25:
              obj["img"] = require("../../../../assets/img/68.png");
              break;
            case 29:
              obj["img"] = require("../../../../assets/img/65.png");
              break;
          }
        }
      });
    }
  }, 
  mounted() {
    this.getHotAndRecommendList();
    this.getSortList();
  }
};
</script>
<style scoped>
@import "../../../../style/schoolFirstPage.css";
@import "../../../../style/profession.css";
.hot_pro {
  margin-left: 205px;
  margin-top: 16px;
}
.hot_major_title {
  float: left;
}
.hot_major_name {
  float: left;
  margin-bottom: 14px;
}
/* 职业分类 */
.classification {
  margin-bottom: 16px;
}
.classification_single {
  width: 389px;
  height: 213px;
  background: #fff;
  border-radius: 3px;
}
.classific_single_content {
  color: #0d1e2e;
  font-size: 32px;
  margin-top: 25px;
}
/* 单个 */
.classific_box {
  position: relative;
}
.mask {
  width: 389px;
  height: 213px;
  background-color: #000;
  opacity: 0.8;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
}
.mask_box {
  padding: 33px 30px;
}
.mask_profession {
  float: left;
  margin-right: 20px;
  margin-bottom: 14px;
  font-size: 16px;
  color: #fff;
}
.mask_profession:hover {
  color: #409eff;
}
</style>