<template>
  <div class="attachment-cell">
    <div
      v-for="(file, idx) in files"
      :key="idx"
      class="attachment-cell__item"
    >
      <a :href="file.url" target="_blank" class="attachment-cell__link">
        <PaperClipOutlined />
        <span class="attachment-cell__name">{{ file.filename }}</span>
        <span class="attachment-cell__size">{{ formatSize(file.size) }}</span>
      </a>
    </div>
    <span v-if="!files || files.length === 0" class="attachment-cell__empty">—</span>
  </div>
</template>

<script setup lang="ts">
import { PaperClipOutlined } from '@ant-design/icons-vue'
import type { IAttachmentMeta } from '@/api/bitable'

defineProps<{
  files: IAttachmentMeta[] | null | undefined
}>()

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}
</script>

<style scoped>
.attachment-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}

.attachment-cell__item {
  line-height: 1.4;
}

.attachment-cell__link {
  display: inline-flex;
  align-items: center;
  gap: var(--bitable-spacing-xs);
  color: var(--bitable-color-primary);
  text-decoration: none;
  font-size: var(--bitable-font-xs);
}

.attachment-cell__link:hover {
  text-decoration: underline;
}

.attachment-cell__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-cell__size {
  color: var(--bitable-color-text-secondary);
  font-size: 11px;
}

.attachment-cell__empty {
  color: var(--bitable-color-text-placeholder);
}
</style>
