<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { http, type PageResult } from '../api/http';

const query = reactive({ modality: '', modelId: '', tenantId: '', userId: '', page: 1, size: 20 });
const page = ref<PageResult<any>>({ records: [], total: 0, page: 1, size: 20 });
const summary = ref<any[]>([]);

async function load() {
  page.value = await http.get('/billing/records', { params: query });
  summary.value = await http.get('/billing/summary', { params: { ...query, dim: 'model' } });
}

onMounted(load);
</script>

<template>
  <div>
    <div class="page-head"><div><h1>计费记录</h1><p>按租户、用户、模型与模态过滤</p></div></div>
    <div class="toolbar">
      <el-input v-model="query.tenantId" placeholder="租户 ID" style="width: 160px" />
      <el-input v-model="query.userId" placeholder="用户 ID" style="width: 160px" />
      <el-select v-model="query.modality" placeholder="模态" clearable style="width: 140px">
        <el-option label="TEXT" value="TEXT" /><el-option label="IMAGE" value="IMAGE" /><el-option label="VIDEO" value="VIDEO" /><el-option label="RECHARGE" value="RECHARGE" />
      </el-select>
      <el-input v-model="query.modelId" placeholder="模型 ID" style="width: 220px" />
      <el-button type="primary" @click="load">查询</el-button>
    </div>
    <div class="panel-grid">
      <div class="panel">
        <el-table :data="page.records">
          <el-table-column prop="createdAt" label="时间" width="180" />
          <el-table-column prop="tenantId" label="租户" width="110" />
          <el-table-column prop="userId" label="用户" width="110" />
          <el-table-column prop="modality" label="模态" width="100" />
          <el-table-column prop="modelName" label="模型" min-width="170" />
          <el-table-column prop="credits" label="积分" width="100" />
          <el-table-column prop="success" label="成功" width="90" />
        </el-table>
      </div>
      <div class="panel">
        <el-table :data="summary"><el-table-column prop="label" label="模型" /><el-table-column prop="totalCredits" label="积分" /><el-table-column prop="count" label="次数" /></el-table>
      </div>
    </div>
  </div>
</template>
