<template>
  <div class="fileDisplay flex items-center w-full justify-between">
    <Icon
      :icon-name="getIconNameBySuffixName(suffixName)"
      style="font-size: 24px"
    ></Icon>
    <div class="middleContent flex-grow">
      <div class="flex items-center justify-between">
        <div class="name">{{ fileName }}</div>
        <div class="size">{{ getFileSize(props.file.size) }}</div>
        <div class="size">
          已完成
          {{ (props.file.progress * 100).toFixed(1) }} %
        </div>
      </div>
      <div
        class="line transition-all"
        :style="{
          width: getLinWidth,
          marginTop: '4px',
        }"
      ></div>
    </div>
    <Icon
      icon-name="iconzhengque"
      :class="{
        'opacity-0': props.file.progress < 1,
      }"
      style="font-size: 18px; margin-right: 19px"
    ></Icon>
    <Icon
      @click="onClose"
      icon-name="iconzuzhigoujia-xuanzechengyuan-yixuanze-shanchu"
      class="cursor-pointer"
      style="font-size: 20px"
    ></Icon>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { iFile } from "./types";
import { getFileName, getFileSize, getSuffixName } from "@/utils/file";
import Icon from "@/components/Icon/index.vue";

const iconNameMapping = {
  icontupian1: ".jpg,.jpeg,.gif,.bmp,.png",
  iconshipin: ".mp4,.wmv",
  iconWORD: ".doc,.docx",
  iconPDF: ".pdf",
  iconyinpin: ".ppt,.pptx",
  iconexcel: ".xls,.xlsx",
  "icona-bianzu21": ".txt",
};

const getIconNameBySuffixName = (SuffixName: string) => {
  let iconName = "";
  Object.entries(iconNameMapping).find(([key, value]) => {
    if (value.split(",").findIndex((i) => i === "." + SuffixName) !== -1) {
      iconName = key;
    }
  });
  return iconName;
};

const onClose = () => {
  emit("close");
};

const getLinWidth = computed(() => {
  return props.file.progress * 100 + "%";
});

const emit = defineEmits(["close"]);

const props = defineProps<{
  file: iFile & { id: number };
}>();

const fileName = computed(() => {
  return getFileName(props.file.name);
});
const suffixName = computed(() => {
  return getSuffixName(props.file.name);
});
</script>

<style scoped lang="scss">
.fileDisplay {
  padding: 0 17px;
  height: 55px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px #e7eef3;
  border-radius: 10px;
  .middleContent {
    margin: 0 17px;
    font-weight: 400;
    line-height: 17px;
    .name {
      color: var(--sy-black);
    }
    .size {
      color: #8b8b8b;
    }
    .line {
      width: 0;
      height: 5px;
      background: var(--sy-blue);
      border-radius: 4px;
    }
  }
}
</style>
