<script setup lang="ts">
import type { AdminObservedProductItem } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'

import type { ImportableProductCandidate } from '../composables/types'

defineProps<{
  observedProducts: AdminObservedProductItem[]
  pendingObservedCount: number
}>()

const emit = defineEmits<{
  importProduct: [item: ImportableProductCandidate]
}>()
</script>

<template>
  <section class="table-card table-card--dense">
    <div class="section-title-row section-title-row--tight">
      <div>
        <h3>近期识别到的外部商品</h3>
        <p>从已入库订单里提取的外部商品信息，优先处理未配置商品，导入后再补齐内部 SKU。</p>
      </div>
      <div class="section-mini-stats">
        <span class="mini-stat-chip">待补 {{ pendingObservedCount }}</span>
        <span class="mini-stat-chip">总计 {{ observedProducts.length }}</span>
      </div>
    </div>

    <el-table
      :data="observedProducts"
      class="data-table element-data-table"
      empty-text="最近还没有识别到可用的外部商品。"
    >
      <el-table-column label="来源" min-width="180">
        <template #default="{ row: item }">
          <div class="cell-stack">
            <strong>{{ item.platform || '-' }}</strong>
            <span class="cell-subtle"
              >{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="外部商品" min-width="280">
        <template #default="{ row: item }">
          <div class="cell-stack">
            <strong>{{
              item.externalSkuName || item.externalSkuCode || item.externalItemId || '-'
            }}</strong>
            <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
            <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderItemCount" label="订单商品数" width="120" />
      <el-table-column label="最近出现时间" width="180">
        <template #default="{ row: item }">
          {{ formatAdminDateTime(item.latestSeenAt) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="{ row: item }">
          {{ item.configured ? '已配置' : '未配置' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="{ row: item }">
          <el-button
            v-if="!item.configured"
            link
            type="primary"
            @click="emit('importProduct', item)"
          >
            导入到规则
          </el-button>
          <span v-else class="cell-subtle">已存在</span>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

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