<template>
  <div class="course-ware">
    <div v-show="url && loadPdf" class="canvas-box"></div>
    <div v-show="!(url && loadPdf)">
      <img class="img" src="~@/images/course/empty_ware.png" alt="" />
      <p class="tip">暂无相关课件</p>
    </div>
  </div>
</template>

<script>
/**
 * 版本：v2.4.456
 * 需引用ES5
 * GlobalWorkerOptions.workerSrc需要一个加载路径
*/
import pdfJS from 'pdfjs-dist/es5/build/pdf';
pdfJS.GlobalWorkerOptions.workerSrc = '//cdn.bootcdn.net/ajax/libs/pdf.js/2.4.456/pdf.worker.js';
import coverImg from '@/images/course/lock-big.png';

export default {
  props: {
    url: {
      type: String,
      default: ""
    },
    visible: {
      type: Boolean,
      default: true,
    },
    hidePpt: {
      type: Number,
      default: 0,
    },
    showFlag: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      loadPdf: false
    }
  },
  watch: {
    url(val) {
      this.drawPDF();
    }
  },
  mounted() {
    this.parentDom = this.$el.querySelector('.canvas-box');
    this.drawPDF();
  },
  methods: {
    async drawPDF() {
      if (!this.url) {
        return;
      }
      try {
        const task = pdfJS.getDocument(this.url);
        const pdf = await task.promise.then();
        let numPages = 0;
        if (pdf && pdf._pdfInfo) {
          numPages = pdf._pdfInfo.numPages
        }
        let pageAll = [];
        for (let i = 0; i < numPages; i++) {
          pageAll.push(pdf.getPage(i + 1).catch(err => ''))
        }
        const pages = await Promise.all(pageAll);
        this.parentDom.innerHTML = '';
        if (!this.visible && pages[0]) {
          this.createCanvas(pages[0])
        } else {
          for (let item of pages) {
            this.createCanvas(item)
          }
        }

        this.loadPdf = true;
      } catch(err) {
        console.log(err)
      }
    },
    createCanvas(pdfPage) {
      let viewport = pdfPage.getViewport({ scale: 1.0 });
      let box = document.createElement("div");
      box.style.position = 'relative';
      box.style.marginBottom = '30px';
      let canvas = document.createElement("canvas");
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      canvas.style.display = 'block';
      canvas.style.width = '100%';
      if (!this.visible) {
        canvas.style['-webkit-filter'] = 'blur(3px)';
        canvas.style.filter = 'blur(3px)';
      }

      let ctx = canvas.getContext("2d");
      let renderTask = pdfPage.render({
        canvasContext: ctx,
        viewport: viewport,
      });
      box.appendChild(canvas);
      if (!this.visible) {
        let cover = document.createElement("div");
        cover.style.position = 'absolute';
        cover.style.left = '0';
        cover.style.top = '0';
        cover.style.width = '100%';
        cover.style.height = '100%';
        cover.style.background = `url(${coverImg}) no-repeat center center`;
        cover.style.backgroundSize = '50px auto';
        // cover.style.backgroundColor = 'rgba(255, 255, 255, .98)';
        cover.onclick = () => {
          if (!this.$store.getters.logged) {
            this.$store.dispatch('goLogin');
            return;
          }
          this.$toast((this.hidePpt && this.showFlag === 0) ? '请前往App查看' : '购买/激活后可查看课件')
        }
        box.appendChild(cover);
      }
      this.parentDom.appendChild(box);
    }
  }
};
</script>

<style lang="less" scoped>
.course-ware{
  padding-top: 20px;
  overflow: hidden;
  .img{
    display: block;
    width: 100px;
    margin: 40px auto 5px;
  }
  .tip{
    color: #999;
    font-size: 12px;
    text-align: center;
  }
}
</style>
