<template>
  <div class="common-mark">
    <div v-if="false"
      class="view-list"
      :style="{ width: size == 'big' || multiple ? '197px' : '70px' }"
    >
      <template v-if="multiple">
        <div class="top-tab" v-if="false">
          <p @click="markTypeChange(1)" :class="markType == 1 ? 'active' : ''">
            PPT缩略图
          </p>
          <p @click="markTypeChange(2)" :class="markType == 2 ? 'active' : ''">
            图文批注
          </p>
        </div>
        <el-scrollbar style="height: calc(100% - 46px)">
          <div class="collapse-con">
            <div
              class="collapse-item"
              @click="currentPanel = i"
              v-for="i in 5"
              :key="i"
            >
              <div class="collapse-left">
                <i
                  class="el-icon-caret-right"
                  :class="{ active: currentPanel == i }"
                ></i>
              </div>
              <div class="collapse-right">
                <div class="collapse-item-hd">PPT名称</div>
                <el-collapse-transition>
                  <div class="collapse-item-con" v-if="currentPanel == i">
                    <p
                      v-for="(s,z) in imageUrl"
                      :key="z"
                      class="image-con active"
                      :style="{ width: '125px', height: '125px' }"
                    >
                      <i
                        class="brage"
                        :style="{
                          width: size == 'big' ? '20px' : '16px',
                          height: size == 'big' ? '20px' : '16px',
                          lineHeight: size == 'big' ? '20px' : '16px',
                        }"
                        >1</i
                      >
                      <img :src="s"/>
                    </p>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </template>
      <template v-else>
        <el-scrollbar style="height: 100%">
          <div class="collapse-item-con" style="padding-top: 10px">
            <p
              v-for="(i,index) in imageUrl"
              :key="index"
              class="image-con active"
              :style="{
                width: size == 'big' ? '125px' : '50px',
                height: size == 'big' ? '125px' : '50px',
                marginLeft: size == 'big' ? '36px' : '8px',
              }"
            >
              <i
                class="brage"
                :style="{
                  width: size == 'big' ? '20px' : '16px',
                  height: size == 'big' ? '20px' : '16px',
                  lineHeight: size == 'big' ? '20px' : '16px',
                }"
                >1</i
              >
              <img :src="i"/>
            </p>
          </div>
        </el-scrollbar>
      </template>
    </div>
    <div class="view-box">
      <div style="padding-bottom: 15px;font-size: 14px;color: #333;display:flex;">
        <div>
          <span>参会文档：</span>
          <el-select size="small" popper-class="show-elispse" v-model="currentPdf" @change="getPdfUrl(1)" placeholder="请选择文件">
            <el-option :label="i.meetingFileName" :value="i.pdfFileUrl" v-for="i in item" :key="i.id"></el-option>
          </el-select>
        </div>
        <div v-if="Array.isArray(selfUrl) && selfUrl.length" style="margin-left:20px">
          <span>时间轴文件：</span>
          <el-select size="small" popper-class="show-elispse" v-model="timelinePdf" @change="getPdfUrl(2)" placeholder="请选择文件">
            <el-option :label="i.title" :value="i.url" v-for="(i,index) in url" :key="index"></el-option>
          </el-select>
        </div>
        
      </div>
      <!-- <i
        v-if="!readonly"
        @click="addMark"
        class="icon iconfont iconqianming"
      ></i> -->
      <!-- <i class="icon el-icon-arrow-left"></i>
      <i class="icon el-icon-arrow-right"></i> -->
      <div class="mark-box" id="grab" ref="grab">
        <el-empty style="height:100%;background: #fff" :image="require('@/assets/images/empty.png')" v-if="!encodeUrl" description="未选择文件~"></el-empty>
        <iframe v-else :src="'/pdf/web/viewer.html?file=' + encodeUrl" width="100%" height="100%"/>
      </div>
    </div>
  </div>
