<script lang="ts" setup>
import VueOfficePptx from "@vue-office/pptx";

const {
  params: { resource_url },
} = useRoute();

const url = computed(() => {
  return atob(resource_url as string);
});

const fileExtension = computed(() => {
  const lastDotIndex = url.value.lastIndexOf(".");
  if (lastDotIndex === -1) return "";
  return url.value.substring(lastDotIndex + 1).toLowerCase();
});

const fileType = computed(() => {
  const ext = fileExtension.value;
  if (ext === "pdf") return "pdf";
  if (ext === "doc" || ext === "docx") return "word";
  if (ext === "ppt" || ext === "pptx") return "ppt";
  if (ext === "xls" || ext === "xlsx") return "excel";
  if (ext === "txt") return "txt";
  if (ext === "jpg" || ext === "jpeg" || ext === "png" || ext === "gif")
    return "image";
  if (ext === "mp4" || ext === "avi" || ext === "mov") return "video";
  if (ext === "mp3" || ext === "wav") return "audio";
  return "";
});
</script>

<template>
  <div class="w-full h-screen">
    <div v-if="!url">
      <div class="flex items-center justify-center h-full">
        <p class="text-muted-foreground">资源链接无效</p>
      </div>
    </div>
    <div v-else class="w-full h-full">
      <VueOfficePptx
        v-if="fileType === 'ppt'"
        :src="url"
        class="w-full h-full"
        :options="{
          autoSize: true,
          autoHeight: true,
          autoWidth: true,
          autoScale: true,
          autoRotate: true,
          autoFit: true,
        }"
      />
    </div>
  </div>
</template>

<style scoped></style>
