<template>
  <a-dropdown :trigger="['contextmenu']">
    <div class="file-card" @click="emit('open', file.id)">
      <div class="file-card__icon">{{ file.icon }}</div>
      <div class="file-card__body">
        <div class="file-card__name" :title="file.name">{{ file.name }}</div>
        <div class="file-card__desc" :title="file.description">
          {{ file.description || '暂无描述' }}
        </div>
        <div class="file-card__meta">
          <span>{{ formatDate(file.updated_at) }}</span>
        </div>
      </div>
    </div>
    <template #overlay>
      <a-menu>
        <a-menu-item key="open" @click="emit('open', file.id)">打开</a-menu-item>
        <a-menu-item key="rename" @click="emit('rename', file)">重命名</a-menu-item>
        <a-menu-divider />
        <a-menu-item key="delete" danger @click="emit('delete', file)">
          删除
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import type { IBitableFile } from '@/api/bitable'

defineProps<{
  file: IBitableFile
}>()

const emit = defineEmits<{
  (e: 'open', fileId: string): void
  (e: 'rename', file: IBitableFile): void
  (e: 'delete', file: IBitableFile): void
}>()

function formatDate(iso: string): string {
  const d = dayjs(iso)
  if (!d.isValid()) return iso
  return d.isSame(dayjs(), 'day') ? d.format('今天 HH:mm') : d.format('YYYY-MM-DD')
}
</script>

<style scoped>
.file-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #f0f0f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  height: 100%;
}

.file-card:hover {
  border-color: var(--color-primary, #1677ff);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.12);
  transform: translateY(-2px);
}

.file-card__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1f1f1f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card__desc {
  font-size: 12px;
  color: var(--text-secondary, #8c8c8c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.file-card__meta {
  font-size: 11px;
  color: var(--text-placeholder, #bfbfbf);
}
</style>
