<script setup lang="ts">
/**
 * 文件职责：成本分析明细表。
 */
import type { TableProps } from 'ant-design-vue';

import type { FinanceCostMonthlyDetailRowDto } from '#/api/finance/cost';

import { h } from 'vue';

import { Table } from 'ant-design-vue';

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

interface Props {
  loading: boolean;
  rows: FinanceCostMonthlyDetailRowDto[];
}

const props = defineProps<Props>();

const columns: TableProps['columns'] = [
  {
    title: '月份',
    dataIndex: 'month',
    width: 110,
  },
  {
    title: '食材',
    dataIndex: 'foodAmount',
    align: 'right',
    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
  },
  {
    title: '人工',
    dataIndex: 'laborAmount',
    align: 'right',
    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
  },
  {
    title: '固定',
    dataIndex: 'fixedAmount',
    align: 'right',
    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
  },
  {
    title: '包装',
    dataIndex: 'packagingAmount',
    align: 'right',
    customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
  },
  {
    title: '总计',
    dataIndex: 'totalCost',
    align: 'right',
    customRender: ({ text }) =>
      h(
        'span',
        { class: 'fc-total-amount' },
        formatCurrency(Number(text ?? 0)),
      ),
  },
  {
    title: '成本率',
    dataIndex: 'costRate',
    align: 'right',
    customRender: ({ text }) => formatPercent(Number(text ?? 0)),
  },
];
</script>

<template>
  <div class="fc-table-card">
    <div class="fc-section-title">成本明细</div>
    <Table
      row-key="month"
      size="middle"
      :columns="columns"
      :data-source="props.rows"
      :loading="props.loading"
      :pagination="false"
    />
  </div>
</template>
