<template>
  <a-modal
    :open="visible"
    title="同名文件提示"
    :footer="null"
    width="600px"
    :mask-closable="false"
    @cancel="handleSkipAll"
  >
    <div class="duplicate-file-modal">
      <!-- 警告提示 -->
      <a-alert
        message="上传的文件存在同名文件，是否覆盖？"
        type="warning"
        show-icon
        class="warning-alert"
      />

      <!-- 文件列表 -->
      <a-table
        :columns="columns"
        :data-source="duplicateFiles"
        :pagination="false"
        size="small"
        class="file-table"
        :scroll="{ y: 300 }"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">
            {{ index + 1 }}
          </template>
          <template v-if="column.key === 'name'">
            <span class="file-name">{{ record.path || record.name }}</span>
          </template>
          <template v-if="column.key === 'size'">
            <span class="file-size">{{ formatSize(record.size) }}</span>
          </template>
        </template>
      </a-table>

      <!-- 底部按钮 -->
      <div class="modal-footer">
        <a-space>
          <a-button @click="handleSkipAll">跳过</a-button>
          <a-button type="primary" @click="handleOverwriteAll">覆盖</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import type { DuplicateFile } from '@/types'

defineProps<{
  visible: boolean
  duplicateFiles: DuplicateFile[]
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'skip-all'): void
  (e: 'overwrite-all'): void
}>()

const columns = [
  { title: '序号', key: 'index', width: 60 },
  { title: '名称', key: 'name', ellipsis: true },
  { title: '文件大小', key: 'size', width: 120 }
]

/**
 * 格式化文件大小
 */
function formatSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

/**
 * 跳过所有
 */
function handleSkipAll() {
  emit('skip-all')
  emit('update:visible', false)
}

/**
 * 覆盖所有
 */
function handleOverwriteAll() {
  emit('overwrite-all')
  emit('update:visible', false)
}
</script>

<style scoped>
.duplicate-file-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.warning-alert {
  margin-bottom: 8px;
}

.file-table {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.file-name {
  font-size: 13px;
  color: #333;
  word-break: break-all;
}

.file-size {
  font-size: 13px;
  color: #666;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>
