<template>
  <div class="pdf-viewer">

    
    <!-- PDF内容区域 -->
    <div class="pdf-content">
      <div class="pdf-container">
        <canvas ref="pdfCanvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
// 导入pdfjs库
window.pdfjsLib = pdfjsLib
pdfjsLib.GlobalWorkerOptions.workerSrc = 
  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js'

export default {
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pdfDoc: null,       // PDF文档实例
      pageNum: 1,         // 当前页码
      pageCount: 0,       // 总页数
      scale: 1.3,           // 缩放比例，1表示原始大小
      isLoading: false    // 加载状态
    }
  },
  watch: {
    // 监听PDF URL变化，重新加载PDF
    pdfUrl: {
      handler(newVal) {
        if (newVal) {
          this.pageNum = 1
          this.scale = 1.3
          this.loadPdf()
        }
      },
      immediate: true
    },
    // 监听页码变化，重新渲染页面
    pageNum(newVal) {
      if (this.pdfDoc) {
        this.renderPage(newVal)
      }
    },
    // 监听缩放比例变化，重新渲染页面
    scale(newVal) {
      if (this.pdfDoc) {
        this.renderPage(this.pageNum)
      }
    }
  },
  methods: {
    // 加载PDF文档
    async loadPdf() {
      if (!this.pdfUrl) return
      
      this.isLoading = true
      try {
        const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
        this.pdfDoc = await loadingTask.promise
        this.pageCount = this.pdfDoc.numPages
        this.renderPage(this.pageNum)
      } catch (error) {
        console.error('加载PDF失败:', error)
        this.$message.error('加载PDF失败: ' + error.message)
      } finally {
        this.isLoading = false
      }
    },
    
    // 渲染指定页码
    async renderPage(num) {
      if (!this.pdfDoc) return
      
      this.isLoading = true
      try {
        const page = await this.pdfDoc.getPage(num)
        const canvas = this.$refs.pdfCanvas
        const ctx = canvas.getContext('2d')
        
        // 获取PDF原始尺寸的视口，使用当前缩放比例
        const viewport = page.getViewport({ scale: this.scale })
        
        // 设置canvas尺寸以匹配PDF页面尺寸
        canvas.height = viewport.height
        canvas.width = viewport.width
        
        // 渲染PDF页面
        await page.render({
          canvasContext: ctx,
          viewport: viewport
        }).promise
      } catch (error) {
        console.error('渲染PDF页面失败:', error)
        this.$message.error('渲染PDF页面失败: ' + error.message)
      } finally {
        this.isLoading = false
      }
    },
    
    // 上一页
    prevPage() {
      if (this.pageNum > 1) {
        this.pageNum--
      }
    },
    
    // 下一页
    nextPage() {
      if (this.pageNum < this.pageCount) {
        this.pageNum++
      }
    },
    
    // 放大
    zoomIn() {
      if (this.scale < 3) {
        this.scale += 0.1
      }
    },
    
    // 缩小
    zoomOut() {
      if (this.scale > 0.5) {
        this.scale -= 0.1
      }
    },
    
    // 重置为原始大小
    resetZoom() {
      this.scale = 1.25
    }
  }
}
</script>

<style scoped>
.pdf-viewer {
  display: flex;
  flex-direction: column;

  overflow: auto;
}




/* PDF内容区域 */
.pdf-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.pdf-container {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  margin: 0 auto;
}

/* 加载状态指示器 */
.pdf-content::after {
  content: '';
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #42b983;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.pdf-content.loading::after {
  display: block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
