<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>我的操作日志</span>
      </div>
    </template>
    
    <el-table :data="logs" v-loading="loading" style="width: 100%" border stripe>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="ipAddress" label="IP地址" width="150"></el-table-column>
      <el-table-column prop="operationTypeDesc" label="操作类型" width="120"></el-table-column>
      <el-table-column prop="description" label="描述" min-width="200"></el-table-column>
      <el-table-column prop="targetId" label="对象ID" width="100"></el-table-column>
      <el-table-column prop="targetType" label="对象类型" width="120"></el-table-column>
      <el-table-column prop="createdAt" label="操作时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.createdAt) }}
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getMyOperationLogs } from '@/api/log'; 
import type { OperationLog } from '@/api/types';

const loading = ref(true);
const logs = ref<OperationLog[]>([]);

const fetchLogs = async () => {
  loading.value = true;
  try {
    logs.value = await getMyOperationLogs();
  } catch (error) {
    ElMessage.error('获取操作日志失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const formatTime = (timeStr: string) => {
  if (!timeStr) return '';
  return new Date(timeStr).toLocaleString();
};

onMounted(() => {
  fetchLogs();
});
</script>

<style scoped>
/* You can add styles if needed */
</style> 