<template>
  <el-dialog
    width="60%"
    title="应用说明"
    :visible.sync="dialogVisible"
    append-to-body
  >
    <div v-if="pdfSrc" style="height: 700px; overflow: auto">
      <pdf
        v-for="i in numPages"
        :key="i"
        :src="pdfSrc"
        :page="i"
        style="width: 100%"
      ></pdf>
    </div>
    <div v-if="imageSrc" style="height: 700px; overflow: auto; padding: 0 24px">
      <img style="width: 100%" :src="imageSrc" />
    </div>
  </el-dialog>
</template>

<script>
  import pdf from 'vue-pdf'
  export default {
    name: 'AppInfo',
    components: {
      pdf,
    },
    data() {
      return {
        dialogVisible: false,
        pdfSrc: '',
        imageSrc: '',
        numPages: null,
      }
    },
    methods: {
      open(info) {
        let _this = this
        this.pdfSrc = ''
        this.imageSrc = ''
        this.$requestConfig
          .getFileById(
            `${window.context.portal}/system/file/v1/getFileBytesById?fileId=${info.fileId}`,
            { responseType: 'arraybuffer' }
          )
          .then((response) => {
            if (info.fileName.endsWith('.pdf')) {
              _this.pdfSrc =
                window.URL.createObjectURL(
                  new Blob([response.data], { type: 'application/pdf' })
                ) + '#toolbar=0&view=FitH,top'
              let loadingTask = pdf.createLoadingTask(_this.pdfSrc)
              loadingTask.promise.then((pdf) => {
                this.numPages = pdf.numPages
              })
            } else {
              _this.imageSrc = window.URL.createObjectURL(
                new Blob([response.data], { type: 'application/pdf' })
              )
            }
          })
        this.dialogVisible = true
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-dialog__body {
      padding: 24px 0;
      border-top: none;
    }
  }
</style>
