<template>
  <div class="logs-page">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>操作日志</span>
        </div>
      </template>
      
      <div class="filter-bar">
        <el-select v-model="filters.operation_type" placeholder="操作类型" clearable style="width: 150px;">
          <el-option label="创建" value="create" />
          <el-option label="更新" value="update" />
          <el-option label="删除" value="delete" />
          <el-option label="启用" value="enable" />
          <el-option label="禁用" value="disable" />
        </el-select>
        
        <el-select v-model="filters.resource_type" placeholder="资源类型" clearable style="width: 150px;">
          <el-option label="租户" value="tenant" />
          <el-option label="配置" value="config" />
          <el-option label="提示词" value="prompt" />
          <el-option label="功能开关" value="feature" />
        </el-select>
        
        <el-button type="primary" @click="fetchLogs">查询</el-button>
      </div>
      
      <el-table :data="logs" v-loading="loading" style="width: 100%;">
        <el-table-column prop="created_at" label="时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column prop="admin_username" label="操作人" width="120" />
        <el-table-column prop="tenant_code" label="租户" width="100" />
        <el-table-column prop="operation_type" label="操作" width="100">
          <template #default="{ row }">
            <el-tag :type="getOperationType(row.operation_type)" size="small">
              {{ getOperationLabel(row.operation_type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="resource_type" label="资源类型" width="100" />
        <el-table-column prop="resource_name" label="资源名称" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button type="primary" link @click="showDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="fetchLogs"
          @current-change="fetchLogs"
        />
      </div>
    </el-card>
    
    <!-- 详情对话框 -->
    <el-dialog v-model="detailVisible" title="操作详情" width="600px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="操作时间">{{ formatDate(currentLog?.created_at) }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ currentLog?.admin_username }}</el-descriptions-item>
        <el-descriptions-item label="租户">{{ currentLog?.tenant_code || '-' }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{ getOperationLabel(currentLog?.operation_type) }}</el-descriptions-item>
        <el-descriptions-item label="资源类型">{{ currentLog?.resource_type }}</el-descriptions-item>
        <el-descriptions-item label="资源名称">{{ currentLog?.resource_name }}</el-descriptions-item>
      </el-descriptions>
      
      <div v-if="currentLog?.old_value" style="margin-top: 20px;">
        <h4>变更前</h4>
        <pre class="json-view">{{ JSON.stringify(currentLog.old_value, null, 2) }}</pre>
      </div>
      
      <div v-if="currentLog?.new_value" style="margin-top: 20px;">
        <h4>变更后</h4>
        <pre class="json-view">{{ JSON.stringify(currentLog.new_value, null, 2) }}</pre>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'

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

const filters = reactive({
  operation_type: '',
  resource_type: ''
})

const detailVisible = ref(false)
const currentLog = ref(null)

function formatDate(date) {
  return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-'
}

function getOperationType(type) {
  const map = {
    create: 'success',
    update: 'warning',
    delete: 'danger',
    enable: 'success',
    disable: 'info'
  }
  return map[type] || 'info'
}

function getOperationLabel(type) {
  const map = {
    create: '创建',
    update: '更新',
    delete: '删除',
    enable: '启用',
    disable: '禁用',
    batch_update: '批量更新',
    rollback: '回滚',
    reset: '重置'
  }
  return map[type] || type
}

async function fetchLogs() {
  // TODO: 调用 API 获取日志
  // 暂时使用模拟数据
  logs.value = []
  total.value = 0
}

function showDetail(log) {
  currentLog.value = log
  detailVisible.value = true
}

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

<style lang="scss" scoped>
.logs-page {
  .filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .json-view {
    background: #f5f7fa;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    overflow: auto;
    max-height: 200px;
  }
}
</style>

