<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'

/** office/pdf 渲染:vue-office 组件按需异步加载,各自独立 chunk,不预览不下载 */
const props = defineProps<{
  kind: 'docx' | 'xlsx' | 'pdf' | 'pptx'
  data: ArrayBuffer
}>()
const emit = defineEmits<{ error: [string] }>()

const comps = {
  docx: defineAsyncComponent(async () => {
    await import('@vue-office/docx/lib/index.css')
    return (await import('@vue-office/docx')).default
  }),
  xlsx: defineAsyncComponent(async () => {
    await import('@vue-office/excel/lib/index.css')
    return (await import('@vue-office/excel')).default
  }),
  pdf: defineAsyncComponent(() => import('@vue-office/pdf').then((m) => m.default)),
  pptx: defineAsyncComponent(() => import('@vue-office/pptx').then((m) => m.default)),
}
const comp = computed(() => comps[props.kind])
</script>

<template>
  <component
    :is="comp"
    :src="data"
    class="office-host"
    @error="emit('error', '文档渲染失败,请下载查看')"
  />
</template>

<style scoped>
.office-host {
  height: 100%;
}
</style>
