<script setup lang="ts">
defineProps<{
  filePath: string
  metrics: {
    total: number
    readyCount: number
    draftCount: number
    enabledCount: number
    disabledCount: 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>{{ metrics.total }}</strong>
      </article>
      <article class="overview-stat">
        <span>可投产</span>
        <strong>{{ metrics.readyCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>待完善</span>
        <strong>{{ metrics.draftCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>已启用</span>
        <strong>{{ metrics.enabledCount }}</strong>
      </article>
      <article class="overview-stat">
        <span>已停用</span>
        <strong>{{ metrics.disabledCount }}</strong>
      </article>
    </div>

    <div class="overview-notes">
      <span class="overview-note">91卡券订单来自已接收的待补全队列</span>
      <span class="overview-note">内部 SKU 决定最终任务与库存绑定</span>
      <span class="overview-note">cloud SKU 决定自动购买、发货与退号资源</span>
    </div>
  </section>
</template>

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