<template>
  <div class="pdf-box">
    <iframe id="pdfIframe" :src="url" frameborder="0" />
    <!-- <div class="pdf-mark" @contextmenu="markClick" /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  created() {
    const { fileId, resource } = this.$route.query
    this.url = `${process.env.VUE_APP_BASE_API}/system/fileStorage/preview?fileId=${fileId}&resource=${resource}#toolbar=0&navpanes=0&scrollbar=0`
  },
  mounted() {
    setTimeout(() => {
      // const iframe = document.getElementById('pdfIframe')
      // const iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindo
      // console.log(iframeWin.document.getElementById('viewer'))
      // console.log(iframe.height = iframeWin.document.getElementById('viewer').scrollHeight
      // )
      // iframeWin.document.getElementById('viewer').addEventListener('contextmenu', function(event) {
      //   event.preventDefault()
      //   return false
      // })
    }, 1000)

    // const mask = document.querySelector('.pdf-mark')
    // mask.addEventListener('scroll', function(params) {
    //   iframe.scrollTop = mask.scrollTop
    // })
  },
  methods: {
    markClick() {
      console.log(213123123)
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-box {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
  .pdf-mark {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
    overflow: auto;
    // pointer-events: none; /* 防止遮罩阻止鼠标事件 */
  }
}
</style>
