<template>
  <div>
    <el-dialog
      custom-class="pdfDialog"
      :title="''"
      :visible.sync="showPdf"
      :close-on-click-modal="true"
      :close-on-press-escape="false"
      :show-close="true"
      width="70%"
      :destroy-on-close="true"
      top="10vh"
    >
      <div class="innerBody">
        <div class="title">{{ curPdf.articleTitle }}</div>
        <div class="refuteList">
          <!-- <pdf :src="pdfSrc"></pdf> -->
          <pdf-view ref="pdfView" :pdf-src="pdfSrc"></pdf-view>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PdfView from "../PdfView/index"
export default {
  components: { PdfView },
  props: {
    curPdf: {
      type: Object,
    },
    pdfSrc: String,
  },
  data() {
    return {
      showPdf: false,
    }
  },
  watch: {
    showPdf(v) {
      if (v) {
        setTimeout(() => {
          this.$refs.pdfView.loadPDF()
        }, 250)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.innerBody {
  padding: 0 60px 40px;
  .title {
    font-size: 24px;
    font-family: AlibabaPuHuiTiM;
    color: #333333;
    text-align: center;
    margin-bottom: 30px;
  }
  .refuteList {
    height: 600px;
    overflow: auto;
  }
}
</style>
<style lang="scss">
.pdfDialog .el-dialog__header {
  // display: none;
  padding: 0px !important;
}
</style>