<template>
  <div class="file-icon">
    <img class="file-icon-img" :src="getIcon(file)" alt="file-icon" />
  </div>
</template>

<script setup lang="ts">
import { FileInfo } from "../utils/fileMgr";

const props = defineProps<{
  file: FileInfo;
}>();
const iconMap = {
  "/static/icons/IMG.webp": [
    "jpg",
    "png",
    "jpeg",
    "gif",
    "bmp",
    "tiff",
    "ico",
    "webp",
  ],
  "/static/icons/PPT.webp": ["ppt", "pptx"],
  "/static/icons/TXT.webp": ["txt", "md", "markdown"],
  "/static/icons/WORD.webp": ["doc", "docx"],
  "/static/icons/PDF.webp": ["pdf"],
  "/static/icons/VIDEO.webp": [
    "mp4",
    "avi",
    "mov",
    "wmv",
    "flv",
    "mkv",
    "rmvb",
    "rm",
    "asf",
    "wmv",
    "mpg",
    "mpeg",
    "mpe",
    "m4v",
    "3gp",
    "3g2",
    "flv",
    "f4v",
    "swf",
    "vob",
  ],
  "/static/icons/MUSIC.webp": [
    "mp3",
    "wav",
    "wma",
    "aac",
    "flac",
    "ape",
    "m4a",
    "ogg",
    "m3u",
    "m3u8",
    "pls",
    "qmc",
    "qmcflac",
    "qmcogg",
    "qmcwma",
    "rm",
    "rmvb",
    "wavpack",
  ],
  "/static/icons/ZIP.webp": [
    "zip",
    "rar",
    "7z",
    "tar",
    "gz",
    "bz2",
    "iso",
    "7zip",
  ],
  "/static/icons/XML.webp": ["xml", "html", "htm", "xhtml", "shtml", "shtm"],
};
//根据文件类型与后缀生成icon
const getIcon = (file: FileInfo): string => {
  if (file.isDirectory) {
    return "/static/icons/wenjianjia.webp";
  }
  for (const [iconUrl, extensions] of Object.entries(iconMap)) {
    if (extensions.includes(file.name.split(".").pop()!)) {
      return iconUrl;
    }
  }
  return "/static/icons/OTHER.webp";
};
</script>
<style scoped>
.file-icon-img {
  width: 100%;
  height: 100%;
}
</style>
