<template>
  <div ref="studyDocument" class="study-document">
    <div ref="pdfContent" class="pdf-content">
      <pdf
        ref="pdfViewer"
        :page="pageNumber"
        :src="pdfUrl"
        @error="pdfError"
        @loaded="pdfLoaded"
        @num-pages="totalPagesChanged"
      />
    </div>
    <div
      :class="[
        'bottom-content',
        isFullscreenRequested ? 'bottom-content-screen' : ''
      ]"
    >
      当前页：<span class="blue-text">{{ pageNumber || 0 }}页</span>，
      总页数：<span class="blue-text">{{ totalPages || 0 }}页</span>，
    </div>
    <div class="btn-content">
      <el-button
        :disabled="pageNumber === 1"
        circle
        icon="el-icon-arrow-up"
        title="上一页"
        type="primary"
        @click="goToPreviousPage"
      />
      <el-button
        :disabled="pageNumber === totalPages"
        circle
        icon="el-icon-arrow-down"
        title="下一页"
        type="primary"
        @click="goToNextPage"
      />
      <el-button
        :plain="!isFullscreenRequested"
        :title="isFullscreenRequested ? '取消全屏' : '全屏'"
        circle
        icon="el-icon-full-screen"
        type="primary"
        @click="toggleFullScreen"
      />
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import screenfull from 'screenfull'

export default {
  name: 'PdfPreview',
  components: {pdf},
  props: {
    fileUrl: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      isFullscreenRequested: false, // 记录全屏请求的状态
      pageNumber: 1,
      totalPages: 0
    }
  },
  computed: {
    actionUrl: _ => window.context.portal,
    pdfUrl() {
      return this.actionUrl + this.fileUrl
    }
  },
  mounted() {
    // 添加全屏状态变化监听器、键盘事件监听器和禁用右键菜单
    if (screenfull.isEnabled) {
      screenfull.on('change', this.handleFullScreenChange)
    }
  },
  methods: {
    totalPagesChanged(numPages) {
      this.totalPages = numPages
    },

    goToPreviousPage() {
      if (this.pageNumber > 1) {
        this.pageNumber--
        this.$refs.pdfContent.scrollTop = 0
      }
    },

    goToNextPage() {
      if (this.pageNumber < this.totalPages) {
        this.pageNumber++
        this.$refs.pdfContent.scrollTop = 0
      }
    },

    // pdf错误
    pdfError() {
      this.$emit('onError')
      this.pageNumber = 1
    },

    // pdf加载中
    pdfLoaded() {
      this.pageNumber = 1
      this.$emit('onLoad')
    },

    // 根据参数请求或退出全屏，默认请求全屏
    toggleFullScreen() {
      this.isFullscreenRequested = !this.isFullscreenRequested
      if (screenfull.isEnabled) {
        if (this.isFullscreenRequested) {
          screenfull.request(this.$refs.studyDocument)
        } else {
          screenfull.exit()
        }
      }
    },

    // 全屏改变事件
    handleFullScreenChange() {
      this.isFullscreenRequested = screenfull.isFullscreen
    }
  },
  beforeDestroy() {
    screenfull.off('change', this.handleFullScreenChange)
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/element-variables';

.study-document {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  position: relative;

  .pdf-content {
    width: 100%;
    flex: 1;
    padding: 0 25%;
    box-sizing: border-box;
    overflow: auto;
    background: $--color-text-primary;

    ::v-deep canvas {
      margin: 50px 0;
    }
  }

  .bottom-content {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1.5;
    margin-bottom: 5px;

    .blue-text {
      color: $--color-primary;
      font-size: 16px;
      font-weight: bold;
      vertical-align: middle;
    }
  }

  .btn-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    top: 40%;
    transform: translateY(-50%);
    right: 2%;

    ::v-deep .el-button {
      margin: 0;
      width: 50px;
      height: 50px;
      padding: 0;

      i {
        font-size: 24px;
      }
    }
  }
}
</style>
