<template>
  <div class="tokenlog-page">
    <div class="page-toolbar">
      <el-select v-model="filterConsumed" placeholder="消费状态" clearable style="width:140px" @change="fetchData">
        <el-option label="未消费" :value="0" />
        <el-option label="已消费" :value="1" />
      </el-select>
      <el-button @click="fetchData" :icon="RefreshRight">刷新</el-button>
    </div>

    <el-table :data="list" v-loading="loading" stripe>
      <el-table-column prop="systemCode" label="系统编码" width="120" />
      <el-table-column prop="tokenPreview" label="Token" min-width="220" show-overflow-tooltip />
      <el-table-column label="消费状态" width="90" align="center">
        <template #default="{ row }">
          <el-tag size="small" :type="row.consumed === 1 ? 'success' : 'warning'">
            {{ row.consumed === 1 ? '已消费' : '未消费' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="acquiredAt" label="获取时间" width="170" />
      <el-table-column prop="consumedAt" label="消费时间" width="170">
        <template #default="{ row }">{{ row.consumedAt || '-' }}</template>
      </el-table-column>
      <el-table-column prop="consumeApi" label="消费接口" width="220" show-overflow-tooltip>
        <template #default="{ row }">{{ row.consumeApi || '-' }}</template>
      </el-table-column>
      <el-table-column prop="consumeIp" label="消费IP" width="140">
        <template #default="{ row }">{{ row.consumeIp || '-' }}</template>
      </el-table-column>
    </el-table>

    <div class="page-footer" v-if="total > 0">
      <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
        layout="prev,pager,next" @current-change="fetchData" small />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { RefreshRight } from '@element-plus/icons-vue'
import request from '@/utils/request'

interface TokenLog {
  id: string; systemCode: string; tokenPreview: string
  consumed: number; acquiredAt: string; consumedAt: string
  consumeApi: string; consumeIp: string
}

const loading = ref(false)
const list = ref<TokenLog[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(15)
const filterConsumed = ref<number | null>(null)

async function fetchData() {
  loading.value = true
  try {
    const res = await request.post('/zgapi/v1/admin/email/token-log/page', {
      page: page.value, pageSize: pageSize.value,
      consumed: filterConsumed.value !== null ? filterConsumed.value : undefined,
    })
    list.value = res.data?.records || []
    total.value = res.data?.total || 0
  } catch {} finally { loading.value = false }
}

onMounted(() => fetchData())
</script>

<style scoped>
.tokenlog-page { max-width: 1100px; }
.page-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.page-footer { display:flex; justify-content:center; margin-top:24px; }

@media (max-width: 768px) {
  .page-toolbar { flex-direction: column; gap: 10px; }
  .page-toolbar .el-select { width: 100% !important; }
}
</style>
