<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { http, type PageResult } from '../api/http';
import { displayBillingMode, displayModality, displayModelName, displayOperation } from '../utils/display';

const query = reactive({ modality: '', modelId: '', operation: '', success: '', tenantId: '', userId: '', page: 1, size: 20 });
const page = ref<PageResult<any>>({ records: [], total: 0, page: 1, size: 20 });
const summary = ref<any[]>([]);
const pageSizes = [10, 20, 30];
const summaryCards = computed(() => summary.value.slice(0, 8));

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

function search() {
  query.page = 1;
  load();
}

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="租户编号" style="width: 160px" />
      <el-input v-model="query.userId" placeholder="用户编号" style="width: 160px" />
      <el-select v-model="query.modality" placeholder="模态" clearable style="width: 140px">
        <el-option label="文本" value="TEXT" /><el-option label="图片" value="IMAGE" /><el-option label="视频" value="VIDEO" /><el-option label="充值" value="RECHARGE" />
      </el-select>
      <el-select v-model="query.operation" placeholder="计费动作" clearable style="width: 150px">
        <el-option label="充值入账" value="recharge" />
        <el-option label="大纲生成" value="outline_generate" />
        <el-option label="分镜生成" value="storyboard_generate" />
        <el-option label="图片生成" value="image_generate" />
        <el-option label="视频生成" value="video_generate" />
      </el-select>
      <el-select v-model="query.success" placeholder="成功状态" clearable style="width: 130px">
        <el-option label="成功" :value="true" />
        <el-option label="失败" :value="false" />
      </el-select>
      <el-input v-model="query.modelId" placeholder="模型关键字" style="width: 220px" />
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="billing-records-grid">
      <div class="panel">
        <div class="panel-title">
          <div><b>计费记录明细</b><span>直接读取计费流水表的积分、成功状态和任务引用</span></div>
        </div>
          <el-table :data="page.records" class="module-table">
            <el-table-column prop="createdAt" label="时间" width="180" />
            <el-table-column prop="tenantName" label="企业租户" min-width="160" />
            <el-table-column label="计费动作" min-width="130">
              <template #default="{ row }">{{ row.operationLabel || displayOperation(row.operation) }}</template>
            </el-table-column>
            <el-table-column label="类型" width="100">
              <template #default="{ row }">{{ displayModality(row.modality) }}</template>
            </el-table-column>
            <el-table-column label="模型" min-width="170">
              <template #default="{ row }">{{ displayModelName(row.modelName, row.modelId) }}</template>
            </el-table-column>
            <el-table-column prop="unitCount" label="次数/单元" width="110" />
            <el-table-column prop="credits" label="消耗/入账积分" width="140" />
            <el-table-column prop="successLabel" label="是否成功" width="100">
              <template #default="{ row }">
                <el-tag :type="row.success === false ? 'danger' : 'success'">{{ row.successLabel }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="计费模式" width="110">
              <template #default="{ row }">{{ displayBillingMode(row.billingMode) }}</template>
            </el-table-column>
            <el-table-column prop="refId" label="任务/订单引用" min-width="180" />
            <el-table-column prop="userName" label="操作用户" min-width="170" />
            <el-table-column prop="projectName" label="项目" min-width="150" />
          </el-table>
          <el-pagination
            v-model:current-page="query.page"
            v-model:page-size="query.size"
            layout="total, sizes, prev, pager, next"
            :page-sizes="pageSizes"
            :total="page.total"
            @current-change="load"
            @size-change="search"
          />
      </div>
      <aside class="panel summary-side">
        <div class="panel-title">
          <div><b>模型计费汇总</b><span>当前筛选条件下的积分、次数与成功率</span></div>
        </div>
        <div class="summary-card-list">
          <div v-for="item in summaryCards" :key="item.label" class="summary-card-item">
            <span>{{ displayModelName(item.label) }}</span>
            <strong>{{ item.totalCredits }}</strong>
            <small>{{ item.count }} 笔 / 成功 {{ item.successCount }} / 失败 {{ item.failCount }}</small>
          </div>
          <el-empty v-if="summaryCards.length === 0" description="暂无汇总数据" />
        </div>
      </aside>
      </div>
  </div>
</template>
