<!-- 积分流水列表，统一用户中心摘要区和完整记录弹窗的展示规则。 -->
<script setup lang="ts">
import { formatDateTime } from "@/utils/datetime";
import type { PointRecord } from "@/components/account/types";

defineProps<{ records: PointRecord[]; emptyText: string }>();

/** formatAmount 将接口金额统一格式化为两位小数。 */
function formatAmount(value: unknown) {
  return Number(value || 0).toFixed(2);
}

/** isIncome 根据有符号变动额区分积分收入和支出。 */
function isIncome(record: PointRecord) {
  return Number(record.change_amount || 0) > 0;
}
</script>

<template>
  <div
    v-if="records.length"
    class="record-list"
  >
    <div
      v-for="record in records"
      :key="record.id"
      class="record-row"
    >
      <div>
        <strong>{{ record.remark || "积分变动" }}</strong>
        <time>{{ formatDateTime(record.created_at) }}</time>
      </div>
      <strong :class="{ income: isIncome(record) }">
        {{ isIncome(record) ? "+" : "-" }}{{ formatAmount(record.amount) }}
      </strong>
      <span>余额 {{ formatAmount(record.balance_after) }}</span>
    </div>
  </div>
  <div
    v-else
    class="empty-state"
  >
    {{ emptyText }}
  </div>
</template>

<style scoped lang="scss">
.record-list {
  display: flex;
  flex-direction: column;
}
.record-row {
  min-height: 44px;
  padding: 4px 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 104px;
  align-items: center;
  gap: var(--space-md);
  border-bottom: 1px solid var(--web-line);
}
.record-row:last-child {
  border-bottom: 0;
}
.record-row > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--space-sm);
  overflow-wrap: anywhere;
}
.record-row > div > strong {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}
.record-row time,
.record-row > span {
  color: var(--web-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}
.record-row > strong {
  color: var(--web-danger);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-align: right;
}
.record-row > strong.income {
  color: var(--web-success);
}
.empty-state {
  padding: 48px 16px;
  color: var(--web-muted);
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 767px) {
  .record-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .record-row > span {
    grid-column: 1 / -1;
  }
}
</style>
