<template>
  <!-- 职业详情 -->
  <div class="occupation_detail 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>职业数据库</el-breadcrumb-item>
          <el-breadcrumb-item>{{profession.parent}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{profession.profession_name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 信息 -->
      <div class="major_det_msg clearfix">
        <!-- 左侧职业详情 -->
        <div class="major_det_l clearfix">
          <div class="major_l_box clearfix">
            <!-- 职业名称 -->
            <div class="major_name_box clearfix">
              <div class="hot_major_name">{{profession.profession_name}}</div>
              <div class="hot_major_btn clearfix">
                <div
                  class="hot_btn_r"
                  :class="{favorited:isFavorite }"
                  @click="joinCollect()"
                >{{isFavorite == 0?"收藏":"已收藏"}}</div>
              </div>
            </div>
            <!-- 职业信息 -->
            <div class="hot_major_msg clearfix">
              <div class="hot_msg_det">
                所属类别：
                <i>{{profession.profession}}</i>
              </div>
              <div class="hot_msg_det">
                兴趣代码：
                <i>{{profession.interest_ids}}</i>
              </div>
            </div>
            <!-- 目录 -->
            <div class="hot_major_catalog clearfix">
              <h4>
                目
                <br />录
              </h4>
              <div class="hot_catalog_r clearfix layout align_center justify_around">
                <ul class="major_survey">
                  <li>职业概况</li>
                </ul>
                <ul class="second_ul">
                  <li
                    v-for="item in secondList"
                    :key="item.secondId"
                    @click="anchor(item.secondId)"
                  >{{item.name}}</li>
                </ul>
                <ul class="second_ul">
                  <li
                    v-for="item in thirdList"
                    :key="item.thirdId"
                    @click="anchor(item.thirdId)"
                  >{{item.name}}</li>
                </ul>
                <ul class="classic_character">
                  <li class="occupation_li" v-show="recommend.length>1" @click="anchor(9)">推荐专业</li>
                  <li class="classic_character_li" v-show="classical.name" @click="personIntro(classical)">经典人物</li>
                </ul>
              </div>
            </div>
            <!-- 职业概况 -->
            <div class="major_survey_box clearfix layout align_left flex_diection">
              <h2>职业概况</h2>
              <!-- 职业概括 -->
              <div class="hot_major_intro" v-show="profession.introduce" id="introduce">
                <h3>职业概括</h3>
                <div class="hot_major_content" v-html="profession.introduce"></div>
              </div>
              <!-- 职业内容 -->
              <div class="hot_major_intro" v-show="profession.description" id="description">
                <h3>职业内容</h3>
                <div class="hot_major_content" v-html="profession.description"></div>
              </div>
              <!-- 发展路径 -->
              <div class="hot_major_intro" v-show="profession.develop" id="develop">
                <h3>发展路径</h3>
                <div class="hot_major_content" v-html="profession.develop"></div>
              </div>
              <!-- 从业要求 -->
              <div class="hot_major_intro" v-show="profession.demand" id="demand">
                <h3>从业要求</h3>
                <div class="hot_major_content" v-html="profession.demand"></div>
              </div>
              <div class></div>
              <!-- 职业能力 -->
              <div class="hot_major_intro occpation_ability" v-show="profession.ability" id="ability">
                <h3>职业能力</h3>
                <div
                  class="hot_major_content clearfix layout flex_diection align_left"
                  v-for="(item,index) in profession.ability"
                  :key="index"
                >
                  <div class="ability_single">
                    <i>{{index+1}}</i>
                    {{item.name}}
                  </div>
                  <div class="ability_expline">{{item.description}}</div>
                </div>
              </div>
              <!-- 职业活动 -->
              <div class="hot_major_intro occpation_ability" v-show="profession.activity" id="activity">
                <h3>职业活动</h3>
                <div
                  class="hot_major_content clearfix layout flex_diection align_left"
                  v-for="(item,index) in profession.activity"
                  :key="index"
                >
                  <div class="ability_single">
                    <i>{{index+1}}</i>
                    {{item.name}}
                  </div>
                  <div class="ability_expline">{{item.description}}</div>
                </div>
              </div>
              <!-- 职业技能 -->
              <div class="hot_major_intro occpation_ability" v-show="profession.skill" id="skill">
                <h3>职业技能</h3>
                <div
                  class="hot_major_content clearfix layout flex_diection align_left"
                  v-for="(item,index) in profession.skill"
                  :key="index"
                >
                  <div class="ability_single">
                    <i>{{index+1}}</i>
                    {{item.name}}
                  </div>
                  <div class="ability_expline">{{item.description}}</div>
                </div>
              </div>
              <!-- 职业具备知识 职业素养 -->
              <div
                class="double_occupation occpation_ability"
                v-show="profession.knowledge&&profession.attainment"
                id="knowledge"
              >
                <!-- 职业具备知识 -->
                <div class="hot_major_intro" v-show="profession.knowledge">
                  <h3>职业具备知识</h3>
                  <div
                    class="hot_major_content clearfix layout flex_diection align_left"
                    v-for="(item,index) in profession.knowledge"
                    :key="index"
                  >
                    <div class="ability_single">
                      <i>{{index+1}}</i>
                      {{item.name}}
                    </div>
                    <div class="ability_expline" v-show="item.description">{{item.description}}</div>
                  </div>
                </div>
                <!-- 职业素养  -->
                <div class="hot_major_intro" v-show="profession.attainment">
                  <h3>职业素养</h3>
                  <div class="professionalism" :class="{show_all:isAll}">
                    <div
                      class="hot_major_content clearfix layout flex_diection align_left"
                      v-for="(item,index) in profession.attainment"
                      :key="index"
                    >
                      <div class="ability_single">
                        <i>{{index+1}}</i>
                        {{item.name}}
                      </div>
                      <div class="ability_expline">{{item.description}}</div>
                    </div>
                  </div>

                  <!-- 更多按钮 -->
                  <div class="occupation_more_btn" @click="showMore()">{{!isAll?"展开更多":"收起"}}</div>
                </div>
              </div>
              <!-- 推荐专业 -->
              <div class="hot_major_intro occpation_ability" v-show="recommend.length>1" id="recommend">
                <h3>推荐专业</h3>
                <div class="hot_major_content clearfix">
                  <div
                    class="recommend_major"
                    v-for="item in recommend"
                    :key="item.id"
                    @click="toMajor(item)"
                  >{{item.name}}</div>
                </div>
              </div>
            </div>
          </div>
          <div></div>
        </div>
        <!-- 右侧跳转链接 -->
        <div class="major_link_r clearfix">
          <!-- 大图 -->
          <div class="show_pic" v-show="profession.thumb">
            <img :src="profession.thumb" alt @click="showImg()" />
          </div>
          <!-- 经典人物 -->
          <div class="link_hot_major clearfix" v-show="classical.name">
            <!-- 上层标题 -->
            <div class="hot_major_top layout align_center">
              <h2 class="white_h2">经典人物</h2>
            </div>
            <!-- 下层内容 -->
            <div class="hot_major_bot clearfix">
              <!-- 人物图片及信息 -->
              <div class="classic_info clearfix layout flex_row">
                <!-- 图片 -->
                <div class="charact_img">
                  <img :src="classical.avatar" alt />
                </div>
                <div class="charact_msg">
                  <!-- 姓名 -->
                  <div class="charact_name">{{classical.name}}</div>
                  <!-- 个人信息 -->
                  <div class="personal_msg">
                    <div class="personal_single clearfix">
                      <div class="personal_msg_l">职业：</div>
                      <div class="personal_msg_r">{{classical.profession_name}}</div>
                    </div>
                    <div class="personal_single clearfix">
                      <div class="personal_msg_l">毕业院校：</div>
                      <div class="personal_msg_r">{{classical.school}}</div>
                    </div>
                    <div class="personal_single clearfix">
                      <div class="personal_msg_l">所学职业：</div>
                      <div class="personal_msg_r">{{classical.majors_name}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 人物详细信息 -->
              <div class="charact_intro">
                <div class="char_intro_title">人物简介</div>
                <div class="charact_introduction">{{classical.introduce}}</div>
                <div class="charact_btn" @click="personIntro(classical)">详情 ></div>
              </div>
            </div>
          </div>
          <!-- 热门职业 -->
          <div class="link_hot_major clearfix">
            <!-- 上层标题 -->
            <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="getOccupation(item)"
              >{{item.name}}</div>
            </div>
          </div>
          <!-- 职业推荐 -->
          <div class="link_hot_major clearfix">
            <!-- 上层标题 -->
            <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="getOccupation(item)"
              >{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看大图弹窗 -->
    <picDialog :picVisible.sync="picVisible" :id="id" v-if="picVisible"></picDialog>
  </div>
</template>


<script>
// 查看大图
import picDialog from "./picDialog";
import { post } from "@/api/http";
import echarts from "echarts";
export default {
  data() {
    return {
      picVisible: false,
      id: "",
      // 热门职业
      hotList: [],
      recommendList2: [],
      // 目录
      secondList: [],
      thirdList: [],
      //   职业详情
      profession: [],
      //   经典人物
      classical: "",
      //   推荐专业
      recommend: [],
      isAll: false,
      // 是否收藏
      isFavorite: ""
    };
  },
  methods: {
    // 专业首页
    toMajorIndex(){
      this.$router.push({path:"/Major"})
    },
    // 锚点跳转
    anchor(id) {
      //判断访问终端
      var browser = {
        versions: (function() {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            trident: u.indexOf("Trident") > -1, //IE内核
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase()
      };
      if (browser.versions.trident) {
        switch (id) {
          case 1:window.location.hash = "introduce";break;
          case 2:window.location.hash = "description";break;
          case 3:window.location.hash = "develop";break;
          case 4:window.location.hash = "demand";break;
          case 5:window.location.hash = "ability";break;
          case 6:window.location.hash = "activity";break;
          case 7:window.location.hash = "skill";break;
          case 8:window.location.hash = "knowledge";break;
          case 9:window.location.hash = "recommend";break;
        }
      }else{
        switch (id) {
          case 1:document.getElementById("introduce").scrollIntoView(true);break;
          case 2:document.getElementById("description").scrollIntoView(true);break;
          case 3:document.getElementById("develop").scrollIntoView(true);break;
          case 4:document.getElementById("demand").scrollIntoView(true);break;
          case 5:document.getElementById("ability").scrollIntoView(true);break;
          case 6:document.getElementById("activity").scrollIntoView(true);break;
          case 7:document.getElementById("skill").scrollIntoView(true);break;
          case 8:document.getElementById("knowledge").scrollIntoView(true);break;
          case 9:document.getElementById("recommend").scrollIntoView(true);break;
        }
      }
      
    },
    // 人物详情
    personIntro(item) {
      this.$router.push({ path: "/Character", query: { id: item.id } });
    },
    // 查看大图
    showImg() {
      this.picVisible = true;
    },
    // 专业
    toMajor(item) {
      this.$router.push({ path: "/HotMajor", query: { id: item.id } });
    },
    // 收藏职业
    joinCollect() {
      let url = "/api/common/favorite";
      let params = {
        object_id: this.profession.id,
        type: 3
      };
      post(url, params).then(res => {
        this.isFavorite = !this.isFavorite;
      });
    },
    // 展开更多
    showMore() {
      this.isAll = !this.isAll;
    },
    getOccupation(item) {
      this.id = item.id;
      this.getProfessionDetail();
    },
    // 职业详情
    getProfessionDetail() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.secondList = [];
      this.thirdList = [];
      let url = "/api/profession/getProfessionDetail/";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.profession = res.profession;
        this.isFavorite = res.profession.is_favorite;
        if (this.profession.introduce) {
          let obj = {};
          obj["secondId"] = 1;
          obj["name"] = "职业概括";
          this.secondList.push(obj);
        }
        if (this.profession.description) {
          let obj = {};
          obj["secondId"] = 2;
          obj["name"] = "职业内容";
          this.secondList.push(obj);
        }
        if (this.profession.develop) {
          let obj = {};
          obj["secondId"] = 3;
          obj["name"] = "发展路径";
          this.secondList.push(obj);
        }
        if (this.profession.demand) {
          let obj = {};
          obj["secondId"] = 4;
          obj["name"] = "从业要求";
          this.secondList.push(obj);
        }
        if (this.profession.ability) {
          let obj = {};
          obj["thirdId"] = 5;
          obj["name"] = "职业能力";
          this.thirdList.push(obj);
        }
        if (this.profession.activity) {
          let obj = {};
          obj["thirdId"] = 6;
          obj["name"] = "职业活动";
          this.thirdList.push(obj);
        }
        if (this.profession.skill) {
          let obj = {};
          obj["thirdId"] = 7;
          obj["name"] = "职业技能";
          this.thirdList.push(obj);
        }
        if (this.profession.knowledge) {
          let obj = {};
          obj["thirdId"] = 8;
          obj["name"] = "职业具备知识";
          this.thirdList.push(obj);
        }
        // 推荐职业
        this.recommend = this.profession.recommend;
        // 经典人物
        this.classical = res.profession.classical;
      });
    },
    //  热门及推荐职业
    getHotAndRecommendList() {
      let url = "/api/profession/getHotAndRecommendList/";
      post(url).then(res => {
        //   热门职业
        this.hotList = res.hot_list;
        //   职业推荐
        this.recommendList2 = res.recommend_list;
      });
    },
  },
  components: {
    picDialog
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getProfessionDetail();
    this.getHotAndRecommendList();
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.getProfessionDetail();
    }
  },
};
</script>
<style scoped>
@import "../../../../style/majorDetail.css";
@import "../../../../style/majorSearch.css";
/* 目录 */
@import "../../../../style/occupation.css";

/* 职业名称 */
.hot_major_name {
  margin-left: 0;
}

.hot_msg_det {
  margin-right: 70px;
}
.major_survey {
  padding: 0 49px;
}
/* 职业能力 */
.occpation_ability {
  position: relative;
  padding-top: 14px;
  width: 100%;
}
.occpation_ability::after {
  position: absolute;
  left: -30px;
  top: -10px;
  content: "";
  display: block;
  width: 822px;
  height: 10px;
  background-color: #f2f5fa;
}
.ability_single {
  color: #f7c51b;
  font-size: 14px;
}
.ability_single i {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #f7c51b;
  border-radius: 50%;
  text-align: center;
  line-height: 12px;
  color: #fff;
  margin-right: 4px;
}
.ability_expline {
  margin-left: 16px;
}
/* 职业知识 素养 */

/* 更多按钮 */
.occupation_more_btn {
  width: 100%;
  height: 44px;
  text-align: center;
  line-height: 44px;
  color: #409eff;
  font-size: 16px;
  background-color: #f1f1f1;
  margin-top: 10px;
}
/* 推荐专业 */
.recommend_major {
  padding: 6px 25px;
  color: #8c9198;
  border: 1px solid #8c9198;
  border-radius: 3px;
  margin-right: 24px;
  float: left;
  margin-bottom: 10px;
}
.recommend_major:hover {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}
/* 职业素养 */
.professionalism {
  height: 165px;
  overflow: hidden;
}
.show_all {
  height: 100%;
}
/* 大图 */
.show_pic {
  width: 337px;
  /* height: 317px; */
  padding: 13px;
  background-color: #fff;
  margin-bottom: 25px;
  border-radius: 3px;
}
.show_pic img {
  width: 100%;
  /* height: 100%; */
}
</style>