<template>
  <!-- 查看影像dialog组件 -->
  <!-- <div style="background-color: white; height: 350px" class="center_father">
    <div class="animate__animated animate__fadeInDown">
      <svg-icon icon-class="empty-data" class="empty" />
      <div style="display: flex; justify-content: center">暂无影像</div>
    </div>
  </div> -->
  <div>
    <!-- <template>
      <iframe
        class="prism-player"
        :src="pdfUrl"
        width="1000px"
        height="600px"
      ></iframe>
    </template> -->
    <div
      v-loading="pdf_show == '加载中'"
      v-if="pdf_show!=='开具完成'"
      style="background-color: white; height: 350px"
      class="center_father"
    >
      <div class="animate__animated animate__fadeInDown">
        <svg-icon icon-class="empty-data" class="empty" />
        <div style="display: flex; justify-content: center">暂无影像</div>
      </div>
    </div>
    <div v-if="pdf_show == '开具完成'">
      <pdf
        :src="pdfUrl"
        v-for="i in numPages"
        :key="i"
        :page="i"
      ></pdf>
    </div>
  </div>
</template>

<script>
import {
  getBswj // 查看影像pdf
} from '@/api/sdspywbl/public'

import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  props: {
    sqdh: Object
  },
  created() {},
  data() {
    return { pdf_show: '加载中', pdfUrl: '', numPages: 1 }
  },
  mounted() {
    this.loadPdf()
  },
  methods: {
    ref_grandSon_reflash(sqdh) { // dialog打开不刷新，强制调用接口
      this.pdfUrl = ''
      this.pdf_show = '加载中'
      getBswj({
        sqdh: sqdh,
        fphm: '',
        wjlx: 'pdf'
      }).then((res) => {
        if (res.headers.isblob == 'true' || res.headers.isblob) {
          let url = window.URL.createObjectURL(new Blob([res.data]))
          this.pdfUrl = pdf.createLoadingTask(url);
          this.pdf_show = '开具完成'
          this.setPage();
        } else {
          this.pdf_show = '暂无影像'
        }
      })
    },
    loadPdf() {
      this.pdfUrl = ''
      this.pdf_show = '加载中'
      getBswj({
        sqdh: this.sqdh.value,
        fphm: '',
        wjlx: 'pdf'
      }).then((res) => {
        if (res.headers.isblob == 'true' || res.headers.isblob) {
          let url = window.URL.createObjectURL(new Blob([res.data]))
          this.pdfUrl = pdf.createLoadingTask(url);
          this.pdf_show = '开具完成'
          this.setPage();
        } else {
          this.pdf_show = '暂无影像'
        }
      })
    },
    setPage(){
      this.pdfUrl.promise.then(pdf => {
        console.log(pdf)
        this.numPages = pdf.numPages;
      }).catch((e)=>{
        console.log(e)
      });
    }
  }
}
</script>

<style scoped></style>

<template>
  <!-- 查看影像dialog组件 -->
  <!-- <div style="background-color: white; height: 350px" class="center_father">
    <div class="animate__animated animate__fadeInDown">
      <svg-icon icon-class="empty-data" class="empty" />
      <div style="display: flex; justify-content: center">暂无影像</div>
    </div>
  </div> -->
  <div>
    <!-- <template>
      <iframe
        class="prism-player"
        :src="pdfUrl"
        width="1000px"
        height="600px"
      ></iframe>
    </template> -->
    <div
      v-loading="pdf_show == '加载中'"
      v-if="pdf_show!=='开具完成'"
      style="background-color: white; height: 350px"
      class="center_father"
    >
      <div class="animate__animated animate__fadeInDown">
        <svg-icon icon-class="empty-data" class="empty" />
        <div style="display: flex; justify-content: center">暂无影像</div>
      </div>
    </div>
    <div v-if="pdf_show == '开具完成'">
      <pdf
        :src="pdfUrl"
        v-for="i in numPages"
        :key="i"
        :page="i"
      ></pdf>
    </div>
  </div>
</template>

<script>
import {
  getBswj // 查看影像pdf
} from '@/api/sdspywbl/public'

import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  props: {
    sqdh: Object
  },
  created() {},
  data() {
    return { pdf_show: '加载中', pdfUrl: '', numPages: 1 }
  },
  mounted() {
    this.loadPdf()
  },
  methods: {
    ref_grandSon_reflash(sqdh) { // dialog打开不刷新，强制调用接口
      this.pdfUrl = ''
      this.pdf_show = '加载中'
      getBswj({
        sqdh: sqdh,
        fphm: '',
        wjlx: 'pdf'
      }).then((res) => {
        if (res.headers.isblob == 'true' || res.headers.isblob) {
          let url = window.URL.createObjectURL(new Blob([res.data]))
          this.pdfUrl = pdf.createLoadingTask(url);
          this.pdf_show = '开具完成'
          this.setPage();
        } else {
          this.pdf_show = '暂无影像'
        }
      })
    },
    loadPdf() {
      this.pdfUrl = ''
      this.pdf_show = '加载中'
      getBswj({
        sqdh: this.sqdh.value,
        fphm: '',
        wjlx: 'pdf'
      }).then((res) => {
        if (res.headers.isblob == 'true' || res.headers.isblob) {
          let url = window.URL.createObjectURL(new Blob([res.data]))
          this.pdfUrl = pdf.createLoadingTask(url);
          this.pdf_show = '开具完成'
          this.setPage();
        } else {
          this.pdf_show = '暂无影像'
        }
      })
    },
    setPage(){
      this.pdfUrl.promise.then(pdf => {
        console.log(pdf)
        this.numPages = pdf.numPages;
      }).catch((e)=>{
        console.log(e)
      });
    }
  }
}
</script>

<style scoped></style>