<template>
  <div class="audit-log-management">
    <!-- 查询条件区域 -->
    <el-card class="filter-card">
      <el-form :model="queryParams" ref="searchForm" :inline="true" class="search-form">
        <!-- 基础信息条件 -->
        <el-form-item label="日志ID">
          <el-input v-model="queryParams.logId" placeholder="请输入日志ID" clearable />
        </el-form-item>

        <el-form-item label="操作人">
          <el-input v-model="queryParams.operator" placeholder="请输入操作人" clearable />
        </el-form-item>

        <!-- 操作详情条件 -->
        <el-form-item label="操作类型">
          <el-select v-model="queryParams.operateType" placeholder="请选择操作类型" style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="控制操作" value="控制" />
            <el-option label="广播操作" value="广播" />
            <el-option label="配置变更" value="配置" />
          </el-select>
        </el-form-item>

        <!-- 执行结果条件 -->
        <el-form-item label="执行状态">
          <el-select v-model="queryParams.successStatus" placeholder="请选择执行状态" style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="成功" value="成功" />
            <el-option label="失败" value="失败" />
          </el-select>
        </el-form-item>

        <!-- 时间范围条件 -->
        <el-form-item label="操作时间">
          <el-date-picker
              v-model="queryParams.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          <el-button icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格区域 -->
    <el-card class="data-table">
      <el-table
          :data="auditLogList"
          border
          size="small"
          v-loading="isLoading"
          row-key="logId"
          @row-click="handleRowClick"
      >
        <el-table-column label="日志ID" prop="logId" align="center" width="180" />
        <el-table-column label="操作时间" prop="operateTime" align="center" width="220" />
        <el-table-column label="操作人" prop="operator" align="center" width="120" />
        <el-table-column label="操作类型" prop="operateType" align="center" width="120">
          <template #default="scope">
            <el-tag :type="getOperateTypeColor(scope.row.operateType)">
              {{ mapOperateType(scope.row.operateType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="目标对象" prop="targetObject" align="center" min-width="180">
          <template #default="scope">
            {{ scope.row.targetObject === 'ZONE-ALL' ? '全区' : scope.row.targetObject.replace(/-/g, "分区") }}
          </template>
        </el-table-column>
        <el-table-column label="变更内容" align="center" min-width="200">
          <template #default="scope">
            <div v-if="scope.row.operateType === '配置'">
              <span>修改前：{{ scope.row.oldValue || "-" }}</span><br>
              <span>修改后：{{ scope.row.newValue || "-" }}</span>
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column label="执行状态" prop="successStatus" align="center" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.successStatus === '成功' ? 'success' : 'danger'">
              {{ scope.row.successStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="影响范围" prop="affectRange" align="center" min-width="180" />
        <el-table-column label="耗时" prop="duration" align="right" width="100" />
        <el-table-column label="IP地址" prop="ipAddress" align="center" width="160" />
        <el-table-column label="设备指纹" prop="deviceFingerprint" align="center" width="160" />
      </el-table>

      <!-- 分页组件 -->
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog :visible.sync="detailDialogOpen" title="审计日志详情" width="800px">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="日志ID" span="1">{{ detailLog.logId }}</el-descriptions-item>
        <el-descriptions-item label="操作时间" span="1">{{ detailLog.operateTime }}</el-descriptions-item>
        <el-descriptions-item label="操作人" span="1">{{ detailLog.operator }}</el-descriptions-item>
        <el-descriptions-item label="操作类型" span="1">
          <el-tag :type="getOperateTypeColor(detailLog.operateType)">
            {{ mapOperateType(detailLog.operateType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="目标对象" span="2">
          {{ detailLog.targetObject === 'ZONE-ALL' ? '全区' : detailLog.targetObject.replace(/-/g, "分区") }}
        </el-descriptions-item>
        <el-descriptions-item label="变更内容" span="3" v-if="detailLog.operateType === '配置'">
          <div>
            <span>修改前：{{ detailLog.oldValue || "无" }}</span><br>
            <span>修改后：{{ detailLog.newValue || "无" }}</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="执行状态" span="1">
          <el-tag :type="detailLog.successStatus === '成功' ? 'success' : 'danger'">
            {{ detailLog.successStatus }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="影响范围" span="1">{{ detailLog.affectRange }}</el-descriptions-item>
        <el-descriptions-item label="耗时" span="1">{{ detailLog.duration }}</el-descriptions-item>
        <el-descriptions-item label="IP地址" span="1">{{ detailLog.ipAddress }}</el-descriptions-item>
        <el-descriptions-item label="设备指纹" span="1">{{ detailLog.deviceFingerprint }}</el-descriptions-item>
        <el-descriptions-item label="数字签名" span="2">{{ detailLog.digitalSignature }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogOpen = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import {getBroadcastLogList} from "@/api/publicBroadcasting/publicBroadcasting"; // 假设API路径

// 查询参数
const queryParams = reactive({
  logId: '',
  operator: '',
  operateType: '',
  successStatus: '',
  timeRange: null,
  pageNum: 1,
  pageSize: 10,
  interfaceName: "操作日志与审计"
});

// 表格数据
const auditLogList = ref([]);
const total = ref(0);
const isLoading = ref(false);
const detailDialogOpen = ref(false);
const detailLog = ref({});

// 获取数据
const getList = async () => {
  isLoading.value = true;
  try {
    const mockData = getBroadcastLogList(queryParams);
    // 过滤条件处理
    let filteredData =  [];

    // 日志ID过滤
    if (queryParams.logId) {
      filteredData = filteredData.filter(item => item.logId.includes(queryParams.logId));
    }

    // 操作人过滤
    if (queryParams.operator) {
      filteredData = filteredData.filter(item => item.operator.includes(queryParams.operator));
    }

    // 操作类型过滤
    if (queryParams.operateType) {
      filteredData = filteredData.filter(item => item.operateType === queryParams.operateType);
    }

    // 执行状态过滤
    if (queryParams.successStatus) {
      filteredData = filteredData.filter(item => item.successStatus === queryParams.successStatus);
    }

    // 时间范围过滤
    if (queryParams.timeRange && queryParams.timeRange.length === 2) {
      const [startTime, endTime] = queryParams.timeRange;
      filteredData = filteredData.filter(item => {
        const logTime = new Date(item.operateTime);
        return logTime >= new Date(startTime) && logTime <= new Date(endTime);
      });
    }

    // 分页处理
    total.value = 0;
    const start = (queryParams.pageNum - 1) * queryParams.pageSize;
    const end = start + queryParams.pageSize;
    auditLogList.value = filteredData.slice(start, end);
  } catch (error) {
    ElMessage.error('获取日志数据失败');
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置
const resetSearch = () => {
  queryParams.logId = '';
  queryParams.operator = '';
  queryParams.operateType = '';
  queryParams.successStatus = '';
  queryParams.timeRange = null;
  queryParams.pageNum = 1;
  getList();
};

// 分页
const handlePageChange = (newPage) => {
  queryParams.pageNum = newPage;
  getList();
};

const handleSizeChange = (newSize) => {
  queryParams.pageSize = newSize;
  queryParams.pageNum = 1;
  getList();
};

// 行点击事件（打开详情弹窗）
const handleRowClick = (row) => {
  detailLog.value = { ...row };
  detailDialogOpen.value = true;
};

// 操作类型映射
const mapOperateType = (type) => {
  return {
    '控制': '控制操作',
    '广播': '广播操作',
    '配置': '配置变更',
  }[type] || type;
};

// 操作类型颜色
const getOperateTypeColor = (type) => {
  return {
    '控制': 'primary',
    '广播': 'warning',
    '配置': 'success',
  }[type] || 'info';
};

getList()
</script>

<style scoped>
.filter-card {
  margin-bottom: 20px;
  padding: 20px;
}

.data-table {
  min-height: 500px;
}

.el-descriptions {
  margin-bottom: 20px;
}

.el-tag {
  margin-right: 5px;
}
</style>
