<script setup lang="ts">
/**
 * 文件职责：发票记录统计卡片栏。
 */
import type { FinanceInvoiceStatsDto } from '#/api/finance';

import { IconifyIcon } from '@vben/icons';

import { formatCurrency } from '../composables/invoice-page/helpers';

interface Props {
  stats: FinanceInvoiceStatsDto;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="fi-stats">
    <div class="fi-stat-card">
      <div class="fi-stat-label">
        <IconifyIcon icon="lucide:receipt-text" class="fi-stat-icon" />
        <span>本月开票</span>
      </div>
      <div class="fi-stat-val">{{ formatCurrency(props.stats.currentMonthIssuedAmount) }}</div>
      <div class="fi-stat-sub">共 {{ props.stats.currentMonthIssuedCount }} 张</div>
    </div>

    <div class="fi-stat-card warn">
      <div class="fi-stat-label">
        <IconifyIcon icon="lucide:clock" class="fi-stat-icon" />
        <span>待开票</span>
      </div>
      <div class="fi-stat-val">{{ props.stats.pendingCount }}</div>
      <div class="fi-stat-sub">张待处理</div>
    </div>

    <div class="fi-stat-card danger">
      <div class="fi-stat-label">
        <IconifyIcon icon="lucide:ban" class="fi-stat-icon" />
        <span>已作废</span>
      </div>
      <div class="fi-stat-val">{{ props.stats.voidedCount }}</div>
      <div class="fi-stat-sub">张已作废</div>
    </div>
  </div>
</template>
