<script setup lang="ts">
defineProps<{
  filePath: string
  ruleMetrics: {
    totalCount: number
    completedCount: number
    draftCount: number
    manualCount: number
    assistedCount: number
    kuaishouCloudCount: number
  }
  pendingObservedCount: number
  observedProductsLength: number
}>()
</script>

<template>
  <section class="overview-card">
    <div class="overview-file">
      <span class="overview-label">配置文件</span>
      <code>{{ filePath || '-' }}</code>
    </div>

    <div class="overview-stats">
      <article class="overview-stat">
        <span>规则总数</span>
        <strong>{{ ruleMetrics.totalCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>完整规则</span>
        <strong>{{ ruleMetrics.completedCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>待完善</span>
        <strong>{{ ruleMetrics.draftCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>待补商品</span>
        <strong>{{ pendingObservedCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>已识别商品</span>
        <strong>{{ observedProductsLength }}</strong>
      </article>
    </div>

    <div class="overview-notes">
      <span class="overview-note">外部 SKU / 商品 ID / 商品名命中任一即可</span>
      <span class="overview-note">内部 SKU 决定库存绑定与履约链路</span>
      <span class="overview-note">同类商品跨平台尽量共用同一内部 SKU</span>
    </div>
  </section>
</template>

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