<template>
  <div class="document-viewer">
    <div class="mask"></div>
    <div ref="containerRef" class="container" :style="{ width: props.width + 'px' }">
      <div class="top" ref="topRef">
        <span v-show="props.fileName">{{ props.fileName }}</span>
        <span class="close">
          <el-icon @click="emit('closeViewer')">
            <Close />
          </el-icon>
        </span>
      </div>
      <VueOfficeDocx v-if="props.fileType === 'docx'" :src="props.fileUrl" style="height: auto;"
        @rendered="renderedHandler" @error="errorHandler" />
      <!-- <VueOfficePdf v-else-if="props.fileType === 'pdf'" :src="props.fileUrl" style="height: auto;"
        @rendered="renderedHandler" @error="errorHandler" /> -->
      <PdfViewer v-else-if="props.fileType === 'pdf'" :src="props.fileUrl" :parentHeight="containerSize.height" />
      <VueOfficePptx v-else-if="props.fileType === 'pptx'" :src="props.fileUrl" style="height: auto;"
        @rendered="renderedHandler" @error="errorHandler" />
      <MarkdownViewer v-else-if="props.fileType === 'md'" :src="props.fileUrl" />
      <TextViewer v-else-if="props.fileType === 'txt'" :src="props.fileUrl" />
      <VueOfficeExcel v-else-if="props.fileType === 'xls' || props.fileType === 'xlsx'" :src="props.fileUrl"
        :options="excelOptions" style="height: auto;" @rendered="renderedHandler" @error="errorHandler" />
      <div class="no-view" v-else>
        <h1>暂时不支持该文件的预览！</h1>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { ElMessage } from 'element-plus'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficePptx from '@vue-office/pptx'
import VueOfficeExcel from '@vue-office/excel'
import MarkdownViewer from './MarkdownViewer.vue'
import TextViewer from './TextViewer.vue'
import PdfViewer from './PdfViewer.vue'
const props = defineProps({ fileType: String, fileUrl: String, fileName: String, width: { type: Number, default: 1000 } })
const emit = defineEmits(['closeViewer'])
const topRef = ref()
const containerRef = ref() //.containerd的ref
let containerSize = ref({
  width: 0,
  height: 0,
})
const excelOptions = computed(() => {
  return {
    xls: props.fileType === 'xlsx' ? false : true,       //预览xlsx文件设为false；预览xls文件设为true
    minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
    minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
    widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
    heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
    beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
    transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
  }
})

function renderedHandler() {
  console.log("渲染完成")
}
function errorHandler() {
  console.log("渲染失败")
  ElMessage({
    message: `文件渲染失败`,
    type: "error"
  })
  emit('closeViewer')
}
const handleResize = () => {
  containerSize.value = {
    width: containerRef.value.offsetWidth,
    height: containerRef.value.offsetHeight - topRef.value.offsetHeight
  }
}

const handleKeydown = (event) => {
  switch (event.key) {
    case 'Enter':

      break
    case 'Escape':
      emit('closeViewer')
      break
    case 'ArrowUp':

      break
    case ' ':
      break
    default:

  }
}

onMounted(() => {
  containerSize.value = {
    width: containerRef.value.offsetWidth,
    height: containerRef.value.offsetHeight - topRef.value.offsetHeight
  }
  // window.addEventListener('resize', handleResize)
  window.addEventListener('keydown', handleKeydown)
})
onBeforeUnmount(() => {
  // window.removeEventListener('resize', handleResize)
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style lang="less" scoped>
.document-viewer {
  height: 100vh;
  width: 100vw;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  z-index: 100;

  .mask {
    // height: 100vh;
    // width: 100vw;
    position: fixed;
    // overflow: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 50;
    // display: flex;
    // flex-direction: column;
    background-color: rgb(128, 128, 128, 0.8);
    opacity: 0.5;
  }

  // display: flex;
  // flex-direction: column;
  // background-color: rgb(128, 128, 128, 0.8);
  // opacity: 0.5;

  // opacity: 0.5;
  .top {
    // flex: 0 0 auto;
    background-color: white;
    clear: both;
    padding: 5px 10px;
    position: sticky;
    z-index: 60;
    top: 0;
    display: flex;
    justify-content: end;

    .close {
      // width: 100px;
      margin-left: auto;
      display: inline-block;
      cursor: pointer;

      &:hover {}

      // float: right;
    }

  }

  .container {
    // opacity: 1;
    min-height: 100%;
    // height: 100%;
    // height: 10000px;
    // flex: 1 1 auto;
    margin: auto;
    box-sizing: border-box;
    background-color: white;
    position: relative;
    z-index: 60;

    // overflow: auto;
    &::v-deep .vue-office-pptx {
      height: auto;

      .vue-office-pptx-main {
        height: auto !important;

        .pptx-preview-wrapper {
          height: auto !important;
          // overflow: hidden;
        }
      }
    }
  }

  .no-view {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: 24px;
      font-weight: bold;
    }
  }
}
</style>