</template>
<script>
// import pdf from 'vue-pdf'
// import * as PDFJS from 'pdfjs-dist'
// import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
// PDFJS.GlobalWorkerOptions.workerSrc = workerSrc
// import * as pdf from 'pdfjs-dist'
import { httpproxyMethod } from 'aegle-sp-components/src/utils/index'
export default {
  // components: {pdf},
  props: {
    readonly: {
      //查看还是编辑
      type: Boolean,
      default: false,
    },
    multiple: {
      //展示多个文件还是一个文件
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "small",
    },
    item: {
      type: Array,
      default: []
    },
    //此url是用于时间轴的url查看
    url: {
      type: Array | String
    } 
  },
  data() {
    return {
      timelinePdf: '',
      currentPdf: '',
      encodeUrl: '',
      markType: 1,
      currentPanel: 1,
      markList: [],
      elWidth: 0,
      elHeight: 0,
      elLeft: 0,
      elTop: 0,
      zoom: 1,
      initWidth: 0,
      initHeight: 0,
      startClientX: 0,
      startClientY: 0,
      totalPage: 0,
      imageUrl: [],
      selfUrl: [],
      src: 'http://wapi-test.arioncc.cn/oss-service/oss/aegle/20220428T160747-521_%E9%A9%AC%E5%A9%A7-MDT%E7%97%85%E4%BE%8B%E5%B0%8F%E7%BB%93.pdf'
    };
  },
  watch: {
    item(v) {
      if(v.length) {
        this.currentPdf = v[0] ? v[0].pdfFileUrl : ''
        // this.currentPdf = httpproxyMethod(this.currentPdf)
        this.getPdfUrl(1)
      }
      // if(v.length) this.pdfToPng(v[0]?.pdfFileUrl)
    },
    url(v) {
      if(v) {
        console.log(v)
        this.currentPdf = '';
        // this.timelinePdf = v[v.length - 1].url
        this.selfUrl = v
        // this.encodeUrl =v.length ? encodeURIComponent(v[v.length - 1].url) : ''
      }
    }
  },
  computed: {
  },
  mounted() {
      console.log(this.url)
    // this.pdfToPng()
  },
  methods: {
    showTimeline(v){
      if(!v) return;
      // this.timelinePdf = httpproxyMethod(v);
      this.timelinePdf = v;
      this.encodeUrl = encodeURIComponent(v)
    },
    markTypeChange(type) {
      this.markType = type;
    },
    //初始化批注容器宽高
    initBoxSize() {
      if (this.$refs.grab) {
        this.initWidth = this.$refs.grab.clientWidth;
        this.initHeight = this.$refs.grab.clientHeight;
        this.elWidth = this.initWidth * this.zoom;
        this.elHeight = this.initHeight * this.zoom;
      }
    },
    //缩放
    handleWheel(e) {
      if (e.wheelDelta < 0) {
        this.zoom -= 0.05;
      } else {
        this.zoom += 0.05;
      }
      if (this.zoom > 3) {
        this.zoom = 3;
        return;
      }
      if (this.zoom < 1) {
        this.zoom = 1;
        return;
      }
      this.elWidth = this.initWidth * this.zoom;
      this.elHeight = this.initHeight * this.zoom;
    },
    //拖动开始
    dragstart(e) {
      this.startClientX = e.clientX;
      this.startClientY = e.clientY;
      const img = new Image();
      img.src = "../../../../assets/images/doctor.jpg"; //透明图片
      e.dataTransfer.setDragImage(img, 0, 0);
    },
    //拖动结束
    dragend(e) {
      const x = e.clientX - this.startClientX;
      const y = e.clientY - this.startClientY;
      this.elLeft += x;
      this.elTop += y;
    },
    addMark() {},
    addToBox(e) {
      const wid = (e.offsetX / this.$refs.page.clientWidth) * 100;
      const hei = (e.offsetY / this.$refs.page.clientHeight) * 100;
      this.markList.push({
        top: hei,
        left: wid,
      });
    },
    async pdfToPng (url) {
      console.log(url)
      const that = this
      
      // const url = 'http://wapi-test.arioncc.cn/oss-service/oss/aegle/20220428T160747-521_%E9%A9%AC%E5%A9%A7-MDT%E7%97%85%E4%BE%8B%E5%B0%8F%E7%BB%93.pdf'
      fetch(url, { responseType: 'blob' }).then(res => {
          const loadTask = PDFJS.getDocument(url)
      const imgArr = []
      loadTask.promise.then(pdf => {
         const pageNum = pdf.numPages
         console.log(pageNum)
         for (let i = 1; i < pageNum; i++) {
            pdf.getPage(i).then(page => {
                const scale = 1
                const viewport = page.getViewport({ scale })
                const canvas = document.createElement('canvas')
                const ctx = canvas.getContext('2d')
                // div.appendChild(canvas)
                canvas.height = viewport.height
                canvas.width = viewport.width
                const renderContent = {
                    canvasContext: ctx,
                    viewport
                }
                const renderTask = page.render(renderContent)
                renderTask.promise.then(function () {
                    const imgUrl = canvas.toDataURL('image/png')
                    if (imgUrl) {
                        imgArr[i - 1] = imgUrl
                    }
                })
            })
         }
         that.imageUrl = imgArr
         console.log(that.imageUrl)
      })
      })
    },
    getPdfUrl(n) {
      if(n == 1){
        this.timelinePdf = '';
        // this.selfUrl = []
      } else {
        this.currentPdf = ''
      }
      this.encodeUrl = n == 1 ? encodeURIComponent(httpproxyMethod(this.currentPdf)) : encodeURIComponent(this.timelinePdf)
    }
  },
};
</script>
<style lang="less" scoped>
.common-mark {
  height: 100%;
  display: flex;
  .view-list {
    width: 197px;
    background-color: #fff;
    .top-tab {
      display: flex;
      justify-content: center;
      padding: 20px 14px 0;
      p {
        flex: 1;
        height: 26px;
        background: #ffffff;
        text-align: center;
        line-height: 26px;
        border: 1px solid #d9d9d9;
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
        font-size: 14px;
        margin: 0;
        &:first-child {
          border-radius: 4px 0 0 4px;
          border-right: transparent;
        }
        &:last-child {
          border-radius: 0 4px 4px 0;
          border-left: transparent;
        }
        &.active {
          border: 1px solid #1890ff;
          color: #1890ff;
        }
        &:first-child.active {
        }
      }
    }
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .view-box {
    flex: 1;
    // padding: 20px 50px 0;
    padding: 20px 30px 0 20px;
    position: relative;
    overflow: hidden;
    background: #f3f3f3;
    .icon {
      position: absolute;
      width: 29px;
      text-align: center;
      line-height: 28px;
      height: 29px;
      background: #ffffff;
      border: 1px solid #3e98ff;
      border-radius: 16px;
      left: 12px;
      top: 20px;
      color: #3e98ff;
      cursor: pointer;
      z-index: 2;
      font-size: 16px;
    }

    .el-icon-arrow-left {
      top: 50%;
      transform: translateY(-15px);
      color: #999;
      border-color: #ddd;
      &:hover {
        background-color: #3e98ff;
        color: #fff;
        border-color: #3e98ff;
      }
    }
    .el-icon-arrow-right {
      left: unset;
      top: 50%;
      transform: translateY(-15px);
      right: 12px;
      color: #999;
      border-color: #ddd;
      &:hover {
        background-color: #3e98ff;
        color: #fff;
        border-color: #3e98ff;
      }
    }
  }
  .mark-box {
    width: 100%;
    height: calc(100% - 67px);
    // background-color: #e5e5e5;
    position: relative;
    overflow: hidden;
    .mark-grab-box {
      position: absolute;
      user-select: none;
    }
    img {
      width: 100%;
      cursor: grab;
    }
    .mark-in-box {
      // width: 100%;
      // height: 100%;
      position: relative;
      .mark-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        background: #3e98ff;
        border: 1px solid #ffffff;
        border-radius: 50%;
        box-shadow: 0px 2px 4px 0px rgba(39, 53, 77, 0.27);
      }
    }
  }

  .collapse-con {
    padding: 10px 10px 0;
  }
  .collapse-item {
    display: flex;
    .collapse-left {
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #409eff;
        transform: rotate(0);
        transition: transform 0.5s;
      }
      .active {
        transform: rotate(90deg);
        transition: transform 0.5s;
      }
    }
    .collapse-right {
      flex: 1;
      .collapse-item-hd {
        height: 35px;
        line-height: 22px;
        font-size: 14px;
        font-family: PingFang, PingFang-SC;
        font-weight: SC;
        color: rgba(0, 0, 0, 0.8);
        cursor: pointer;
      }
    }
  }
  .image-con {
    margin: 0;
    position: relative;
    width: 125px;
    height: 125px;
    background: #ffffff;
    border: 1px solid #d4dff1;
    border-radius: 4px;
    margin-bottom: 10px;
    &.active {
      border-color: #407df3;
    }
    .brage {
      position: absolute;
      text-align: center;
      top: -8px;
      right: -8px;
      background: #3e98ff;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
    }
  }
}
</style>
<style lang="less">
.el-select-dropdown.show-elispse {
  max-width: 450px!important;
}
</style>