<script setup lang="ts">
/**
 * 文件职责：成本分析统计卡。
 */
import type { FinanceCostAnalysisStatsDto } from '#/api/finance/cost';

import { computed } from 'vue';

import {
  formatCurrency,
  formatPercent,
} from '../composables/cost-page/helpers';

interface Props {
  stats: FinanceCostAnalysisStatsDto;
}

const props = defineProps<Props>();

const monthOnMonthClass = computed(() => {
  if ((props.stats?.monthOnMonthChangeRate ?? 0) > 0) return 'is-up';
  if ((props.stats?.monthOnMonthChangeRate ?? 0) < 0) return 'is-down';
  return 'is-flat';
});
</script>

<template>
  <div class="fc-stats">
    <div class="fc-stat-card">
      <div class="fc-stat-label">本月总成本</div>
      <div class="fc-stat-value">
        {{ formatCurrency(props.stats.totalCost) }}
      </div>
    </div>

    <div class="fc-stat-card">
      <div class="fc-stat-label">食材成本率</div>
      <div class="fc-stat-value">
        {{ formatPercent(props.stats.foodCostRate) }}
      </div>
    </div>

    <div class="fc-stat-card">
      <div class="fc-stat-label">单均成本</div>
      <div class="fc-stat-value">
        {{ formatCurrency(props.stats.averageCostPerPaidOrder) }}
      </div>
    </div>

    <div class="fc-stat-card">
      <div class="fc-stat-label">环比变化</div>
      <div class="fc-stat-value" :class="monthOnMonthClass">
        {{ formatPercent(props.stats.monthOnMonthChangeRate) }}
      </div>
    </div>
  </div>
</template>
