<template>
  <div class="invoice-preview">

    <!-- 使用Flex布局来居中显示 -->
    <div class="center-container">
      <!-- 下载PDF按钮 -->
      <div style="float:left;">
        <el-button type="primary" @click="download('pdf')" class="download-button">下载PDF</el-button>
        <el-button type="primary" @click="download('ofd')" class="download-button">下载OFD</el-button>
        <el-button type="primary" @click="download('xml')" class="download-button">下载XML</el-button>
      </div>

      <img :src="invoiceImageUrl" alt="发票图片损坏" class="invoice-image">

    </div>
  </div>
</template>

<script>
import {getFilePreview,downloadFile} from "@/api/sdInvoicefile/sdinvoicefile";

export default {
  data() {
    return {
      // 替换为你的发票图片base64
      invoiceImageUrl: '',
      id: ''
    };
  },
  mounted() {
    const id = this.$route.params.id;
    console.log('id:', id);
    this.filePreview(id);
  },
  methods: {
    filePreview(id){
      this.id = id;
      this.loading = true;
      getFilePreview(id).then(response => {
        // console.info("id="+response);
        this.invoiceImageUrl = response;
        // this.$forceUpdate();

      });
    },
    // 下载PDF按钮点击事件
    download(ty) {
      const param = {
         "ty": ty,
         "id": this.id
      }
      console.info("param=" + param)
      downloadFile(param).then(
         response =>{
           console.info("请求结束");
         }
      );

    },
  },
};
</script>

<style scoped>
.invoice-preview {
  width: 100%;
  height: 100vh; /* 设置容器的高度为整个视口高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.center-container {
  display: flex;
  flex-direction: column; /* 将子元素垂直排列 */
  justify-content: center;
  align-items: center;
  height: 80vh; /* 或者根据需要设置一个固定高度 */
  flex: 1; /* 占据剩余的垂直空间 */
}

.invoice-image {
  max-width: 90%;
  max-height: 90%;
}

.download-button {
  margin-bottom: 10px;
}
</style>
