<script setup lang="ts">
type TaskDetail = {
  taskNo?: string
  taskId?: string | number
  status?: string
}

type Order = {
  platformOrderId?: string
}

type OrderItem = {
  skuName?: string
}

type ManualRequest = {
  proofValue?: string
}

type Props = {
  task: TaskDetail | null
  order: Order | null
  orderItem: OrderItem | null
  manualRequest: ManualRequest | null
  statusLabel: string
}

defineProps<Props>()
</script>

<template>
  <section v-if="task" class="summary-card">
    <article>
      <span>唯一凭据</span>
      <strong>{{ manualRequest?.proofValue || order?.platformOrderId || '-' }}</strong>
    </article>
    <article>
      <span>任务号</span>
      <strong>{{ task.taskNo || '-' }}</strong>
    </article>
    <article>
      <span>商品</span>
      <strong>{{ orderItem?.skuName || '-' }}</strong>
    </article>
    <article>
      <span>当前状态</span>
      <strong>{{ statusLabel }}</strong>
    </article>
  </section>
</template>

<style scoped>
.summary-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 22px var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

.summary-card article {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-page);
}

.summary-card span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.summary-card strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-primary);
  word-break: break-word;
}

@media (max-width: 900px) {
  .summary-card {
    grid-template-columns: 1fr;
  }
}
</style>
