<script setup lang="ts">
/**
 * 文件职责：到账查询统计卡片展示。
 */
import type { FinanceSettlementStatsDto } from '#/api/finance';

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

import {
  formatCount,
  formatCurrency,
} from '../composables/settlement-page/helpers';

interface Props {
  stats: FinanceSettlementStatsDto;
}

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

<template>
  <div class="fst-stats">
    <div class="fst-stat-card">
      <div class="fst-stat-label">
        <IconifyIcon icon="lucide:circle-check" class="fst-stat-icon" />
        今日到账
      </div>
      <div class="fst-stat-value is-green">
        {{ formatCurrency(props.stats.todayArrivedAmount) }}
      </div>
    </div>

    <div class="fst-stat-card">
      <div class="fst-stat-label">
        <IconifyIcon icon="lucide:calendar-minus" class="fst-stat-icon" />
        昨日到账
      </div>
      <div class="fst-stat-value">
        {{ formatCurrency(props.stats.yesterdayArrivedAmount) }}
      </div>
    </div>

    <div class="fst-stat-card">
      <div class="fst-stat-label">
        <IconifyIcon icon="lucide:calendar-check" class="fst-stat-icon" />
        本月累计到账
      </div>
      <div class="fst-stat-value">
        {{ formatCurrency(props.stats.currentMonthArrivedAmount) }}
      </div>
    </div>

    <div class="fst-stat-card">
      <div class="fst-stat-label">
        <IconifyIcon icon="lucide:receipt" class="fst-stat-icon" />
        本月交易笔数
      </div>
      <div class="fst-stat-value">
        {{ formatCount(props.stats.currentMonthTransactionCount) }}
      </div>
    </div>
  </div>
</template>
