<template>
  <div class="pdf-box">
      <div class="pdf-tab">
        <div style="height: 500px;">
          <div style="height: 460px;">
            <pdf
                :src="pdfData"
                :page="pageNum"
                @num-pages="pageCount = $event"
                :style="{ height: customHeight + 'px', width: width + '%' }"
                @link-clicked="page = $event"
            />
          </div>
          <div class="pdf-tab-button" style="background-color: #FFFFFF;height: 50px;width: 560px;position: fixed">
            <div class="btn-def btn-pre" @click.stop="prePage" style="cursor: pointer;margin-right: 14px;">上一页</div>
            <div class="btn-def btn-next" @click.stop="nextPage" style="cursor: pointer;margin-right: 14px;">下一页</div>
            <div class="btn-def btn-scaled" @click.stop="scaleD" style="cursor: pointer;margin-right: 14px;">放大</div>
            <div class="btn-def btn-scalex" @click.stop="scaleX" style="cursor: pointer;">缩小</div>
            <div class="page-size">{{ pageNum }}/{{ pageCount }}</div>

            <el-checkbox v-if="parentUrl ===undefined" v-model="cancelTip" @change="changeTip">取消提醒</el-checkbox>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
import axios from 'axios'
import {baseUrl, downloadQualificationManagementMeasures} from "@/api/userMG";


export default {
  components: { pdf },
  data() {
    return {
      pdfData: null, // 存储 PDF 文件数据
      customHeight: 500,
      width: 100,
      pageNum: 1,
      pageCount: 1,
      cancelTip: false,
    }
  },
  async created() {
    // 在组件创建时获取 PDF 文件
    await this.fetchPdfWithAuth();
  },
  props: ["parentUrl", "params"],
  methods: {
    changeTip() {
      this.$emit('changeTip', this.cancelTip);
    },
    //上一页
    prePage() {
      var p = this.pageNum;
      if(p > 1){
        p = p - 1;
      }
      // p = p > 1 ? p - 1 : this.pageCount;
      this.pageNum = p;
    },
    // 下一页
    nextPage() {
      var p = this.pageNum;
      if(p < this.pageCount){
        p = p + 1;
      }
      this.pageNum = p;
    },
    // 缩放
    scaleD() {
      this.width += 5;
    },
    // 缩小
    scaleX() {
      if(this.width > 100){
        this.width -= 5;
      }
    },
    async fetchPdfWithAuth() {
      const token = localStorage.getItem('logintoken'); // 你的 Token
      let url = baseUrl + '/qualifications-service/internal-informations/downloadQualificationManagementMeasures'; // PDF 文件的 URL
      let params = {}
      if (this.parentUrl !== undefined) {
        url = baseUrl + this.parentUrl;
        params = this.params;
      }
      console.log(url)
      try {
        // 使用 axios 发送请求
        const response = await axios.post(url,params, {
          headers: {
            Authorization: token // 添加 Authorization 头部
          },
          responseType: 'blob' // 确保响应类型是 Blob
        });
        // 将 Blob 转换为 Object URL
        this.pdfData = URL.createObjectURL(response.data);
      } catch (error) {
        console.error('Error fetching PDF:', error);
      }
    }
  }
}
</script>


<style lang="scss" scoped>
.pdf-box {
  width: 100%;
  height: 800px;
  .pdf-tab {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pdf-tab-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn-def {
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: orangered;
        border-color: orangered;
        border-radius: 5px;
        font-size: 18px;
      }
    }

    .page-size {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
  }
}
</style>
