<template>
   <div class="app-container">
      <div class="operlog-container">
        <!-- 搜索区域 -->
        <div class="search-area">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入系统模块"
            clearable
            prefix-icon="Search"
            class="search-input"
            @keyup.enter="handleQuery"
          />
          
          
          
          <div class="search-buttons">
            <el-button type="primary" class="search-btn" @click="handleQuery">搜索</el-button>
            <el-button class="reset-btn" @click="resetQuery">重置</el-button>
          </div>
          
         
        </div>

        <!-- 操作日志表格 -->
        <el-table
          v-loading="loading"
          :data="operlogList"
          style="width: 100%"
          class="custom-table"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
        >
      
          <el-table-column label="序号" width="60" align="left">
            <template #default="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="120">
            <template #default="scope">
              <el-button link text @click="handleView(scope.row)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
            </template>
          </el-table-column>
          <el-table-column label="日志编号" align="left" prop="operId" />
          <el-table-column label="系统模块" align="left" prop="title" />
          <el-table-column label="操作类型" align="left" prop="businessType">
            <template #default="scope">
              <span class="dict-text">{{ typeFormat(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="请求方式" align="left" prop="requestMethod" />
          <el-table-column label="操作人员" align="left" prop="operName"  />
          <el-table-column label="主机" align="left" prop="operIp" width="130" :show-overflow-tooltip="true" />
          <el-table-column label="操作状态" align="left" prop="status">
            <template #default="scope">
              <div class="status-item" :class="{'status-success': scope.row.status === 0}">
                <span v-if="scope.row.status === 0" class="status-dot"></span>
                <span class="status-text">{{ statusFormat(scope.row) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作日期" align="left" prop="operTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.operTime) }}</span>
            </template>
          </el-table-column>
          
        </el-table>

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

      <!-- 操作日志详细 -->
      <el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
         <el-form :model="form" label-width="100px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
                  <el-form-item
                    label="登录信息："
                  >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
                  <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="操作状态：">
                     <div v-if="form.status === 0" class="status-item status-success">
                       <span class="status-dot"></span>
                       <span class="status-text">成功</span>
                     </div>
                     <div v-else-if="form.status === 1">失败</div>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button class="export-btn" @click="open = false">关 闭</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="SystemOperlogIndex">
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";

const { proxy } = getCurrentInstance();
const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type","sys_common_status");

const operlogList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const single = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const defaultSort = ref({ prop: "operTime", order: "descending" });

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 8,
    title: undefined,
    operName: undefined,
    businessType: undefined,
    status: undefined
  }
});

const { queryParams, form } = toRefs(data);

/** 查询登录日志 */
function getList() {
  loading.value = true;
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    operlogList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
}
/** 操作状态字典翻译 */
function statusFormat(row, column) {
  return proxy.selectDictLabel(sys_common_status.value, row.status);
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.pageNum = 1;
  getList();
}
/** 排序触发事件 */
function handleSortChange(column) {
  queryParams.value.orderByColumn = column.prop;
  queryParams.value.isAsc = column.order;
  getList();
}
/** 详细按钮操作 */
function handleView(row) {
  open.value = true;
  form.value = row;
}
/** 删除按钮操作 */
function handleDelete(row) {
  const operIds = row.operId;
  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
    return delOperlog(operIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
/** 清空按钮操作 */
function handleClean() {
  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
    return cleanOperlog();
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("清空成功");
  }).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/operlog/export",{
    ...queryParams.value,
  }, `operlog_${new Date().getTime()}.xlsx`);
}

getList();
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #292C38;
  color: #ffffff;
  min-height: 100%;
 
  border-radius: 10px;
}

.operlog-container {
  background-color: #292c38;
  border-radius: 4px;
   height: calc(100vh - 180px);
  overflow-y: auto;
}

.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
  .search-input {
    width: 250px;
    margin-right: 10px;
  }
  
  .search-select {
    width: 150px;
    margin-right: 10px;
  }
  
  .search-buttons {
    margin-right: 20px;
    display: flex;
    gap: 10px;
  }
  
  .action-buttons {
    margin-left: auto;
    display: flex;
    gap: 10px;
  }
}

// 输入框 下拉框 搜索栏
:deep(.el-input__wrapper:hover) {
  box-shadow: none !important;
}

:deep(.el-select) {
  border: none !important;
  width: 140px !important;
  // 修改el-select的输入框的border 
  --el-border-color-hover: #343744 !important;
  --el-border-color: #343744 !important;
}

:deep(.el-select__wrapper.is-focused) {
  box-shadow: none !important;
}

:deep(.el-select__wrapper) {
  background: #343744 !important;
  color: #96A0B5 !important;
  border-radius: 8px !important;
  height: 36px !important;
  width: 140px;
  font-size: 15px;
  border: none !important;
}

:deep(.el-input__wrapper) {
  background: #343744 !important;
  color: #96A0B5 !important;
  border-radius: 8px !important;
  height: 36px !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-select__placeholder) {
  color: #96A0B5 !important;
}

.custom-table {
  background-color: #292c38;
  color: #ffffff;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  
  :deep(.el-table__inner-wrapper::before) {
    display: none; /* 隐藏表格顶部的边框线 */
  }
  
  :deep(.el-table__header) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
  }
  
  :deep(.el-table__header-wrapper) {
    th {
      background-color: #343744 !important;
      color: #96A0B5 !important;
      font-weight: normal;
      border-bottom: none; /* 移除th底部边线 */
    }
    
    tr th.el-table__cell:first-child {
      border-top-left-radius: 6px;
      
      .cell {
        border-top-left-radius: 6px;
      }
    }
    
    tr th.el-table__cell:last-child {
      border-top-right-radius: 4px;
      
      .cell {
        border-top-right-radius: 4px;
      }
    }
    
    .el-table__header th.el-table__cell {
      background-color: #343744 !important;
      color: #96A0B5;
    }
    
    tr {
      background-color: #343744 !important;
    }
  }
  
  :deep(.el-table__body-wrapper) {
    td {
      height: 68px!important;
      background-color: #292c38;
      color: #ffffff;
      border-bottom: 1px solid #4C4F5F;
    }
  }
  
  :deep(.el-table__body tr:hover > td) {
    background: #2B3B5A!important; 
  }
  
  :deep(.el-button--link) {
    border: none;
    background: transparent;
    color: #347AE2;
    padding: 0;
    margin: 0 5px;
  }
  
  :deep(.el-button.is-text) {
    background-color: transparent !important;
    border-color: transparent;
    color: #347AE2;
    
    &:hover, &:focus, &:active {
      background-color: transparent !important;
      color: #347AE2;
    }
  }
  
  :deep(.el-button.el-button--primary.is-text) {
    background-color: transparent !important;
    color: #347AE2;
    
    &:hover {
      background-color: transparent !important;
      color: #347AE2;
    }
  }
  
  :deep(.el-table__body tr:hover .el-button--link.is-text) {
    background-color: transparent !important;
    color: #347AE2;
  }
}

// 字典文本样式
.dict-text {
  display: inline-block;
  color: #ffffff;
}

// 操作状态样式
.status-item {
  display: flex;
  align-items: center;
  
  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #27AE60;
    margin-right: 8px;
  }
  
  .status-text {
    display: inline-block;
  }
  
  &.status-success {
    .status-text {
      color: #27AE60;
    }
  }
}
</style>
