<template>
  <div class="app-container">
    <basic-table
      ref="tableRef"
      :columns="columns"
      :search-columns="searchColumns"
      :query="queryList"
      :selection="false"
      :show-toolbar="false"
      show-index
    >
      <template #col-action="{ row }">
        <el-button link type="primary" icon="Delete" @click="handleForceLogout(row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
      </template>
    </basic-table>
  </div>
</template>

<script setup name="Online">
import { forceLogout, list as initData } from "@/api/monitor/online"

const { proxy } = getCurrentInstance()
const tableRef = ref()

// 搜索项配置
const searchColumns = [
  { label: "登录地址", prop: "ipaddr", component: "input", placeholder: "请输入登录地址", width: "200px" },
  { label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "200px" }
]

// 表格列配置
const columns = [
  { label: "会话编号", prop: "tokenId", align: "center" },
  { label: "登录名称", prop: "userName", align: "center" },
  { label: "所属部门", prop: "deptName", align: "center" },
  { label: "主机", prop: "ipaddr", align: "center" },
  { label: "登录地点", prop: "loginLocation", align: "center" },
  { label: "操作系统", prop: "os", align: "center" },
  { label: "浏览器", prop: "browser", align: "center" },
  { label: "登录时间", prop: "loginTime", align: "center", width: 180, parseTime: true },
  { label: "操作", prop: "action", align: "center", showInToolbar: false }
]

// 查询函数（在线用户接口返回全量数据，前端分页切片）
function queryList(params) {
  return initData({ ipaddr: params.ipaddr, userName: params.userName }).then(res => {
    const start = (params.pageNum - 1) * params.pageSize
    return {
      rows: res.rows.slice(start, start + params.pageSize),
      total: res.total
    }
  })
}

/** 强退按钮操作 */
function handleForceLogout(row) {
  proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
    return forceLogout(row.tokenId)
  }).then(() => {
    tableRef.value.refresh()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}
</script>
