<template>
  <!--详情页  -->
  <div class="career_detail">
    <Top :active="active"></Top>
    <div class="career_det_wrap">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>学习资源</el-breadcrumb-item>
          <el-breadcrumb-item>{{detList.type == 1?"推荐书籍":detList.type == 2?"生涯案例":"生涯故事"}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{detList.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="career_det_box clearfix">
        <!-- 左侧 -->
        <div class="career_det_l">
          <div class="career_l_box">
            <!-- 书籍信息 -->
            <div class="book_msg layout flex_row">
              <dl>
                <dt>
                  <img :src="detList.image" alt />
                </dt>
                <dd class="layout flex_row align_left" @click="collect()">
                  <div class="career_l_img">
                    <img :src="isFavorite == 0?src1:src2" alt />
                  </div>
                  <i class="career_collect">收藏</i>
                </dd>
              </dl>
              <div class="book_det_msg layout flex_diection align_left">
                <div class="book_title">{{detList.name}}</div>
                <div class="book_source">
                  {{detList.author}}
                  <i>{{detList.createtime | date}}</i>
                </div>
                <div class="book_source">标签：{{detList.sign}}</div>
                <div class="book_other">{{detList.description}}</div>
              </div>
            </div>
            <!-- 书籍介绍 -->
            <div class="book_introduc" v-html="detList.content"></div>
            <!-- 附件 -->
            <div class="book_annex" v-if="showfujian">
              <div class="book_annex_top">附件：</div>
              <div class="book_annex_bot">
                <div class="annex_bot_single layout flex_row justify align_center" v-show="detList.files">
                  <div>{{detList.name}}</div>
                  <div class="layout">
                    <div class="annex_btn" @click="previewSource()">在线预览</div>
                    <div class="annex_btn" @click="downSource()">下载资源</div>
                  </div>
                </div>
                <div class="annex_bot_single single_tips">*部分浏览器无法在线预览，请升级浏览器版本或下载资源阅读</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="career_det_r">
          <dl class="dl_r_list" v-for="(item,index) in resourseList" :key="index" @click="showDet(item)">
            <dt>
              <img :src="item.image" alt />
            </dt>
            <dd class="other_book_msg">
              <p class="other_title">{{item.name}}</p>
              <span class="other_intro">{{item.description}}</span>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <Bottom2></Bottom2>
    <!-- 报告详情预览 -->
    <PreviewDialog  :previewVisible.sync="previewVisible" :reportId="reportId" :type="type" v-if="previewVisible"></PreviewDialog>
  </div>
</template>
<script>
// 详情预览
import PreviewDialog from "../SchoolSelection/University/PreviewDialog";
import pdf from "vue-pdf";
import Top from "../../common/Top";
import Bottom2 from "../../common/Bottom2";
import { post } from "@/api/http";
export default {
  data() {
    return {
      previewVisible:false,
      active: 4,
      id: "",
      detList: [],
      isFavorite: "",
      src1: require("../../../assets/img/career.png"),
      src2: require("../../../assets/img/star1.png"),
      // 推荐资源
      resourseList: [],
      // pdf文件
      pdfSrc:"",
      showfujian:true
    };
  },
  methods: {
    showDet(item) {
      this.id = item.id;
      this.getBooksDetail();
    },
    // 收藏/取消收藏
    collect() {
      let url = "/api/common/favorite";
      let params = {
        object_id: this.detList.id,
        type: 4
      };
      post(url, params).then(res => {
        this.isFavorite = !this.isFavorite;
      });
    },
    // 预览文档
    previewSource(){
      this.previewVisible = true;
      this.reportId = this.id;
      this.type = 2;
    },
    // 下载文档
    downSource(){
      window.open(this.pdfSrc,"_blank");
    },
    // 学习资源详情
    getBooksDetail() {
      let url = "/api/resource/getBooksDetail/";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.detList = res;
        this.pdfSrc = res.files;
        this.isFavorite = res.is_favorite;
        if(res.files.length == 0){
          this.showfujian = false
        }
      });
    },
    // 学习资源推荐数据
    getRecommendList() {
      let url = "/api/resource/getRecommendList/";
      post(url).then(res => {
        this.resourseList = res.res_list;
      });
    }
  },
  components: {
    Top,
    Bottom2,
    pdf,
    PreviewDialog
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getBooksDetail();
    this.getRecommendList();
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.getBooksDetail();
    }
  },
};
</script>
<style scoped>
.career_detail {
  background-color: #f2f5fa;
  width: 100%;
}
.career_det_wrap {
  width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  color: #8c9198;
}
.career_det_box {
  width: 1200px;
}
/* 左侧 */
.career_det_l {
  float: left;
  width: 844px;
  background-color: #fff;
}
.career_l_box {
  padding: 26px;
}

dt {
  width: 248px;
  height: 146px;
  margin: 0;
  padding: 0;
}
dt img {
  width: 100%;
  height: 100%;
}
dd {
  margin-top: 17px;
}
.career_l_img {
  width: 20px;
  height: 18px;
  line-height: 12px;
  margin-right: 5px;
}
.career_l_img img {
  width: 100%;
  height: 100%;
}
.career_collect {
  line-height: 19px;
}
/* 书籍信息 */
.book_det_msg {
  margin-left: 38px;
}
.book_title {
  color: #34485e;
  font-size: 18px;
  margin-bottom: 14px;
  text-align: left
}
.book_source {
  margin-bottom: 14px;
}
.book_source i {
  margin-left: 40px;
}
.book_other {
  color: #5b5e63;
  width: 506px;
  text-align: left;
}
/* 书籍介绍 */
.book_introduc {
  margin: 23px 0 29px 0;
  text-align: left;
}
/* 附件 */
.book_annex_top {
  color: #5b5e63;
  position: relative;
  text-align: left;
}
/* .book_annex_top::after{
    position: absolute;
    content: "";
    display: block;
    width:744px;
    height:0;
    border:1px dashed #E6E6E6;
    bottom:5px;
    right:3px;
} */
.book_annex_bot {
  margin-top: -5px;
}
.annex_bot_single {
  width: 744px;
  border-top: 1px dashed #e6e6e6;
  margin-left: 42px;
  color: #409eff;
}
.annex_btn {
  padding: 5px 28px;
  border: 1px solid #409eff;
  border-radius: 3px;
  margin: 9px 0 9px 19px;
}
.single_tips {
  font-size: 12px;
  color: #8c9198;
  text-align: left;
  padding-top: 15px;
}
/* 右侧 */
.career_det_r {
  float: right;
  padding: 35px 46px;
  background-color: #fff;
}
.dl_r_list{
  margin-bottom: 20px;
}
.other_book_msg {
  width: 248px;
  text-align: left;
}
.other_title {
  font-size: 18px;
  color: #34485e;
  text-align: center;
  margin-bottom: 10px;
}
.other_intro {
  font-size: 12px;
}
dl:hover .other_title {
  color: #409eff;
}
</style>