<template>
  <view class="recent-scan-list">
    <view v-if="records.length === 0" class="recent-scan-list__empty">
      暂无扫码记录
    </view>
    <view
      v-for="(record, index) in records"
      :key="record.id || index"
      class="recent-scan-item"
      :class="{ 'recent-scan-item--new': index === latestIndex }"
    >
      <view class="recent-scan-item__main">
        <view class="recent-scan-item__info">
          <text class="recent-scan-item__name">{{ record.productName || '-' }}</text>
          <text class="recent-scan-item__spec">{{ record.productSpec || '-' }}</text>
        </view>
        <view class="recent-scan-item__meta">
          <text class="recent-scan-item__location">{{ record.locationCode || '-' }}</text>
          <text class="recent-scan-item__count">x{{ record.scanCount || 1 }}</text>
        </view>
      </view>
      <view class="recent-scan-item__time">
        <text>{{ formatTime(record.scanTime) }}</text>
        <text class="recent-scan-item__delete" @tap.stop="$emit('delete', index)">删除</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  records: any[]
  latestIndex?: number
}>()

defineEmits<{
  (event: 'delete', index: number): void
}>()

function formatTime(timeStr?: string) {
  if (!timeStr) return ''
  try {
    const d = new Date(timeStr)
    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`
  } catch {
    return ''
  }
}
</script>

<style lang="scss" scoped>
.recent-scan-list {
  &__empty {
    text-align: center;
    color: #86909c;
    font-size: 24rpx;
    padding: 24rpx 0;
  }
}

.recent-scan-item {
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  &--new {
    background: #f6ffed;
    margin: 0 -24rpx;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    border-bottom: none;
  }

  &__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12rpx;
    margin-bottom: 8rpx;
  }

  &__info {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
    min-width: 0;
    flex: 1;
  }

  &__name {
    font-size: 26rpx;
    font-weight: 600;
    color: #1f2329;
  }

  &__spec {
    font-size: 22rpx;
    color: #86909c;
  }

  &__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4rpx;
  }

  &__location {
    font-size: 24rpx;
    color: #52c41a;
    font-weight: 600;
  }

  &__count {
    font-size: 24rpx;
    color: #f5222d;
    font-weight: 600;
  }

  &__time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20rpx;
    color: #86909c;
  }

  &__delete {
    color: #f5222d;
    padding: 4rpx 8rpx;
  }
}
</style>
