<template>
   <common-header/>
  <div class="common100 allPageWidthBg review">
    <div class="withShadow">
      <div class="likeBread">
        <div class="likeBread_left">{{sourceDetailData.kf_name}}</div>
        <div class="likeBread_right">
          <span>课程资源</span>-
          <span>基础课程</span>-
          <span>查看更多</span>-
          <span>{{sourceDetailData.kf_name}}</span>
        </div>
      </div>
    </div>
    <div class="common1280 resourceView">
      <div class="bigTitle">
        <img :src="'/kczy/'+typeKind+'.png'" alt="" srcset="">
        <p>{{sourceDetailData.kf_name}}.{{typeKind}}</p>
      </div>
      <!-- posti -->
      <div class="downIcon" @click="downLoadFile">
        <img src="/kczy/downIcon.png" alt="" srcset="">
        <p>下载</p>
      </div>
      <div class="sourceCont">
        <p class="baseT">{{sourceDetailData.kf_name}}</p>
        <div class="baseC">
          <div v-if="sourceDetailData.file_allow_preview_web==2" style="height: 300px;line-height: 300px;text-align: center;font-size: 16px;color: #ccc;">当前文件暂不支持预览</div>
          <iframe v-else class="baseC_network_show" name="content_frame" :src="sourceDetailData.file_preview" frameborder=0  scrolling="no"></iframe>
        </div>
      </div>
    </div>
  </div>
  <common-footer/>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
import { courseSourceDetail } from "./kczy/allApi.js";
import { user } from "@/store/user.js";
  export default {
  name: "review",
  components:{
      CommonHeader,
      CommonFooter
    },
    data() {
      return {
        transIconType: '',
        transKfId: '',
        sourceDetailData: '',
        typeKind:'',
        prefixImg: window.GLOBAL_CONFIG.api,
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      //初始化数据
      initData() {
        this.transIconType = this.$route.query.icon;
        this.transKfId = this.$route.query.kfId;
        let transObj = {
          token:user?.token,
          kf_id:this.transKfId
        }
        courseSourceDetail(transObj)
          .then(res => {
            if (res.code == "1") {
              this.sourceDetailData = res.data.one_info;
              let tempD = res.data.one_info.kf_path;
              this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1)
              if( res.data.one_info.file_allow_preview_web==2){
                ElMessage({
                  duration:5000,
                  message: '文件大小超过预览限制或不支持的文件格式.',
                  type: 'warning',
                })
              }
            }
          })
          .catch(error => { console.log(error) });
      },
      //文件下载
      downLoadFile() {
        let downFileUrl = this.prefixImg + this.sourceDetailData.kf_path;
        window.open(downFileUrl);
      },

    },
  }
</script>

<style lang="scss" scoped>
@import "../styles/common_resource.scss";
.review{
  width:100%;
}
.resourceView{
  border-radius: 12px;
  min-height: 700px;
  box-shadow:0 0 5px rgb(188, 188, 188);
  box-sizing: border-box;
  padding:25px 32px;
   position:relative;
  .bigTitle{
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    color: #171721;
    display:flex;
    cursor: pointer;
    p{
      margin-left:10px;
    }
  }
  .downIcon{
      width: 28px;
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      color: #00a3ff;
      position: absolute;
      right:3%;
      top:4%;
      z-index:12;
      cursor: pointer;
      img{
        width:26px;
      }
      p{
        margin-top:5px;
      }
    }
  .sourceCont{
    margin-top:50px;

    .baseT{
      font-size: 24px;
      font-weight: 800;
      text-align: center;
      color: #171721;
    }
    .baseC{
      font-size: 18px;
      font-weight: 400;
      text-align: left;
      color: #171721;
      line-height: 35px;
      letter-spacing: 1.6px;
      box-sizing: border-box;
      margin-top:40px;
      .baseC_network_show{
        width:100%;
        height: 500px;
      }
    }


  }
}
</style>
