<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 pageSizes = [10, 20, 30];
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 });
}

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

onMounted(load);
</script>

<template>
  <div>
    <div class="page-head"><div><h1>操作审计日志</h1><p>运营写操作、失败记录、IP 与变更快照追溯</p></div></div>
    <div class="toolbar">
      <el-input v-model="query.adminId" placeholder="操作人编号" style="width: 160px" />
      <el-input v-model="query.action" placeholder="操作动作" style="width: 220px" />
      <el-input v-model="query.resourceType" placeholder="业务资源类型" style="width: 180px" />
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <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="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="资源编号" width="120" />
        <el-table-column prop="status" label="状态" width="100" />
        <el-table-column label="详情" width="110" fixed="right" align="center"><template #default="{ row }"><div class="row-actions"><el-button text type="primary" @click="selected = row">查看</el-button></div></template></el-table-column>
      </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>
    <el-drawer v-model="selected" title="审计详情" size="48%">
      <pre>{{ JSON.stringify(selected, null, 2) }}</pre>
    </el-drawer>
  </div>
</template>
