<script setup lang="ts">
import { ref } from "vue";
import { useOperationLog } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Delete from "~icons/ep/delete";
import Refresh from "~icons/ep/refresh";
import View from "~icons/ep/view";

defineOptions({
  name: "SystemOperationLog"
});

const formRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  selectedNum,
  statistics,
  pagination,
  tableRef,
  onSearch,
  resetForm,
  handleSelectionChange,
  handleBatchDelete,
  handleClearAll,
  handleViewDetail,
  handleSizeChange,
  handleCurrentChange,
  detailVisible,
  detailData,
  detailLoading
} = useOperationLog();
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="操作模块：" prop="module">
        <el-input
          v-model="form.module"
          placeholder="请输入模块名称"
          clearable
          class="w-[180px]!"
        />
      </el-form-item>
      <el-form-item label="操作人：" prop="username">
        <el-input
          v-model="form.username"
          placeholder="请输入操作人"
          clearable
          class="w-[180px]!"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择"
          clearable
          class="w-[180px]!"
        >
          <el-option label="成功" :value="1" />
          <el-option label="失败" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间：">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          class="w-[180px]!"
        />
        <span class="mx-2">至</span>
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          class="w-[180px]!"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri/search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="操作日志"
      :columns="columns"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-button
          v-if="selectedNum > 0"
          type="danger"
          :icon="useRenderIcon(Delete)"
          @click="handleBatchDelete"
        >
          批量删除 ({{ selectedNum }})
        </el-button>
        <el-popconfirm title="是否确认清空所有日志?" @confirm="handleClearAll">
          <template #reference>
            <el-button type="danger">清空日志</el-button>
          </template>
        </el-popconfirm>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          row-key="id"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(View)"
              @click="handleViewDetail(row)"
            >
              详情
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="操作日志详情"
      width="700px"
      destroy-on-close
    >
      <div v-loading="detailLoading">
        <template v-if="detailData">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="日志ID">{{ detailData.id }}</el-descriptions-item>
            <el-descriptions-item label="操作模块">{{ detailData.module }}</el-descriptions-item>
            <el-descriptions-item label="操作类型">{{ detailData.operationType }}</el-descriptions-item>
            <el-descriptions-item label="操作人">{{ detailData.adminName }}</el-descriptions-item>
            <el-descriptions-item label="请求URL" :span="2">{{ detailData.requestUrl }}</el-descriptions-item>
            <el-descriptions-item label="请求方法">{{ detailData.requestMethod }}</el-descriptions-item>
            <el-descriptions-item label="耗时(ms)">{{ detailData.costTime }}</el-descriptions-item>
            <el-descriptions-item label="IP地址">{{ detailData.ip }}</el-descriptions-item>
            <el-descriptions-item label="操作地点">{{ detailData.address }}</el-descriptions-item>
            <el-descriptions-item label="浏览器">{{ detailData.browser }}</el-descriptions-item>
            <el-descriptions-item label="操作系统">{{ detailData.os }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="detailData.status === 1 ? 'success' : 'danger'">
                {{ detailData.status === 1 ? '成功' : '失败' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="操作时间">{{ detailData.createTime }}</el-descriptions-item>
            <el-descriptions-item v-if="detailData.summary" label="操作概要" :span="2">{{ detailData.summary }}</el-descriptions-item>
            <el-descriptions-item v-if="detailData.errorMsg" label="错误信息" :span="2">
              <span class="text-danger">{{ detailData.errorMsg }}</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="detailData.requestParams" label="请求参数" :span="2">
              <pre class="whitespace-pre-wrap break-all text-xs">{{ detailData.requestParams }}</pre>
            </el-descriptions-item>
            <el-descriptions-item v-if="detailData.responseResult" label="响应结果" :span="2">
              <pre class="whitespace-pre-wrap break-all text-xs">{{ detailData.responseResult }}</pre>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
