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

const query = reactive({ adminId: '', action: '', resourceType: '', page: 1, size: 20 });
const page = ref<PageResult<any>>({ records: [], total: 0, page: 1, size: 20 });
const selected = ref<any>(null);

async function load() {
  page.value = await http.get('/audit-logs', { params: query });
}

onMounted(load);
</script>

<template>
  <div>
    <div class="page-head"><div><h1>审计日志</h1><p>运营操作轨迹与失败记录</p></div></div>
    <div class="toolbar">
      <el-input v-model="query.adminId" placeholder="Admin ID" style="width: 160px" />
      <el-input v-model="query.action" placeholder="Action" style="width: 220px" />
      <el-input v-model="query.resourceType" placeholder="Resource" style="width: 180px" />
      <el-button type="primary" @click="load">查询</el-button>
    </div>
    <div class="panel">
      <el-table :data="page.records">
        <el-table-column prop="createdAt" label="时间" width="180" />
        <el-table-column prop="adminUsername" label="操作人" width="140" />
        <el-table-column prop="action" label="动作" min-width="190" />
        <el-table-column prop="resourceType" label="资源" width="120" />
        <el-table-column prop="resourceId" label="资源 ID" width="120" />
        <el-table-column prop="status" label="状态" width="100" />
        <el-table-column label="详情" width="90"><template #default="{ row }"><el-button text type="primary" @click="selected = row">查看</el-button></template></el-table-column>
      </el-table>
    </div>
    <el-drawer v-model="selected" title="审计详情" size="48%">
      <pre>{{ JSON.stringify(selected, null, 2) }}</pre>
    </el-drawer>
  </div>
</template>
