<template>
  <div class="patent-pdf height_100">
    <div v-if="!sign">
      <el-button-group class="float_left margin-bottom_10" v-if="patent.pdf && patent.pdf.length>1">
        <el-button size="small" :type="pdfType === 2 ? 'primary' : ''" @click="handleSelect(2)">授权文档</el-button>
        <el-button size="small" :type="pdfType === 1 ? 'primary' : ''" @click="handleSelect(1)">公开文档</el-button>
      </el-button-group>
      <el-upload
          class="float_right"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChange"
          :multiple="false"
      >
        <el-button type="success" size="small" :loading="btnLoading" v-if="projectId" :disabled="!($permission('/workspace/details/updataInstruction') && $r(projectId,[1,2]))">上传文档</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
    </div>
    <iframe v-if="show" :src="src" frameborder="0" :height="height" width="100%"></iframe>
    <div v-else class="no-pdf-file">
      <span>暂无文档</span>
    </div>
  </div>
</template>

<script>
import { patentDetails } from './mixins';
export default {
  mixins: [patentDetails],
  props: ['patent', 'projectId','pdfType1','sign','patentNo'],
  components: {},
  data() {
    return {
      src: '',
      fullHeight: document.documentElement.clientHeight,
      height: 0,
      show: false,
      btnLoading: false,
      pdfType: this.pdfType1||2,
      pdf: null
    }
  },
  watch: {
    fullHeight() {
      if(this.projectId){
        this.refresh()
      }
    },
    patent() {
      if(this.projectId){
        this.refresh()
      }
      
    },
    patentId() {
      if(this.projectId){
        this.refresh()
      }
    },
    patentNo(){
      if(!this.projectId){
        this.getData()
      }
    }
  },
  created(){
    window.addEventListener('resize', this.handleResize)
  },
  mounted() {
    if(!this.projectId){
      if(this.patent.pdf && this.patent.pdf.length>0){
        this.show = false
        this.height = (this.fullHeight - 230) + 'px'
        var index = this.patent.pdf.findIndex(item => {
          return item.type == 2
        })
        if (index != -1) {
          this.pdfType = 2
        } else {
          this.pdfType = 1
        }
        this.getPDFSrc(this.pdfType)
        // let blob = this.base64ToBlob(this.patent.pdf[0])
        // this.$set(this,'src',URL.createObjectURL(blob))
        // // this.src = this.patent.pdf[0].url
        // this.$nextTick(() => {
        //   this.show = true
        // })
      }else{
        this.getData()
      }
      
    }else{
      this.refresh()
    }
  },
  methods: {
    getData(){
      if(this.patent.pdf && this.patent.pdf.length>0){
        return false
      }
      this.show  =false
      this.height = (this.fullHeight - 230) + 'px'
      var params = {
            patentCell:3,
            patentNo:this.patent.publicNo,
            appNo:this.patent.applicationNo,
          }
        this.$api.getPatentPart(params).then(response=>{
            if(response.code == 200){
              if(Object.keys(response.data).length == 0){
                return false
              }
              if(response.data.pdf.length==0){
                return false
              }
              this.$set(this.patent,'pdf',response.data.pdf)
              var index = this.patent.pdf.findIndex(item => {
                return item.type == 2
              })
              if (index != -1) {
                this.pdfType = 2
              } else {
                this.pdfType = 1
              }
              this.getPDFSrc(this.pdfType)
            }
        })
    },
    getPDFSrc(type) {
      let blob = this.base64ToBlob(this.patent.pdf.find(item => { return item.type == type }))
      this.$set(this, 'src', URL.createObjectURL(blob))
      this.$nextTick(() => {
        this.show = true
      })
    },
    base64ToBlob(row){
      var dataUrl = row.pictureStringData
      let bstr = window.atob(dataUrl)
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "application/pdf" });
    },
    handleSelect(type) {
      this.pdfType = type
      if(!this.projectId){
        this.show = false
        this.height = (this.fullHeight - 230) + 'px'
        this.getPDFSrc(type)
        return false
      }
      this.refresh()
    },
    handleChange(file, fileList) {
      if (file.name.split('.')[1].toLowerCase() !== 'pdf') {
        this.$message.error('请选择PDF格式文件')
        return false
      }
      let formData = new FormData()
      formData.append('file', file.raw)
      formData.append('type', this.pdfType)
      formData.append('patentNo', this.patent.patentNo)
      if (this.pdf) {
        formData.append('url', this.pdf.url)
      }
      this.btnLoading = true
      this.$api.editPatentInstruction(formData).then(response => {
        this.$message.success('操作成功')
        this.btnLoading = false
        this.$emit('refresh')
        this.refresh()
      }).catch(error => {
        this.btnLoading = false
      })
    },
    refresh() {
      this.show = false
      this.height = (this.fullHeight - 230) + 'px'
      this.pdf = this.patent.pdf.find(item => item.type === this.pdfType)
      if (this.pdf) {
        this.$api.getPatentInstructionFile({ patentNo: this.patent.patentNo, type: this.pdfType }).then(response => {
          this.src = '/pdfjs/web/viewer.html?file=' + encodeURIComponent(window.URL.createObjectURL(response))
          this.$nextTick(() => {
            this.show = true
          })
        }).catch(error => {
          this.$message.error('加载失败')
        })
      }
    },
    handleResize(event) {
      this.fullHeight = document.documentElement.clientHeight
    },
  }
}
</script>

<style lang="scss">
.patent-pdf {
  height: 100%;
  .no-pdf-file {
    float: left;
    text-align: center;
    width: 100%;
    background: #e3e2e2;
    height: calc(100% - 120px);
    padding-top: 50px;
    span {
      font-size: 50px;
    }
  }
}
</style>