<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>操作日志</span>
      </div>
    </template>
    
    <div class="filter-container">
      <el-input v-model="filters.userId" placeholder="按用户ID搜索" style="width: 200px;"></el-input>
      <el-select v-model="filters.operationType" placeholder="按操作类型筛选" clearable>
        <el-option v-for="item in operationTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-date-picker
        v-model="filters.timeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" :icon="Search" @click="fetchLogs">搜索</el-button>
    </div>

    <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="userName" label="用户名" width="120"></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, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { getOperationLogs } from '@/api/log'; 
import type { OperationLog } from '@/api/types';

const loading = ref(true);
const logs = ref<OperationLog[]>([]);
const filters = reactive({
  userId: '',
  operationType: '',
  timeRange: [] as [Date, Date] | [],
});

const operationTypes = [
    { label: "登录", value: "LOGIN" },
    { label: "登出", value: "LOGOUT" },
    { label: "创建", value: "CREATE" },
    { label: "更新", value: "UPDATE" },
    { label: "删除", value: "DELETE" },
    { label: "分配任务", value: "ASSIGN_TASK" },
    { label: "提交任务", value: "SUBMIT_TASK" },
    { label: "审批任务", value: "APPROVE_TASK" },
    { label: "拒绝任务", value: "REJECT_TASK" },
    { label: "提交反馈", value: "SUBMIT_FEEDBACK" },
    { label: "审批反馈", value: "APPROVE_FEEDBACK" },
    { label: "拒绝反馈", value: "REJECT_FEEDBACK" },
    { label: "其他操作", value: "OTHER" }
];

const fetchLogs = async () => {
  loading.value = true;
  try {
    const params: any = {
      userId: filters.userId || undefined,
      operationType: filters.operationType || undefined,
      startTime: filters.timeRange?.[0]?.toISOString(),
      endTime: filters.timeRange?.[1]?.toISOString(),
    };
    logs.value = await getOperationLogs(params);
  } 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>
.filter-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
</style> 