<template>
  <div class="log-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>日志管理</h2>
      <p>系统操作日志查询与管理</p>
    </div>

    <!-- 搜索表单 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="日志类型">
          <el-select v-model="searchForm.logType" placeholder="请选择日志类型" clearable style="width: 200px">
            <el-option label="操作日志" value="0" />
            <el-option label="异常日志" value="1" />
            <el-option label="登录日志" value="2" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.username"
            placeholder="请输入用户名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        
        <el-form-item label="操作模块">
          <el-input
            v-model="searchForm.module"
            placeholder="请输入操作模块"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        
        <el-form-item label="操作结果">
          <el-select v-model="searchForm.status" placeholder="请选择操作结果" clearable style="width: 200px">
            <el-option label="成功" :value="1" />
            <el-option label="失败" :value="0" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleDateRangeChange"
            style="width: 350px"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮 -->
    <el-card class="toolbar-card" shadow="never">
      <div class="toolbar">
        <div class="toolbar-left">
          <el-button
            type="danger"
            :disabled="selectedLogs.length === 0"
            @click="handleBatchDelete"
          >
            <el-icon><Delete /></el-icon>
            批量删除
          </el-button>
          <el-button type="warning" @click="handleCleanExpired">
            <el-icon><Delete /></el-icon>
            清理过期日志
          </el-button>
          <el-button type="info" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出日志
          </el-button>
        </div>
        <div class="toolbar-right">
          <el-button @click="handleRefresh" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 日志列表 -->
    <el-card class="table-card" shadow="never">
      
      <el-table
        v-loading="loading"
        :data="logList"
        @selection-change="handleSelectionChange"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="50" align="center" />
        
        <el-table-column prop="logId" label="日志ID" width="80" align="center" />
        
        <el-table-column prop="logTypeText" label="日志类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getLogTypeTagType(row.logType)" size="small">
              {{ row.logTypeText }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="username" label="用户名" width="100" align="center" />
        
        <el-table-column prop="module" label="操作模块" width="120" align="center" />
        
        <el-table-column prop="operation" label="操作内容" min-width="180" show-overflow-tooltip />
        
        <el-table-column prop="ip" label="IP地址" width="120" align="center" />
        
        <el-table-column prop="logTime" label="操作时间" width="160" align="center">
          <template #default="{ row }">
            {{ formatDate(row.logTime) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="statusText" label="操作结果" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
              {{ row.statusText }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="140" fixed="right" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="handleViewDetail(row)"
              link
            >
              详情
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row)"
              link
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 日志详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="日志详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="logDetail" class="log-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="日志ID">
            {{ logDetail.logId }}
          </el-descriptions-item>
          <el-descriptions-item label="日志类型">
            <el-tag :type="getLogTypeTagType(logDetail.logType)">
              {{ logDetail.logTypeText }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
            {{ logDetail.username }}
          </el-descriptions-item>
          <el-descriptions-item label="用户ID">
            {{ logDetail.userId }}
          </el-descriptions-item>
          <el-descriptions-item label="操作模块">
            {{ logDetail.module }}
          </el-descriptions-item>
          <el-descriptions-item label="操作内容">
            {{ logDetail.operation }}
          </el-descriptions-item>
          <el-descriptions-item label="IP地址">
            {{ logDetail.ip }}
          </el-descriptions-item>
          <el-descriptions-item label="操作时间">
            {{ formatDate(logDetail.logTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="操作结果">
            <el-tag :type="logDetail.status === 1 ? 'success' : 'danger'">
              {{ logDetail.statusText }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="错误信息" v-if="logDetail.errorMsg">
            {{ logDetail.errorMsg }}
          </el-descriptions-item>
        </el-descriptions>
        
        <div v-if="logDetail.requestParam" class="request-param">
          <h4>请求参数</h4>
          <el-input
            v-model="logDetail.requestParam"
            type="textarea"
            :rows="6"
            readonly
            placeholder="无请求参数"
          />
        </div>
      </div>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 清理过期日志对话框 -->
    <el-dialog
      v-model="cleanDialogVisible"
      title="清理过期日志"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-form :model="cleanForm" label-width="100px">
        <el-form-item label="过期天数">
          <el-input-number
            v-model="cleanForm.expireDays"
            :min="1"
            :max="365"
            placeholder="请输入过期天数"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item>
          <el-text type="warning">
            将删除指定天数之前的所有日志记录，此操作不可恢复！
          </el-text>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="cleanDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleConfirmClean" :loading="cleanLoading">
          确认清理
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Delete, Download } from '@element-plus/icons-vue'
import { logApi, type Log, type LogDetail, type LogSearchParams } from '@/api/log'
import { formatDate } from '@/utils/index'

// 响应式数据
const loading = ref(false)
const logList = ref<Log[]>([])
const selectedLogs = ref<Log[]>([])
const detailDialogVisible = ref(false)
const logDetail = ref<LogDetail | null>(null)
const cleanDialogVisible = ref(false)
const cleanLoading = ref(false)
const dateRange = ref<[string, string] | null>(null)

// 搜索表单
const searchForm = reactive<LogSearchParams>({
  pageNum: 1,
  pageSize: 10,
  logType: '',
  username: '',
  module: '',
  status: undefined,
  startTime: '',
  endTime: ''
})

// 分页信息
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 清理表单
const cleanForm = reactive({
  expireDays: 30
})

// 获取日志类型标签类型
const getLogTypeTagType = (logType: string) => {
  switch (logType) {
    case '0':
      return 'primary'
    case '1':
      return 'danger'
    case '2':
      return 'success'
    default:
      return 'info'
  }
}


// 导出日志
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 获取日志列表
const getLogList = async () => {
  try {
    loading.value = true
    const params = {
      ...searchForm,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize
    }
    
    const response = await logApi.getLogList(params)
    if (response.code === 200) {
      logList.value = response.data.records
      pagination.total = response.data.total
    } else {
      ElMessage.error(response.message || '获取日志列表失败')
    }
  } catch (error) {
    console.error('获取日志列表失败:', error)
    ElMessage.error('获取日志列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.pageNum = 1
  getLogList()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    pageNum: 1,
    pageSize: 10,
    logType: '',
    username: '',
    module: '',
    status: undefined,
    startTime: '',
    endTime: ''
  })
  dateRange.value = null
  pagination.pageNum = 1
  getLogList()
}

// 刷新
const handleRefresh = () => {
  getLogList()
}

// 时间范围变化
const handleDateRangeChange = (value: [string, string] | null) => {
  if (value) {
    searchForm.startTime = value[0]
    searchForm.endTime = value[1]
  } else {
    searchForm.startTime = ''
    searchForm.endTime = ''
  }
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  getLogList()
}

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.pageNum = page
  getLogList()
}

// 选择变化
const handleSelectionChange = (selection: Log[]) => {
  selectedLogs.value = selection
}

// 查看详情
const handleViewDetail = async (row: Log) => {
  try {
    const response = await logApi.getLogDetail(row.logId)
    if (response.code === 200) {
      logDetail.value = response.data
      detailDialogVisible.value = true
    } else {
      ElMessage.error(response.message || '获取日志详情失败')
    }
  } catch (error) {
    console.error('获取日志详情失败:', error)
    ElMessage.error('获取日志详情失败')
  }
}

// 删除日志
const handleDelete = async (row: Log) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除日志ID为 ${row.logId} 的记录吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await logApi.deleteLog(row.logId)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      getLogList()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除日志失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedLogs.value.length === 0) {
    ElMessage.warning('请选择要删除的日志')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedLogs.value.length} 条日志记录吗？`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const logIds = selectedLogs.value.map(log => log.logId)
    const response = await logApi.deleteLogs(logIds)
    if (response.code === 200) {
      ElMessage.success('批量删除成功')
      getLogList()
    } else {
      ElMessage.error(response.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除日志失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 清理过期日志
const handleCleanExpired = () => {
  cleanDialogVisible.value = true
}

// 确认清理
const handleConfirmClean = async () => {
  if (!cleanForm.expireDays || cleanForm.expireDays <= 0) {
    ElMessage.warning('请输入有效的过期天数')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要清理 ${cleanForm.expireDays} 天前的所有日志记录吗？此操作不可恢复！`,
      '确认清理',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    cleanLoading.value = true
    const response = await logApi.cleanExpiredLogs(cleanForm.expireDays)
    if (response.code === 200) {
      ElMessage.success(response.data)
      cleanDialogVisible.value = false
      getLogList()
    } else {
      ElMessage.error(response.message || '清理失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清理过期日志失败:', error)
      ElMessage.error('清理失败')
    }
  } finally {
    cleanLoading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  getLogList()
})
</script>

<style scoped>
.log-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.search-card {
  margin-bottom: 16px;
}

.search-form {
  margin-bottom: 0;
}

.toolbar-card {
  margin-bottom: 16px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 8px;
}

.table-card {
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.log-detail {
  max-height: 600px;
  overflow-y: auto;
}

.request-param {
  margin-top: 20px;
}

.request-param h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

/* 表格优化 */
.el-table {
  font-size: 14px;
}

.el-table .cell {
  padding: 8px 12px;
  line-height: 1.5;
}

.el-table th.el-table__cell {
  background: #fafafa;
  color: #606266;
  font-weight: 600;
}

.el-table td.el-table__cell {
  padding: 12px 0;
}

.el-table .el-button + .el-button {
  margin-left: 8px;
}
</style>