<template>
   <div class="app-container">
      <basic-table
         ref="tableRef"
         :columns="columns"
         :search-columns="searchColumns"
         :query="queryList"
         row-key="infoId"
         :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:logininfor:remove']"
               >删除</el-button>
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="danger"
                  plain
                  icon="Delete"
                  @click="handleClean"
                  v-hasPermi="['monitor:logininfor:remove']"
               >清空</el-button>
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  plain
                  icon="Unlock"
                  :disabled="selection.length !== 1"
                  @click="handleUnlock(selection)"
                  v-hasPermi="['monitor:logininfor:unlock']"
               >解锁</el-button>
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="warning"
                  plain
                  icon="Download"
                  @click="handleExport"
                  v-hasPermi="['monitor:logininfor:export']"
               >导出</el-button>
            </el-col>
         </template>
      </basic-table>
   </div>
</template>

<script setup name="Logininfor">
import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor"

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

const tableRef = ref()

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

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

// 搜索项配置
const searchColumns = [
  { label: "登录地址", prop: "ipaddr", component: "input", placeholder: "请输入登录地址", width: "240px" },
  { label: "用户名称", prop: "userName", component: "input", 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: "infoId", align: "center" },
  { label: "用户名称", prop: "userName", align: "center", sortable: "custom" },
  { label: "地址", prop: "ipaddr", align: "center" },
  { label: "登录地点", prop: "loginLocation", align: "center" },
  { label: "操作系统", prop: "os", align: "center" },
  { label: "浏览器", prop: "browser", align: "center" },
  { label: "登录状态", prop: "status", align: "center", dict: "sys_common_status" },
  { label: "描述", prop: "msg", align: "center" },
  { label: "访问时间", prop: "loginTime", align: "center", width: 180, sortable: "custom", parseTime: true }
]

// 查询函数
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 handleDelete(infoIds) {
  proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
    return delLogininfor(infoIds)
  }).then(() => {
    tableRef.value.refresh()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

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

/** 解锁按钮操作 */
function handleUnlock(selection) {
  const username = selection.map(item => item.userName)
  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
    return unlockLogininfor(username)
  }).then(() => {
    proxy.$modal.msgSuccess("用户" + username + "解锁成功")
  }).catch(() => {})
}

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