<template>
  <div class="pdf-container">
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    
    <!-- 美观的加载动画 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner">
        <div class="spinner-circle"></div>
        <div class="spinner-circle-inner"></div>
      </div>
      <div class="loading-text">加载中...</div>
    </div>
    
    <!-- 使用iframe直接嵌入PDF -->
    <iframe 
      v-if="!isLoading && !errorMessage && pdfUrl" 
      :src="pdfUrl" 
      class="pdf-iframe"
      frameborder="0"
      @load="iframeLoaded"
      @error="iframeError"
    ></iframe>
    
    <!-- 保留原始canvas渲染方式作为备选 -->
    <div v-if="useCanvas && !isLoading && !errorMessage" ref="pdfContainer" class="canvas-container">
      <canvas ref="pdfCanvas"></canvas>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'PdfViewer',
  props: {
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRoute()
    const pdfContainer = ref(null)
    const pdfCanvas = ref(null)
    const isLoading = ref(true)
    const errorMessage = ref('')
    const useCanvas = ref(false) // 默认使用iframe方式
    
    let pdfDoc = null
    
    // 获取URL参数中的PDF地址
    const getPdfUrl = () => {
      let url = props.pdfUrl || route.query.url || ''
      
      // 处理URL格式，移除可能的@前缀
      if (url.startsWith('@')) {
        url = url.substring(1)
      }
      
      return url
    }
    
    // iframe加载完成
    const iframeLoaded = () => {
      isLoading.value = false
    }
    
    // iframe加载错误
    const iframeError = () => {
      errorMessage.value = '无法加载PDF文档，尝试使用备选方式加载'
      useCanvas.value = true // 尝试使用canvas方式
      loadPdfWithCanvas()
    }
    
    // 使用canvas方式加载PDF
    const loadPdfWithCanvas = async () => {
      const url = getPdfUrl()
      
      if (!url) {
        errorMessage.value = '未提供PDF文件URL'
        isLoading.value = false
        return
      }
      
      isLoading.value = true
      errorMessage.value = ''
      
      try {
        // 导入PDF.js库
        const pdfjs = await import('pdfjs-dist')
        
        // 设置worker路径
        pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`
        
        // 加载PDF文档
        pdfDoc = await pdfjs.getDocument(url).promise
        
        // 渲染第一页
        renderPage(1)
        
        isLoading.value = false
      } catch (error) {
        console.error('加载PDF失败:', error)
        errorMessage.value = '无法加载PDF文档，请检查URL是否正确'
        isLoading.value = false
      }
    }
    
    // 渲染指定页面
    const renderPage = async (pageNum) => {
      if (!pdfDoc) return
      
      try {
        // 获取页面
        const page = await pdfDoc.getPage(pageNum)
        
        // 获取原始视口
        const viewport = page.getViewport({ scale: 1.0 })
        
        // 设置canvas尺寸
        const canvas = pdfCanvas.value
        const context = canvas.getContext('2d')
        canvas.height = viewport.height
        canvas.width = viewport.width
        
        // 渲染PDF页面到canvas
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        }
        
        await page.render(renderContext).promise
      } catch (error) {
        console.error('渲染PDF页面失败:', error)
        errorMessage.value = '渲染PDF页面失败'
      }
    }
    
    // 初始化
    const init = () => {
      isLoading.value = true
      errorMessage.value = ''
      
      // 使用iframe方式
      if (!useCanvas.value) {
        setTimeout(() => {
          if (isLoading.value) {
            isLoading.value = false
          }
        }, 3000) // 3秒后自动结束加载状态
      }
    }
    
    // 监听URL变化
    watch(() => getPdfUrl(), () => {
      init()
    })
    
    onMounted(() => {
      init()
    })
    
    return {
      pdfContainer,
      pdfCanvas,
      isLoading,
      errorMessage,
      useCanvas,
      pdfUrl: getPdfUrl(),
      iframeLoaded,
      iframeError
    }
  }
}
</script>

<style scoped>
.pdf-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.error-message {
  color: red;
  padding: 10px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 80%;
}

/* 加载动画容器 */
.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 加载动画 */
.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.spinner-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #FFCC00;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.spinner-circle-inner {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 3px solid transparent;
  border-top-color: #FF9900;
  border-radius: 50%;
  animation: spin 1s linear infinite reverse;
}

.loading-text {
  font-size: 16px;
  color: #333;
  margin-top: 5px;
}

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

.pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
}

.canvas-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
}

canvas {
  background: transparent;
}
</style> 