<!-- 文件职责：订单大厅统计条。 -->
<script setup lang="ts">
const {
  completedCount = 0,
  deliveringCount = 0,
  makingCount = 0,
  pendingCount = 0,
  todayTotal = 0,
} = defineProps<{
  completedCount?: number;
  deliveringCount?: number;
  makingCount?: number;
  pendingCount?: number;
  todayTotal?: number;
}>();
</script>

<template>
  <div class="ob-stats">
    <div class="ob-stats-main">
      <div class="ob-summary-item">
        <span class="ob-summary-label">今日订单</span>
        <span class="ob-summary-value is-default">{{ todayTotal }}</span>
      </div>
      <div class="ob-summary-item is-active">
        <span class="ob-summary-label">待接单</span>
        <span class="ob-summary-value is-pending">{{ pendingCount }}</span>
      </div>
      <div class="ob-summary-item">
        <span class="ob-summary-label">制作中</span>
        <span class="ob-summary-value is-making">{{ makingCount }}</span>
      </div>
      <div class="ob-summary-item">
        <span class="ob-summary-label">配送/待取</span>
        <span class="ob-summary-value is-delivering">{{
          deliveringCount
        }}</span>
      </div>
      <div class="ob-summary-item">
        <span class="ob-summary-label">已完成</span>
        <span class="ob-summary-value is-muted">{{ completedCount }}</span>
      </div>
    </div>
    <div class="ob-stats-actions">
      <slot name="actions"></slot>
    </div>
  </div>
</template>
