<template>
  <div class="video-warpz">
    <div class="video-area">
      <div class="bpx-player-video-area">
        <iframe :src="pdfUrl" width="100%" height="100%"/>
      </div>
      <div class="video-side">
        <table class="table-ui">
          <tr>
            <td class="tbg">课程名称</td>
            <td>{{ pdfMoudel.COURSEWARENAME }}</td>
          </tr>
          <tr>
            <td class="tbg">主讲人</td>
            <td>{{ pdfMoudel.SPEAKER }}</td>
          </tr>
          <tr>
            <td class="tbg">课程介绍</td>
            <td>{{ pdfMoudel.COURSEWAREINTRODUCE }}</td>
          </tr>
          <tr>
            <td class="tbg">岗位培训类型</td>
            <td>{{ pdfPd.post_type_name }}</td>
          </tr>
          <tr>
            <td class="tbg">培训行业类型</td>
            <td>{{ pdfPd.train_type_name }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="ui-foot">
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
</div></template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import pdf from 'vue-pdf'
export default {
  components: { Pagination, pdf },
  directives: { waves },
  data() {
    return {
      USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID,
      pdfMoudel: {},
      pdfPd: {},
      // pdf预览
      pdfUrl: '',
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  created() {
    const pdfMoudel = this.$parent.pdfMoudel
    this.pdfMoudel = pdfMoudel
    this.pdfUrl = '../../../../../../static/pdf/web/viewer.html?file=' + config.fileUrl + this.pdfMoudel.COURSEWAREFILES
    this.saveVideoRecord(1)
    this.getpdf()
  },
  methods: {
    getpdf() {
      requestFN(
        '/datacourseware/goEdit',
        {
          DATACOURSEWARE_ID: this.$parent.pdfMoudel.COURSEWAREID
        }
      ).then((data) => {
        this.pdfPd = data.pd
      }).catch((e) => {
      })
    },
    saveVideoRecord(isEnd) {
      requestFN(
        '/coursestudyvideorecord/save',
        {
          CURRICULUM_ID: this.$parent.STUDYTASK_ID,
          STUDYTASK_ID: this.$parent.STUDYTASK_ID,
          VIDEOCOURSEWARE_ID: this.pdfMoudel.COURSEWAREID,
          RESOURCETIME: this.pdfMoudel.CLASSHOUR,
          IS_END: isEnd,
          TYPE: 2
        }
      ).then((data) => {
        this.pd = data.pd
      }).catch((e) => {
      })
    },
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    goBack() {
      // this.$refs.videoPlayer.player.play()
      this.$parent.activeName = 'Courseware'
    }
  }
}
</script>

<style lang="scss" scoped>
.video-warpz {
  min-height: calc(100vh - 150px);

  .viedo-sidows {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    .viedo-drop {
      background: #fff;
      padding: 20px;
      width: 420px;
      margin: 0 auto;
      text-align: center;
      border-radius: 10px;
      height: 500px;
      margin-top: 100px;
    }
  }
  .video-area {
    display: flex;
    position: relative;
    padding: 20px;
    height: 800px;
    .bpx-player-video-area {
      width: 1100px;
      height: 800px;
    }
    .video-side {
      margin-left: 30px;
    }
  }
}
</style>
