<template>
  <div>
    <el-dialog
      custom-class="pdfDialog"
      :title="''"
      :width="dWidth + 'px'"
      :visible.sync="showPdf"
      :close-on-click-modal="true"
      :close-on-press-escape="false"
      :show-close="true"
      :destroy-on-close="true"
      top="2vh"
    >
      <div class="innerBody">
        <div class="title">{{ curPdf.articleTitle }}</div>
        <div class="refuteList">
          <!-- <pdf :src="pdfSrc"></pdf> -->
          <pdf-view ref="pdfView" :pdfUrl="pdfSrc" @scale="setScale"></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,
      width: 750,
      dWidth: 750,
    }
  },
  methods: {
    setScale(val) {
      console.log(val)
      this.dWidth = this.width * (val / 100)
    },
  },
  watch: {
    showPdf(v) {
      if (v) {
        setTimeout(() => {
          this.$refs.pdfView.loadPDF()
        }, 250)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.innerBody {
  padding: 0 50px 0px;
  // width: 790px;
  // height: 882px;
  .title {
    font-size: 24px;
    font-family: AlibabaPuHuiTiM;
    color: #333333;
    text-align: center;
    margin-bottom: 0px;
  }
  .refuteList {
    // height: 600px;
    overflow: auto;
  }
}
</style>
<style lang="scss">
.pdfDialog {
  max-height: 958px;
  .el-dialog__header {
    // display: none;
    padding: 0px !important;
  }
}
</style>