<template>
  <a-modal :title="title" :visible="visible" @cancel="handleCancel" width="100%" :footer="null">
    <a-spin :spinning="loading" tip="加载中">
<!--      <div class="page-box">-->
<!--        <div class="option-list" v-if="ofdObj">-->
<!--          <div class="scale-icon" style="margin-left: 10px" @click="plus">-->
<!--            &lt;!&ndash; 放大 &ndash;&gt;-->
<!--            <a-icon type="plus-circle"/>-->
<!--          </div>-->
<!--          <div class="scale-icon" @click="minus">-->
<!--            &lt;!&ndash; 缩小 &ndash;&gt;-->
<!--            <a-icon type="minus-circle"/>-->
<!--          </div>-->
<!--          <div class="scale-icon">-->
<!--            &lt;!&ndash; 第一页 &ndash;&gt;-->
<!--            <a-icon type="step-backward" @click="firstPage"/>-->
<!--          </div>-->
<!--          <div class="scale-icon" @click="prePage">-->
<!--            &lt;!&ndash; 上一页 &ndash;&gt;-->
<!--            <a-icon type="caret-left"/>-->
<!--          </div>-->
<!--&lt;!&ndash;          <div class="scale-icon">&ndash;&gt;-->
<!--&lt;!&ndash;            &lt;!&ndash; 当前页码和总页数 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            {{ pageIndex }}/{{ pageCount }}&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--          <div class="scale-icon" @click="nextPage">-->
<!--            &lt;!&ndash; 下一页 &ndash;&gt;-->
<!--            <a-icon type="caret-right"/>-->
<!--          </div>-->
<!--          <div class="scale-icon" @click="lastPage">-->
<!--            &lt;!&ndash; 最后一页 &ndash;&gt;-->
<!--            <a-icon type="step-forward"/>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="modal-box" id="ofd-preview-box">
        <!-- 文件区域 -->
        <div class="main-section" :class="{ 'background-shadow': loadOverFlag }" id="content" ref="contentDiv"></div>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import {parseOfdDocument, renderOfd, renderOfdByScale, getPageScale, setPageScale} from 'ofd.js'

export default {
  name: 'OfdPreview',
  components: {},
  props: {
    title: {
      type: String,
      default: 'OFD文件预览',
    },
    fileUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ofdObj: null,
      pageIndex: 1,
      pageCount: 0,
      scale: 0,
      loading: false,
      visible: false,
      loadOverFlag: false,
      screenWidth: 1000,
    }
  },
  watch: {},
  computed: {},
  methods: {
    showModal() {
      this.visible = true
      this.$nextTick(() => {
        this.screenWidth = document.getElementById('ofd-preview-box').getBoundingClientRect().width - 30
        this.getOfdDocumentObj(this.fileUrl, this.screenWidth)
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    getOfdDocumentObj(file, screenWidth) {
      let that = this
      this.loading = true
      parseOfdDocument({
        ofd: file,
        success(res) {
          that.ofdObj = res[0]
          that.pageCount = res[0].pages.length
          const divs = renderOfd(screenWidth, res[0])
          that.displayOfdDiv(divs)
          that.loadOverFlag = true
          that.loading = false
        },
        fail(error) {
          that.loading = false
          console.log('OFD打开失败')
        },
      })
    },
    displayOfdDiv(divs) {
      this.scale = getPageScale()
      let contentDiv = document.getElementById('content')
      contentDiv.innerHTML = ''
      for (const div of divs) {
        contentDiv.appendChild(div)
      }
    },
    plus() {
      setPageScale(++this.scale)
      const divs = renderOfdByScale(this.ofdObj)
      this.displayOfdDiv(divs)
    },
    minus() {
      setPageScale(--this.scale)
      const divs = renderOfdByScale(this.ofdObj)
      this.displayOfdDiv(divs)
    },
    prePage() {
      let contentDiv = document.getElementById('content')
      let ele = contentDiv.children.item(this.pageIndex - 2)
      if (ele) {
        ele.scrollIntoView(true)
        this.pageIndex = this.pageIndex - 1
      }
    },
    firstPage() {
      let contentDiv = document.getElementById('content')
      let ele = contentDiv.firstElementChild
      if (ele) {
        ele.scrollIntoView(true)
        this.pageIndex = 1
      }
    },
    nextPage() {
      let contentDiv = document.getElementById('content')
      let ele = contentDiv.children.item(this.pageIndex)
      if (ele) {
        ele.scrollIntoView(true)
        ++this.pageIndex
      }
    },
    lastPage() {
      let contentDiv = document.getElementById('content')
      let ele = contentDiv.lastElementChild
      if (ele) {
        ele.scrollIntoView(true)
        this.pageIndex = contentDiv.childElementCount
      }
    },
  },
  created() {
    this.showModal();
  },
  mounted() {
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
}

.modal-box {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.main-section {
  width: 100%;
  //padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.background-shadow {
  background: #808080;
}

.page-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: 15px;

  .option-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

.scale-icon {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 28px;
  border-radius: 1px;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  text-align: center;
  padding: 2px;
}

.scale-icon :hover {
  color: #1890ff;
}

.ant-spin-nested-loading > div > .ant-spin {
  max-height: auto !important;
}
</style>