<template>
  <div :class="wrapClass">
    <template v-if="file">
      <div class="p-12px flex items-center text-white">
        <SvgIcon name="文件" class="text-[#FEE77B] w-5 h-5" />
        <div class="ml-12px text-22px">{{ file.name }}</div>
      </div>
      <div
        class="bg-[#27292B] flex items-center px-12px py-12px justify-between text-22px"
      >
        <div>.{{ file.extension }}</div>
        <div>{{ kbToMbWithDecimal(file.size) }} M</div>
      </div>
    </template>
    <template v-else>
      <div class="p-12px flex items-center text-white">
        <SvgIcon name="删除文件夹" class=" text-gray-400 w-5 h-5" />
        <div class="ml-12px text-22px">文件已失效</div>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  file: {
    type: Object,
  },
})

function kbToMbWithDecimal(bytes) {
  const mb = bytes / (1024 * 1024)
  return mb.toFixed(1)
}

const wrapClass = computed(() => {
  return [
    'text-wrap',
    'min-w-[80px]',
    'rounded-6px',
    'overflow-hidden',
    'bg-[#d2f9d1]',
    'dark:bg-[#414548]',
    'message-request',
  ]
})
</script>
