<template>
  <div class="pdf-viewer-container">
    <!-- 使用v-for渲染所有页面 -->
    <div
      v-for="n in numPages"
      :key="n"
      class="pdf-page-wrapper"
    >
      <pdf-page
        :page="n"
        :src="pdfUrl"
        :scale="scale"
      />
    </div>

    <!-- 分页控制器 -->
    <div class="pdf-controls">
      <el-button-group>
        <el-button
          size="small"
          @click="prevPage"
          :disabled="currentPage === 1"
        >
          <i class="el-icon-arrow-left"/> 上一页
        </el-button>
        <el-button
          size="small"
          @click="nextPage"
          :disabled="currentPage === numPages"
        >
          下一页 <i class="el-icon-arrow-right"/>
        </el-button>
      </el-button-group>
      <span class="page-counter">第 {{ currentPage }} 页 / 共 {{ numPages }} 页</span>
      <div class="download-button">
        <el-button
          type="primary"
          size="small"
          @click="handleDownloadPdf"
        >
          <i class="el-icon-download"/>
          下载 PDF
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleDownloadOLd"
        >
          <i class="el-icon-download"/>
          下载源文件
        </el-button>
      </div>

    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import {Loading} from 'element-ui'

export default {
  components: {
    'pdf-page': pdf
  },
  props: {
    url: {
      type: String,
      required: true
    },
    webUrl: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      numPages: 0,
      currentPage: 1,
      scale: 1.3,
      pdfLoadingTask: null,
      loadingInstance: null
    }
  },
  computed: {
    pdfUrl() {
      return this.url.includes('?')
        ? `${this.url}&response-content-disposition=inline`
        : `${this.url}?response-content-disposition=inline`
    }
  },
  mounted() {
    this.initPDF()
  },
  beforeDestroy() {
    if (this.pdfLoadingTask) {
      this.pdfLoadingTask.destroy()
    }
  },
  methods: {
    async initPDF() {
      this.loadingInstance = Loading.service({
        target: this.$el,
        text: 'PDF加载中...'
      })

      try {
        this.pdfLoadingTask = pdf.createLoadingTask(this.pdfUrl)
        const pdfDoc = await this.pdfLoadingTask.promise
        this.numPages = pdfDoc.numPages
      } catch (e) {
        console.error('PDF加载失败:', e)
        this.$message.error('PDF加载失败: ' + (e.message || '未知错误'))
      } finally {
        this.loadingInstance.close()
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.scrollToPage()
      }
    },
    nextPage() {
      if (this.currentPage < this.numPages) {
        this.currentPage++
        this.scrollToPage()
      }
    },
    goToPage(page) {
      this.currentPage = page
      this.scrollToPage()
    },
    scrollToPage() {
      const pageElement = this.$el.querySelector(`.pdf-page-wrapper:nth-child(${this.currentPage})`)
      if (pageElement) {
        pageElement.scrollIntoView({behavior: 'smooth'})
      }
    },
    handleDownloadPdf() {
      window.open(this.url, '_blank')
    },
    handleDownloadOLd() {
      window.open(this.webUrl, '_blank')
    }
  }
}
</script>

<style scoped>
.pdf-viewer-container {
  height: 100%;
  padding-bottom: 0px; /* 为控制栏留出空间 */
}

.pdf-page-wrapper {
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background: white;
}

.pdf-controls {
  position: sticky;
  width: 100%;
  bottom: -18px;
  left: 0;
  right: 0;
  background: white;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.page-counter {
  margin-left: 15px;
  font-size: 14px;
  color: #666;
}
.download-button {
  margin-left: auto;
}
</style>
