<template>
  <div class="page-shell">
    <div class="toolbar">
      <div>
        <h2 class="section-title">{{ '\u989d\u5ea6\u6d41\u6c34' }}</h2>
        <div class="tag">{{ '\u4f59\u989d\u53d8\u52a8\u8bb0\u5f55' }}</div>
      </div>
      <div class="table-actions">
        <el-button @click="loadTransactions">{{ '\u5237\u65b0' }}</el-button>
      </div>
    </div>

    <div class="glass-card panel">
      <el-table :data="transactions" v-loading="loading">
        <el-table-column prop="type" :label="'\u7c7b\u578b'" width="140">
          <template #default="scope">
            {{ typeLabel(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" :label="'\u91d1\u989d'" width="140" />
        <el-table-column prop="balanceAfter" :label="'\u4f59\u989d'" width="140" />
        <el-table-column prop="remark" :label="'\u5907\u6ce8'" min-width="240" />
        <el-table-column prop="createdAt" :label="'\u65f6\u95f4'" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { agentTransactions } from '@/api/agent';

const transactions = ref([]);
const loading = ref(false);

const typeLabel = (value) => {
  if (value === 'recharge') return '\u5145\u503c';
  if (value === 'consume') return '\u6263\u8d39';
  return value || '-';
};

const loadTransactions = async () => {
  loading.value = true;
  try {
    transactions.value = await agentTransactions();
  } catch (err) {
    ElMessage.error(err?.message || '\u52a0\u8f7d\u6d41\u6c34\u5931\u8d25');
  } finally {
    loading.value = false;
  }
};

const formatTime = (value) => {
  if (!value) return '-';
  return dayjs(value).format('YYYY-MM-DD HH:mm');
};

onMounted(loadTransactions);
</script>
