<template>
   <div class="app-container">
      <basic-table
         ref="tableRef"
         :columns="columns"
         :search-columns="searchColumns"
         :query="queryList"
         row-key="operId"
         :default-sort="defaultSort"
         :default-params="defaultParams"
         @sort-change="handleSortChange"
      >
         <template #toolbar="{ selection, ids }">
            <el-col :span="1.5">
               <el-button
                  type="danger"
                  plain
                  icon="Delete"
                  :disabled="!selection.length"
                  @click="handleDelete(ids)"
                  v-hasPermi="['monitor:operlog:remove']"
               >删除</el-button>
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="danger"
                  plain
                  icon="Delete"
                  @click="handleClean"
                  v-hasPermi="['monitor:operlog:remove']"
               >清空</el-button>
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="warning"
                  plain
                  icon="Download"
                  @click="handleExport"
                  v-hasPermi="['monitor:operlog:export']"
               >导出</el-button>
            </el-col>
         </template>

         <template #col-action="{ row }">
            <el-button link type="primary" icon="View" @click="handleDetail(row)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
         </template>
      </basic-table>

      <operlog-detail v-model:visible="detailVisible" :row="detailRow" />
   </div>
</template>

<script setup name="Operlog">
import OperlogDetail from './detail'
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"

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

const tableRef = ref()
const detailVisible = ref(false)
const detailRow = ref({})

// 默认排序
const defaultSort = { prop: "operTime", order: "descending" }

// 默认查询参数（含排序初始值，重置时由 BasicTable 自动恢复）
const defaultParams = {
  orderByColumn: "operTime",
  isAsc: "descending"
}

// 搜索项配置
const searchColumns = [
  { label: "操作地址", prop: "operIp", component: "input", placeholder: "请输入操作地址", width: "240px" },
  { label: "系统模块", prop: "title", component: "input", placeholder: "请输入系统模块", width: "240px" },
  { label: "操作人员", prop: "operName", component: "input", placeholder: "请输入操作人员", width: "240px" },
  { label: "类型", prop: "businessType", component: "select", dict: "sys_oper_type", placeholder: "操作类型", width: "240px" },
  { label: "状态", prop: "status", component: "select", dict: "sys_common_status", placeholder: "操作状态", width: "240px" },
  { label: "操作时间", prop: "dateRange", component: "daterange", width: "308px" }
]

// 表格列配置
const columns = [
  { label: "日志编号", prop: "operId", align: "center" },
  { label: "系统模块", prop: "title", align: "center" },
  { label: "操作类型", prop: "businessType", align: "center", dict: "sys_oper_type" },
  { label: "操作人员", prop: "operName", align: "center", width: 110, sortable: "custom" },
  { label: "操作地址", prop: "operIp", align: "center", width: 130 },
  { label: "操作状态", prop: "status", align: "center", dict: "sys_common_status" },
  { label: "操作日期", prop: "operTime", align: "center", width: 180, sortable: "custom", parseTime: true },
  { label: "消耗时间", prop: "costTime", align: "center", width: 110, sortable: "custom", formatter: (row, col, val) => val + '毫秒' },
  { label: "操作", prop: "action", align: "center", showInToolbar: false }
]

// 查询函数
function queryList(params) {
  const p = proxy.addDateRange({ ...params }, params.dateRange)
  delete p.dateRange
  return list(p)
}

/** 排序触发事件 */
function handleSortChange(column) {
  tableRef.value.setQueryParams({ orderByColumn: column.prop, isAsc: column.order })
  tableRef.value.reload()
}

/** 详细按钮操作 */
function handleDetail(row) {
  detailRow.value = row
  detailVisible.value = true
}

/** 删除按钮操作 */
function handleDelete(operIds) {
  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
    return delOperlog(operIds)
  }).then(() => {
    tableRef.value.refresh()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 清空按钮操作 */
function handleClean() {
  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
    return cleanOperlog()
  }).then(() => {
    tableRef.value.refresh()
    proxy.$modal.msgSuccess("清空成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/operlog/export", {
    ...tableRef.value.getQueryParams()
  }, `config_${new Date().getTime()}.xlsx`)
}
</script>
