<!--
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-07-18 12:22:11
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-08-22 01:57:45
 * @FilePath: \vue3\packages\preview-office-view\index.vue
 * @Description:
 *
-->
<template>
  <div class="preview-office-view overflow-hidden h-100vh">
    <template v-if="src">
      <VueOfficeDocx v-if="extension === 'docx'" class="h-full" :src="src" />
      <VueOfficeExcel v-else-if="extension === 'xlsx'" class="h-full" :src="src" />
      <VueOfficePdf v-else-if="extension === 'pdf'" class="h-full" :src="src" static-file-url="https://registry.npmmirror.com/pdfjs-dist/3.1.81/files/cmaps/" />
    </template>
    <el-empty v-else>
      <template #description>
        暂不支持.{{ extension }}格式的文件
      </template>
    </el-empty>
  </div>
</template>

<script lang="ts" setup name="ThPreviewOfficeView">
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'

const props = defineProps<{
  /** 文件的url */
  url?: string | string[]
  /** 文件的拓展名 */
  extension?: string
}>()

const src = computed(() => {
  const { url } = props
  if (typeof url === 'string')
    return url
  if (Array.isArray(url))
    return url[0]
})
</script>
