<!--
  @description:
  @Modifier: zyy
  @routerPath:
  @date: 2021-6-21
-->
<template>
  <div>
    <pdf :pdf-url="pdfUrl" :height="height" />
    <div v-show="fileList.length>0" class="view mb16">
      <div class="page-title">
        合同附件
      </div>
      <downloadFile ref="downloadFile" :file-list="fileList" />
    </div>
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button @click="prevStep">
          上一页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* api*/
import { readImageRoot } from '@api/common/uploadCenter'
import { getFileDetail } from '@/api/common/uploadCenter'
/* 混合开发模式-公用方法 */
/* 组件*/
import downloadFile from '@comp/common/updownload/downloadFile' // 获取附件信息 下载组件
import pdf from '@comp/common/pdf/pdf'
export default {
  name: 'PurchaseAgreementPdfDetail',
  components: {
    downloadFile, // 文件下载
    pdf
  },
  data() {
    return {
      // 合同类容
      contractData1: {
        bizId: '', // 业务主键Id
        fileType: 'contract_template_pdf_content'// 文件类型
      },
      // 合同附件
      contractData2: {
        bizId: '', // 业务主键Id
        fileType: 'contract_template_pdf_attachment'// 文件类型
      },
      contractSource: '',
      id: '', // 合同id
      readImageUrl: readImageRoot, // 预览图片
      pdfUrl: '',
      fileList: [], // 附件列表
      height: 0 // pdf高度
    }
  },
  created() {
    this.contractData1.bizId = this.$route.query.id
    this.contractData2.bizId = this.$route.query.id
    this.id = this.$route.query.id
    this.contractSource = this.$route.query.contractSource
    const deviceHeight = document.documentElement.clientHeight
    this.height = deviceHeight - 342
    // 获取内容pdf
    this.getBulletinContentPdf()
  },
  methods: {
    // 获取内容
    getBulletinContentPdf() {
      getFileDetail(this.contractData1).then(response => {
        const url = this.readImageUrl + response.data[0].path
        this.pdfUrl = encodeURIComponent(url)
        // 获取附件
        this.$refs.downloadFile.getFile(this.contractData2)
      }).catch(() => {
      })
    },
    // 上一步
    prevStep() {
      this.$router.push({
        name: 'PurchaseAgreementDetail',
        params: {
          id: this.id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
