<script setup lang="ts">
/**
 * 文件职责：到账查询展开明细子表。
 */
import type { FinanceSettlementDetailItemDto } from '#/api/finance';

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

interface Props {
  items: FinanceSettlementDetailItemDto[];
  loading: boolean;
}

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

<template>
  <div class="fst-detail-wrap">
    <div class="fst-detail-title">交易明细（部分）</div>

    <table class="fst-mini-table">
      <thead>
        <tr>
          <th>订单号</th>
          <th>金额</th>
          <th>时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="props.loading">
          <td colspan="3">加载中...</td>
        </tr>
        <tr v-else-if="props.items.length === 0">
          <td colspan="3">暂无明细数据</td>
        </tr>
        <tr
          v-for="item in props.items"
          v-else
          :key="`${item.orderNo}_${item.paidAt}`"
        >
          <td class="fst-mono">{{ item.orderNo }}</td>
          <td>{{ formatCurrency(item.amount) }}</td>
          <td>{{ formatPaidTime(item.paidAt) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
