<script setup lang="ts">
import type { HandoffRecord } from '@/features/orders/api/orders'
import { formatHandoffRecordType } from '@/features/orders/composables/useOrderSnapshot'
import { formatDateTime } from '@/shared/utils/time'

const props = withDefaults(
  defineProps<{
    variant?: 'desktop' | 'mobile'
    records: HandoffRecord[]
    listingCode: string
  }>(),
  { variant: 'desktop' }
)
</script>

<template>
  <section v-if="props.variant === 'mobile'" class="card-section">
    <h3 class="section-title">交接日志 · 商品编号 {{ props.listingCode }}</h3>
    <van-empty v-if="props.records.length === 0" image="search" description="暂无交接日志记录" />
    <div v-else class="log-timeline">
      <div v-for="record in props.records" :key="record.id" class="log-item">
        <div class="log-dot"></div>
        <div class="log-content-wrap">
          <strong class="log-type">{{ formatHandoffRecordType(record.type) }}</strong>
          <p class="log-desc">{{ record.content }}</p>
          <span class="log-time">{{ formatDateTime(record.created_at) }}</span>
        </div>
      </div>
    </div>
  </section>

  <div v-else class="timeline-section">
    <div class="section-header">
      <h2>交接记录</h2>
      <span>商品编号 {{ props.listingCode }}</span>
    </div>
    <el-empty v-if="props.records.length === 0" description="暂无交接记录" />
    <el-timeline v-else>
      <el-timeline-item
        v-for="record in props.records"
        :key="record.id"
        :timestamp="formatDateTime(record.created_at)"
        placement="top"
      >
        <div class="timeline-content">
          <div class="timeline-title">{{ formatHandoffRecordType(record.type) }}</div>
          <div class="timeline-body">{{ record.content }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<style scoped>
.timeline-section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.timeline-section :deep(.el-timeline) {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.timeline-content {
  display: grid;
  gap: 8px;
}

.timeline-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.timeline-body {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  white-space: pre-wrap;
}

.card-section {
  margin: 12px 12px 0;
  padding: 14px;
  background: #ffffff;
  border-radius: 8px;
}

.section-title {
  font-size: 15px;
  font-weight: 800;
  color: #182232;
  margin: 0 0 12px;
}

.log-timeline {
  position: relative;
  padding-left: 18px;
}

.log-timeline::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #e2e8f0;
}

.log-item {
  position: relative;
  padding-bottom: 16px;
}

.log-item:last-child {
  padding-bottom: 0;
}

.log-dot {
  position: absolute;
  left: -18px;
  top: 4px;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #ff6a00;
}

.log-content-wrap {
  display: grid;
  gap: 4px;
}

.log-type {
  color: #182232;
  font-size: 13px;
}

.log-desc {
  margin: 0;
  color: #5f6f86;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.log-time {
  color: #a0aec0;
  font-size: 11px;
}
</style>
