<template>
    <div>
        <div class="head-class">
            <!--download 属性值为文件名  为空字符串默认为当前文件文件名-->
            <a class="down-pdf-class" v-show="showPDF" :href="pdfUrl" download="">下载PDF文件</a>
            <a class="down-ofd-class" v-show="showOFD" :href="ofdUrl" download="">下载OFD文件</a>
        </div>
       

        <pdf class="show-pdf-class" v-for="i in numPages" :key="i"  :src="srcUrl" :page="i"  >
        
        </pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import { networkUrl } from '@/data/global_configuration'
import { GetInvoiceFileUrl } from "@/api/invoice_info";
//  var loadingTask = pdf.createLoadingTask('http://localhost:8002/proxytemppath/test.pdf')
export default {
  components: {
    pdf
  },
  props:{
      invoiceReqFlowNo:{
          type:String,
          default:null
      }
  },
  data() {
        return {
            pdfUrl:"",
            ofdUrl:"",
            ofdFileName:"",
            pdfFileName:"",
            showOFD:false,
            showPDF:false,
            srcUrl:"",
			numPages:1,
            loadedRatio: 0
        }
    },
    mounted() {
 
        this.getFileUrl()
    },
    methods:{
        
        getFileUrl() {
            let _this=this
            _this.loading = true;
            GetInvoiceFileUrl(this.invoiceReqFlowNo).then((res) => {
                _this.loading = false
                // _this.pdfFileName = res.data.pdfFileName
                // _this.ofdFileName = res.data.ofdFileName
                _this.showPDF =  !!res.data.pdfUrl&&res.data.pdfUrl!=""
                _this.showOFD =  !!res.data.ofdUrl&&res.data.ofdUrl!=""
               
                

                if(_this.showPDF){
                     _this.pdfUrl = res.data.pdfUrl.replace("https://app.taxbk.cn:9443",networkUrl)
                }
                
                if(_this.showOFD){
                    _this.ofdUrl = res.data.ofdUrl.replace("https://app.taxbk.cn:9443",networkUrl)
                }
            }).then(()=>{
                var loadingTask = pdf.createLoadingTask(_this.pdfUrl,{withCredentials: false})
				loadingTask.promise.then(pdf => {
					_this.srcUrl = loadingTask
					_this.numPages = pdf.numPages
				}).catch((err) => {
					 _this.$message.error('pdf加载失败')
				})
            }).catch((err) => {
                _this.loading = false;
                _this.$message.error(err);
            });

				
			},
    }



}
</script>



<style scoped>
    .head-class{
        position: fixed;
        z-index: 1;
        top: 0px;
        
        text-align: right;
        padding: 10px 70px;
        width: 100%;
        background-color: gainsboro;
    }

    .down-pdf-class{
        margin-right: 30px;
        font-size: 1.8rem;
    }
    .down-ofd-class{
        
        font-size: 1.8rem;
    }
    .show-pdf-class{
        margin: 4rem 20px 20px 20px;
    }
</style>