<script setup lang="ts">
import type { AdminTaskDetail } from '@/types/admin'
import { formatTaskEventPayload, formatTaskEventType } from '@/utils/admin-display'
import { formatAdminDateTime } from '@/utils/admin-time'

interface Props {
  detail: AdminTaskDetail
}

defineProps<Props>()
</script>

<template>
  <section class="info-card">
    <h3>任务事件</h3>
    <table class="data-table">
      <tbody>
        <tr v-for="event in detail.events" :key="event.eventId">
          <th>{{ formatTaskEventType(event.eventType) }}</th>
          <td>
            <div class="event-copy">
              {{ formatTaskEventPayload(event.payload) }}
            </div>
            <div class="event-time">
              {{ formatAdminDateTime(event.createdAt) }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<style scoped src="../AdminTaskDetail.css"></style>
