<template>
  <div class="page">
    <div class="page-header">
      <div>
        <div class="page-title">操作日志</div>
        <div class="page-subtitle">查看最近的系统操作记录</div>
      </div>
      <div class="header-actions">
        <el-input v-model="search" placeholder="搜索操作内容" clearable style="width: 240px" />
        <el-button type="primary" @click="load">查询</el-button>
      </div>
    </div>

    <div class="card">
      <div class="table-header">共 {{ total }} 条记录</div>
      <el-table :data="logs" stripe style="width: 100%" v-loading="loading" class="modern-table">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="action" label="操作" width="140" />
        <el-table-column prop="target_type" label="对象" width="100">
          <template #default="{ row }">
            <el-tag size="small" effect="plain" round>{{ row.target_type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="target_name" label="对象名称" min-width="160" />
        <el-table-column prop="details" label="详情" min-width="240" show-overflow-tooltip />
        <el-table-column prop="created_at" label="时间" width="170">
          <template #default="{ row }">
            {{ formatTime(row.created_at) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-bar">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @change="load"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { fetchLogs } from '@/api'

const logs = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const search = ref('')
const loading = ref(false)

onMounted(() => load())

async function load() {
  loading.value = true
  const res = await fetchLogs({ page: page.value, page_size: pageSize.value, search: search.value })
  logs.value = res.data.list
  total.value = res.data.total
  loading.value = false
}

function formatTime(t) {
  if (!t) return '-'
  const d = new Date(t)
  if (isNaN(d.getTime())) return t
  const pad = n => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-size: 18px;
  font-weight: 700;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.header-actions {
  display: flex;
  gap: 10px;
}

.table-header {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
</style>
