<template>
  <div class="app-container">
    <div class="page-title">
      <el-icon class="title-icon"><Coin /></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>
import { Coin } from '@element-plus/icons-vue'

export default {
  name: 'DesensitizationLog',
  components: {
    Coin
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 日志列表
      logList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        user: undefined,
        range: '0', // 默认选择近三天
        startTime: '',
        endTime: '',
        module: undefined,
        projectId: undefined
      },
      // 用户选项
      userOptions: [
        { id: 'admin', realname: 'admin' },
        { id: 'system', realname: 'system' },
        { id: 'test', realname: 'test' }
      ],
      // 时间范围选项
      timeRangeOptions: [
        { value: '0', label: '今天' },
        { value: '3', label: '近三天' },
        { value: '7', label: '近一周' },
        { value: '30', label: '近一个月' },
        { value: '90', label: '近三个月' },
        { value: '180', label: '近半年' },
        { value: '全部', label: '全部' }
      ],
      // 项目级选项
      projectLevelOptions: [
        { id: '1', project: '一级' },
        { id: '2', project: '二级' },
        { id: '3', project: '三级' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询日志列表 */
    getList() {
      this.loading = true
      // 这里替换为实际的API调用
      // listOperlog(this.queryParams).then(response => {
      //   this.logList = response.rows
      //   this.total = response.total
      //   this.loading = false
      // })
      
      // 模拟数据
      setTimeout(() => {
        this.logList = [
          {
            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]登录到系统平台。'
          }
        ]
        this.total = 53
        this.loading = false
      }, 200)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$modal.confirm('是否确认导出所有操作日志数据？').then(() => {
        this.downloading = true
        // 实际导出逻辑
        // return exportOperlog(this.queryParams)
      }).then(() => {
        this.$modal.msgSuccess('导出成功')
        this.downloading = false
      }).catch(() => {})
    },
    
    /** 数据完整性校验操作 */
    handleCheck() {
      // 实际数据完整性校验逻辑
      this.$modal.msgSuccess('数据完整性校验完成')
    },
    
    // 处理时间范围变化
    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) {
        this.queryParams.startTime = startTime.toISOString().split('T')[0] + ' 00:00:00'
        this.queryParams.endTime = now.toISOString().split('T')[0] + ' 23:59:59'
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      
      this.handleQuery()
    }
  }
}
</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>
