<template>
  <!-- 人物介绍 -->
  <div class="character_intro">
    <div class="major_det_box clearfix">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item @click.native="toUniversityIndex()">首页</el-breadcrumb-item>
          <el-breadcrumb-item>生涯人物</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 内容 -->
      <div class="charact_msg_box">
        <!-- 人物信息 -->
        <div class="charact_msg clearfix">
          <!-- 左侧图片 -->
          <div class="charact_msg_l">
            <img :src="charactList.avatar" alt />
          </div>
          <!-- 右侧信息 -->
          <div class="charact_msg_r">
            <div class="charact_name">{{charactList.name}}</div>
            <div class="charact_det_msg clearfix">
              <div class="charact_det_msg_l">
                <div>性别：</div>
                <div>籍贯：</div>
                <div>出生年月：</div>
              </div>
              <div class="charact_det_msg_l">
                <div>{{charactList.sex == 1?"男":"女"}}</div>
                <div>{{charactList.place}}</div>
                <div>{{charactList.birthday}}（{{charactList.constellation}}）</div>
              </div>
              <div class="charact_det_msg_l">
                <div>职业：</div>
                <div>所学专业：</div>
                <div>毕业院校：</div>
              </div>
              <div class="charact_det_msg_l">
                <div
                  class="charact_det_color"
                  @click="toProfession(charactList.profession_id)"
                >{{charactList.profession}}</div>
                <div
                  class="charact_det_color"
                  @click="toMajor(charactList.majors_id)"
                >{{charactList.majors_name}}</div>
                <div
                  class="charact_det_color"
                  @click="toUniversity(charactList.school_id)"
                >{{charactList.school_name}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 人物简介 -->
        <div class="charact_profile">
          <h2>人物简介</h2>
          <div class="profile" v-html="charactList.introduce"></div>
        </div>
        <!-- 人物经历 -->
        <div class="charact_experience">
          <h2>人物经历</h2>
          <div class="profile" v-html="charactList.experience"></div>
        </div>
        <div class="charact_experience" v-show="charactList.achieve">
          <h2>成就</h2>
          <div class="profile" v-html="charactList.achieve"></div>
        </div>
        <div class="charact_tips">以上内容来源于网络，如有侵权，请及时联系，我方将在24小时内删除</div>
      </div>
      <!-- 生涯人物风云榜 -->
      <div class="others_box">
        <h2>生涯人物风云榜</h2>
        <div class="charact_others clearfix">
          <div class="charact_single clearfix" v-for="(item,index) in classicaList" :key="index">
            <div class="single_pic">
              <img :src="item.avatar" alt />
            </div>
            <div class="single_msg">
              <div class="single_name" @click="currentDet(item)">{{item.name}}</div>
              <div class="charact_det_msg clearfix">
                <div class="charact_det_msg_l single_det_msg">
                  <div>职业：</div>
                  <div>毕业院校：</div>
                  <div>所学专业：</div>
                </div>
                <div class="charact_det_msg_l single_det_msg">
                  <div>{{item.profession}}</div>
                  <div>{{item.school_name}}</div>
                  <div>{{item.majors_name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      id: "",
      charactList: [],
      classicaList: []
    };
  },
  methods: {
    toUniversityIndex(){
      this.$router.push({path:'/University'})
    },
    // 职业详情
    toProfession(id) {
      if (id) {
        this.$router.push({ path: "/Occupation", query: { id: id } });
      }
    },
    // 专业详情
    toMajor(id) {
      this.$router.push({ path: "/HotMajor", query: { id: id } });
    },
    // 院校详情
    toUniversity(id) {
      this.$router.push({ path: "/UniversityIntroduc", query: { id: id } });
    },
    currentDet(item) {
      this.id = item.id;
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.getClassicalDetail();
    },
    //   经典人物详情
    getClassicalDetail() {
      let url = "/api/profession/getClassicalDetail/";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.charactList = res.classical;
      });
    },
    // 生涯人物风云榜
    getClassicalList() {
      let url = "/api/profession/getClassicalList/";
      post(url).then(res => {
        this.classicaList = res.classical;
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getClassicalDetail();
    this.getClassicalList();
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.getClassicalDetail();
    }
  },
};
</script>
<style scoped>
@import "../../../../style/majorDetail.css";
@import "../../../../style/charact.css";
.character_intro {
  width: 100%;
  background-color: #f2f5fa;
}
.charact_single:hover .single_name {
  color: #409eff;
}
.charact_det_color {
  color: #409eff;
}
.charact_tips{
  color: #F44A5E;
  font-size: 14px;
  margin-top:20px;
}
</style>