<script setup>
import { getFullUrl } from '~/utils/helper';

const props = defineProps({
  url: String
})


function getFileType(str) {
  if (str) {
    str = str.toLocaleLowerCase()
    const ext = str.split('.').at(-1)
    if (['pdf'].includes(ext)) {
      return 'pdf'
    } else if (['mp4'].includes(ext)) {
      return 'video'
    } else if (['ppt', 'pptx', 'xls', 'xlsx', 'doc', 'docx'].includes(ext)) {
      return 'office'
    } else if (['mp3'].includes(ext)) {
      return 'audio'
    } else if (['png', 'jpg', 'jpeg'].includes(ext)) {
      return 'image'
    }
  }
  return null
}

const type = getFileType(props.url)
</script>

<template>
  <template v-if="type === 'office'">
    <iframe :src="`https://view.officeapps.live.com/op/view.aspx?src=${getFullUrl(url)}`" width='100%' height='100%'
      frameborder='0'></iframe>
  </template>
  <template v-else-if="type === 'pdf'">
    <object type="application/pdf" :data="getFullUrl(url)" class="w-full h-full"></object>
  </template>
  <template v-else-if="type === 'video'">
    <video class="w-full h-full" :src="getFullUrl(url)" controls></video>
  </template>
  <template v-else-if="type === 'audio'">
    <audio class="w-full h-full" :src="getFullUrl(url)"></audio>
  </template>
  <template v-else-if="type === 'audio'">
    <img class="w-full h-full" :src="getFullUrl(url)" />
  </template>
  <el-result v-else icon="error" title="错误信息" sub-title="文件格式不支持">
  </el-result>
</template>
