<template>
  <div
    class="mb-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
    <div class="flex items-center gap-3">
      <!-- 文件缩略图 -->
      <div
        class="w-16 h-16 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
        <img
          v-if="uploadPreview.type === 'image'"
          :src="uploadPreview.url"
          alt="预览"
          class="w-full h-full object-cover"
        />
        <XgVideoPlayer
          v-else-if="uploadPreview.type === 'video'"
          :src="uploadPreview.url"
          class="w-full h-full object-cover"
          thumbnail
        />
        <FileOutlined v-else class="text-2xl text-gray-400"/>
      </div>

      <!-- 文件信息 -->
      <div class="flex-1 min-w-0">
        <div class="font-medium text-gray-800 dark:text-gray-200 truncate">{{
            uploadPreview.nick_name
          }}
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400">{{
            formatFileSize(uploadPreview.size)
          }}
        </div>
        <div
          v-if="uploadPreview.compressMeta?.usedCompress"
          class="text-xs text-blue-500 dark:text-blue-400"
        >
          已压缩：{{ formatFileSize(uploadPreview.compressMeta.originalSize) }}
          → {{ formatFileSize(uploadPreview.compressMeta.compressedSize) }}
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex gap-2">
        <a-button type="primary" size="small" @click="sendFile">
          <template #icon>
            <SendOutlined/>
          </template>
          发送
        </a-button>
        <a-button size="small" @click="cancelUpload">
          <template #icon>
            <CloseOutlined/>
          </template>
          取消
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {inject} from 'vue';
import {FileOutlined, SendOutlined, CloseOutlined} from '@ant-design/icons-vue';
import { XgVideoPlayer } from '#/components/video-player';

const uploadPreview = inject('uploadPreview');
const sendFile = inject('sendFile');
const cancelUpload = inject('cancelUpload');

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
</script>
