<script setup lang="ts">
import {renderAsync,renderDocument} from 'docx-preview'; 
import { ref } from "vue";
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {queryFileFlowRepTemplateApi,exportTemplateApi} from '@/api/reporting/RepTemplate/RepTemplate';

const route = useRoute();
// 也可以直接是在线地址
//获取当前文件的信息
const pageQuery = ref(route || null); 
const fileData = pageQuery.value?.query?.fileData;
//是否渲染完成
const downLoadErrorMsg = {
  "1001":"预览失败,文件路径不存在",
  "1002":"预览失败,未找到文件信息",
  "1003":"预览失败,请联系管理员",
}
const docxContainer = ref(null);


// 模拟获取 DOCX 文件的 ArrayBuffer
const fetchDocFile = async () => {
  // 这里假设你有一个 API 可以返回 DOCX 文件的 ArrayBuffer
  const response = await queryFileFlowRepTemplateApi(fileData);
    console.log(response,"response文件流信息");
    const { data, headers } = response;
      if(headers['status'] == 500){// 说明此时下载文件有错误，需要获取WARN和ERROR的值
        const code = headers['error']?headers['error'].substring(headers['error'].length-4):'1003';
        console.log(code)
        switch(code){
          case "1001":
          case "1002":
            ElMessage.error(downLoadErrorMsg[code]);
            break;
          default:
            ElMessage.error(downLoadErrorMsg['1003']);
            break;
        }
      return;
    }
    const arrayBuffer = await new File([data], 'document.docx', { type: data.type }).arrayBuffer();
    return arrayBuffer;
  };

// 过滤空页
const filterEmptyPages = (pages) => {
  console.log(pages,"获取到的pages");
  return pages.filter(page => {
    // 确保 page 是一个 DOM 元素并且有 textContent 属性
    if (page && page.textContent) {
      return page.textContent.trim() !== '';
    }
    return false;
  });
};

// 显示页码
const addPageNumbers = (pages) => {
  pages.forEach((page, index) => {
    const pageNumberElement = document.createElement('div');
    pageNumberElement.className = 'page-number';
    pageNumberElement.textContent = `第 ${index + 1} 页`;
    page.appendChild(pageNumberElement);
  });
};
// 调整图片和文字的 CSS 样式
const adjustStyles = (container: HTMLElement) => {
  // 为图片设置 z-index，确保图片不会遮挡文字
  container.querySelectorAll('img').forEach(img => {
    img.style.position = 'relative';
    img.style.zIndex = '1';
    // img.style.top = '-30px';
  });

  // 为文字设置 z-index，确保文字在图片之上
  container.querySelectorAll('p, span, div').forEach(textElement => {
    textElement.style.position = 'relative';
    textElement.style.zIndex = '2';
  });
};
//下载文件
const downloadFile = () => {
  exportTemplateApi({pId:fileData});
};

/**
 * 异步函数用于获取并处理DOC文件流
 * 此函数首先调用API获取DOC文件流，然后根据响应头处理可能的错误情况
 * 如果文件流有效，它将被转换为ArrayBuffer类型，并用于渲染文档
 */
 const init = async ()=>{  
  try {
    // 假设你已经有一个方法来获取 DOCX 文件的 ArrayBuffer
    const arrayBuffer = await fetchDocFile();
    // 假设你有一个API可以返回DOC文件流  
    if (!(arrayBuffer instanceof ArrayBuffer)) {
      throw new Error('Invalid arrayBuffer type');
    }
    // 渲染 DOCX 文件
    const pages = await renderAsync(arrayBuffer, docxContainer.value);
    adjustStyles(docxContainer.value);
    // 确保 pages 是一个数组
    const pagesArray = Array.isArray(pages) ? pages : [pages];

    // 过滤空页
    const filteredPages = filterEmptyPages(pagesArray);

    // 显示页码
    addPageNumbers(filteredPages);
  } catch (error) {
    console.error('Error rendering DOCX file:', error);
  }
} 
init();
</script>
 

<template>
  <div class="wrap">
    <div class="fixedToolBar">
      <!-- 其中包含的功能有分页，页数跳转，文件下载 -->
      <i @click="downloadFile" class="fa fa-download cursor-pointer download" hover-color="var(--el-color-primary)"></i>
    </div>
    <div id="docx-container" ref="docxContainer"></div>
  </div>
</template>

<style scoped>
.fixedToolBar{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:50px;
    line-height:50px;
    background-color: #635f5f;
    color:#fff;
    z-index:999;
  }
  .download{
    position: absolute;
    font-size:1.2rem;
    top:15px;
    right:15px;
  }
  #docx-container {
    height: 100vh;
    overflow: auto;
    background-color: #fff;
    padding:50px;
  }
</style>


