<template>
  <el-dialog
    class="pdf-dialog"
    :visible.sync="dialogConfig.show"
    top="0"
    :modal="false"
    width="100%"
    title="PDF预览"
    center
  >
    <iframe :src="url" frameborder="0"></iframe>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'PreviewPDF',
  directives: { elDragDialog },
  props: {
    dialogConfig: {
      type: Object,
      default: () => {
        return {
          show: false,
          url: '',
        }
      },
    },
  },
  data() {
    return {
      // url:
      //   '/static/pdfjs-3.0.279-dist/web/viewer.html?file=' +
      //   process.env.VUE_APP_BASE_API +
      //   '/Resource/EmergencyResponsePlan/2022/11/21/6cb9f9ce94014fbf9ba2490d0d96ad4c.pdf',
    }
  },
  computed: {
    url() {
      return (
        '/static/pdfjs-3.1.81-legacy-dist/web/viewer.html?file=' +
        encodeURIComponent(process.env.VUE_APP_BASE_API + this.dialogConfig.url)
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.pdf-dialog {
  // background: #000;
  height: 100%;
  overflow: auto;

  ::v-deep .el-dialog {
    height: 100%;
    .el-dialog__header {
      height: 40px;
      line-height: 40px;
      padding: 0;
      .el-dialog__headerbtn {
        top: 12px;
      }
    }
    .el-dialog__body {
      background: rgba(0, 0, 0, 0.3);
      height: calc(100% - 43px);
      padding: 0;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
