<template>
  <el-card shadow="hover" class="p-4">
    <template #header>
      <div class="header-content">
        <el-icon class="header-icon"><ElIconDocument /></el-icon>
        <span class="truncate font-medium">{{ file.filename_download }}</span>
      </div>
    </template>
    <dl class="text-gray-600 space-y-1 mb-6">
      <div>
        <dt class="font-semibold inline">类型：</dt>
        <dd class="inline">{{ file.type }}</dd>
      </div>
      <div>
        <dt class="font-semibold inline">大小：</dt>
        <dd class="inline">{{ formatFileSize(file.filesize) }}</dd>
      </div>
      <div>
        <dt class="font-semibold inline">上传时间：</dt>
        <dd class="inline">
          {{ new Date(file.uploaded_on).toLocaleDateString() }}
        </dd>
      </div>
    </dl>
    <template #footer>
      <div class="button-group">
        <el-button type="primary" @click="handleDownload">下载</el-button>
        <el-button v-if="file.previewable" @click="handlePreview"
          >预览</el-button
        >
      </div>
    </template>
  </el-card>
</template>

<script setup lang="ts">
  const props = defineProps({
    fileId: {
      type: String,
      required: true,
    },
    file: {
      type: Object as PropType<FileMeta>,
      required: true,
    },
  });

  const localePath = useLocalePath();
  const router = useRouter();

  function handleDownload() {
    const link = document.createElement('a');
    link.href = `/api/download/${props.fileId}`;
    link.download = props.file?.filename_download ?? 'download';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  function handlePreview() {
    router.push(localePath(`/preview/${props.fileId}`));
  }
</script>

<style scoped>
  .header-content {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
  }
  .header-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
  }

  .button-group {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 1rem;
  }
</style>
