FuelLog/fuellog-web/src/pages/Refuels.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import {
  NButton,
  NCard,
  NEmpty,
  NPopconfirm,
  NSpin,
  NTag,
  useMessage,
} from 'naive-ui'
import { refuelsApi } from '@/api/refuels'
import { useVehicleStore } from '@/stores/vehicle'
import type { RefuelRecord } from '@/api/types'
import { fmtAmount, fmtLiters, fmtPrice } from '@/utils/decimal'

const store = useVehicleStore()
const message = useMessage()
const records = ref<RefuelRecord[]>([])
const loading = ref(false)

async function load() {
  if (!store.currentId) {
    records.value = []
    return
  }
  loading.value = true
  try {
    records.value = await refuelsApi.list(store.currentId)
  } catch (err) {
    message.error((err as Error).message || '加载失败')
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await store.loadList()
  await load()
})

// 切车就重拉
watch(
  () => store.currentId,
  () => load(),
)

// 按月分组(最新月份在前)
const grouped = computed(() => {
  const map = new Map<string, RefuelRecord[]>()
  for (const r of records.value) {
    const d = new Date(r.refuel_time)
    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
    if (!map.has(key)) map.set(key, [])
    map.get(key)!.push(r)
  }
  return Array.from(map.entries()).sort((a, b) => (a[0] < b[0] ? 1 : -1))
})

const monthLabel = (k: string) => `${k.slice(0, 4)} 年 ${parseInt(k.slice(5), 10)} 月`

const monthSubtotal = (rs: RefuelRecord[]) => {
  const liters = rs.reduce((s, r) => s + r.liters, 0)
  const amount = rs.reduce((s, r) => s + r.total_amount, 0)
  return { liters, amount }
}

const monthAvgPrice = (rs: RefuelRecord[]) => {
  const totalL = rs.reduce((s, r) => s + r.liters, 0)
  if (totalL <= 0) return 0
  const totalA = rs.reduce((s, r) => s + r.total_amount, 0)
  return totalA / totalL
}

async function remove(r: RefuelRecord) {
  try {
    await refuelsApi.remove(r.id)
    message.success('已删除')
    await load()
  } catch (err) {
    message.error((err as Error).message || '删除失败')
  }
}

const dayLabel = (iso: string) => {
  const d = new Date(iso)
  return `${d.getMonth() + 1}/${d.getDate()}`
}
const weekday = (iso: string) => {
  const d = new Date(iso)
  return ['日', '一', '二', '三', '四', '五', '六'][d.getDay()]
}
</script>

<template>
  <div class="max-w-screen-md mx-auto space-y-3">
    <div class="flex items-center justify-between">
      <h2 class="text-xl font-semibold">加油记录</h2>
      <NButton type="primary" @click="$router.push({ name: 'refuel-new' })">
        ＋ 新增
      </NButton>
    </div>

    <NSpin :show="loading">
      <NEmpty
        v-if="!loading && !records.length && store.currentId"
        description="还没有加油记录,点右上角加一笔"
      />
      <NEmpty
        v-else-if="!loading && !store.currentId"
        description="还没有车辆,先去添加"
      >
        <NButton type="primary" @click="$router.push({ name: 'vehicles' })">
          添加车辆
        </NButton>
      </NEmpty>

      <div v-else class="space-y-4">
        <NCard
          v-for="[key, items] in grouped"
          :key="key"
          :title="monthLabel(key)"
          class="!rounded-2xl"
          size="small"
        >
          <template #header-extra>
            <div class="text-xs text-ink-soft">
              共 {{ items.length }} 笔 ·
              {{ fmtLiters(monthSubtotal(items).liters) }} ·
              {{ fmtAmount(monthSubtotal(items).amount) }} ·
              均价 {{ fmtPrice(monthAvgPrice(items)) }}
            </div>
          </template>

          <div class="divide-y divide-black/5 dark:divide-white/10 -mx-2">
            <div
              v-for="r in items"
              :key="r.id"
              class="flex items-center gap-3 px-2 py-3"
            >
              <div class="text-center w-12 shrink-0">
                <div class="text-base font-semibold leading-none">
                  {{ dayLabel(r.refuel_time) }}
                </div>
                <div class="text-[10px] text-ink-soft mt-0.5">周{{ weekday(r.refuel_time) }}</div>
              </div>
              <div class="min-w-0 flex-1">
                <div class="text-sm font-medium truncate">
                  {{ r.station_name || '未填写加油站' }}
                </div>
                <div class="text-xs text-ink-soft mt-0.5">
                  {{ fmtLiters(r.liters) }} ·
                  {{ fmtAmount(r.total_amount) }} ·
                  {{ fmtPrice(r.price_per_liter) }}
                  <NTag
                    v-if="r.is_full"
                    size="tiny"
                    type="success"
                    class="!ml-1 align-middle"
                  >
                    加满
                  </NTag>
                </div>
              </div>
              <NPopconfirm @positive-click="remove(r)">
                <template #trigger>
                  <NButton size="tiny" quaternary type="error">删</NButton>
                </template>
                删除这笔?
              </NPopconfirm>
            </div>
          </div>
        </NCard>
      </div>
    </NSpin>
  </div>
</template>