<template>
  <div class="app-container">
    <div class="page-title">
      <el-icon class="title-icon"><Lock /></el-icon>
      <span>加密日志</span>
    </div>
    <div class="search-box">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="用户" prop="user">
          <el-select
            v-model="queryParams.user"
            placeholder="请选择"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.realname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="range">
          <el-select
            v-model="queryParams.range"
            placeholder="请选择时间"
            style="width: 200px"
            @change="handleTimeRangeChange"
          >
            <el-option
              v-for="item in timeRangeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目级" prop="projectId">
          <el-select
            v-model="queryParams.projectId"
            placeholder="请选择项目级"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in projectLevelOptions"
              :key="item.id"
              :label="item.project"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
          <el-button type="primary" @click="handleCheck">数据完整性校验</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="loading"
      :data="logList"
      border
      style="width: 100%"
    >
      <el-table-column prop="user" label="用户" align="left" />
      <el-table-column prop="time" label="时间" align="left" width="180" />
      <el-table-column prop="moduleId" label="模块编号" align="left" width="120" />
      <el-table-column prop="moduleName" label="操作模块" align="left" width="150" />
      <el-table-column prop="operation" label="操作信息" align="left" show-overflow-tooltip />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Lock } from '@element-plus/icons-vue'

const loading = ref(true)
const total = ref(0)
const logList = ref([])
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  user: undefined,
  range: '0',
  startTime: '',
  endTime: '',
  module: undefined,
  projectId: undefined
})

const userOptions = ref([
  { id: 'admin', realname: 'admin' },
  { id: 'system', realname: 'system' },
  { id: 'test', realname: 'test' }
])

const timeRangeOptions = ref([
  { value: '0', label: '今天' },
  { value: '3', label: '近三天' },
  { value: '7', label: '近一周' },
  { value: '30', label: '近一个月' },
  { value: '90', label: '近三个月' },
  { value: '180', label: '近半年' },
  { value: '全部', label: '全部' }
])

const projectLevelOptions = ref([
  { id: '1', project: '一级' },
  { id: '2', project: '二级' },
  { id: '3', project: '三级' }
])

const pageCount = computed(() => {
  const t = Number(total.value) || 0
  const ps = Number(queryParams.pageSize) || 1
  return Math.ceil(t / ps)
})

const getList = () => {
  loading.value = true
  setTimeout(() => {
    logList.value = [
      {
        user: 'admin',
        time: '2025-08-19 19:36:25',
        moduleId: 'DDM_00000',
        moduleName: '系统模块',
        operation: '用户登录'
      },
      {
        user: 'admin',
        time: '2025-08-19 19:01:36',
        moduleId: 'DDM_00001',
        moduleName: '用户管理-用户',
        operation: '用户[admin]登录到系统平台。'
      }
    ]
    total.value = 53
    loading.value = false
  }, 200)
}

const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

const handleExport = () => {
  window.$modal.confirm('是否确认导出所有操作日志数据？').then(() => {
    // 实际导出逻辑
    window.$modal.msgSuccess('导出成功')
  }).catch(() => {})
}

const handleCheck = () => {
  window.$modal.msgSuccess('数据完整性校验完成')
}

const handleTimeRangeChange = (value) => {
  const now = new Date()
  let startTime = new Date()

  switch (value) {
    case 'last3days':
      startTime.setDate(now.getDate() - 3)
      break
    case 'lastWeek':
      startTime.setDate(now.getDate() - 7)
      break
    case 'lastMonth':
      startTime.setMonth(now.getMonth() - 1)
      break
    case 'last3Months':
      startTime.setMonth(now.getMonth() - 3)
      break
    case 'lastHalfYear':
      startTime.setMonth(now.getMonth() - 6)
      break
    case 'all':
      startTime = null
      break
  }

  if (startTime) {
    queryParams.startTime = startTime.toISOString().split('T')[0] + ' 00:00:00'
    queryParams.endTime = now.toISOString().split('T')[0] + ' 23:59:59'
  } else {
    queryParams.startTime = ''
    queryParams.endTime = ''
  }

  handleQuery()
}

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

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .page-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;

    .title-icon {
      margin-right: 8px;
      font-size: 20px;
      color: #409EFF;
    }
  }
  
  .search-box {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    text-align: left;

    :deep(.el-form) {
      justify-content: flex-start;
    }

    :deep(.el-form--inline .el-form-item) {
      margin-right: 20px;
    }
  }
  
  .el-table {
    margin-top: 20px;
  }

  :deep(.el-table) {
    text-align: left;
  }

  :deep(.el-cascader) {
    width: 100%;
  }
}
</style>
