<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">文件下载</h1>
      <el-breadcrumb class="breadcrumb">
        <el-breadcrumb-item class="text-md opacity-50">
          <NuxtLink :to="$localePath('/')">{{
            $t('navigation.home')
          }}</NuxtLink>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="text-md opacity-50">
          <NuxtLink :to="$localePath('/products')">{{
            $t('navigation.downloads')
          }}</NuxtLink>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="!pending" class="page-content">
      <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>
    </div>
    <div v-else>
      <el-skeleton :rows="6" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
  const route = useRoute();
  const router = useRouter();

  // 获取路由参数
  const id = computed(() => route.params.id as string);

  const {
    data: file,
    pending,
    error,
  } = await useFetch<FileMeta>(`/api/file/${id.value}`);

  if (error.value || !file.value) {
    throw createError({
      statusCode: 404,
      statusMessage: '文件未找到',
    });
  }

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

  function handlePreview() {
    router.push(`/preview/${id.value}`);
  }
</script>

<style scoped>
  .page-container {
    padding: 2rem;
    margin: 0 auto;
    max-width: 1200px;
  }

  .page-header {
    display: flex;
  }

  .page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 1rem;
  }

  .breadcrumb {
    margin-left: auto;
  }

  .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>
