<!--
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-07-18 12:21:03
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-07-18 13:02:44
 * @FilePath: \vue3\packages\preview-office\index.vue
 * @Description:
 *
-->
<template>
  <iframe v-if="src" class="h-full w-full" title="Office预览" :src="src" />
  <el-empty v-else />
</template>

<script lang="ts" setup name="ThPreviewOffice">
const { file } = defineProps<{
  /** 待预览的文件对象 */
  file?: FileVO
}>()

const router = useRouter()

const ALLOW_EXTENSION: (string | undefined)[] = ['docx', 'xlsx', 'pdf']

const src = computed(() => {
  if (!file || !ALLOW_EXTENSION.includes(file.extension))
    return ''

  return router.resolve({
    name: 'preview-office',
    query: {
      url: file.url,
      extension: file.extension,
    },
  }).href
})
</script>
