<script setup lang="ts">
import { SButton, STag } from '@soybeanjs/ui';

defineProps<{
  open: boolean;
  title: string;
  loading: boolean;
  participants: Record<string, any>[];
  formatTime: (value?: string | number | Date | null) => string;
}>();

const emit = defineEmits<{ close: [] }>();
</script>

<template>
  <div v-if="open" class="confirm-mask participants-mask" @click.self="emit('close')">
    <div class="confirm-card participants-dialog">
      <div class="dialog-head">
        <div>
          <h3>参与记录</h3>
          <p>{{ title }} · {{ participants.length }} 人</p>
        </div>
        <button class="dialog-close" type="button" @click="emit('close')">×</button>
      </div>
      <div class="participants-list">
        <div v-if="loading" class="empty">加载中...</div>
        <div v-else-if="!participants.length" class="empty">暂无参与记录</div>
        <div v-for="p in participants" v-else :key="p.id" class="participant-row">
          <div>
            <b>@{{ p.username || p.user_id }}</b>
            <span>用户 ID：{{ p.user_id }}</span>
          </div>
          <div class="participant-meta">
            <STag v-if="p.is_winner" size="xs" color="success" variant="soft">中奖</STag>
            <span>{{ formatTime(p.created_at) }}</span>
          </div>
        </div>
      </div>
      <div class="confirm-actions">
        <SButton size="xs" variant="outline" @click="emit('close')">关闭</SButton>
      </div>
    </div>
  </div>
</template>
