<template>
  <div>
    <div class="titleBox">
      <div class="title">在线用户</div>
    </div>

    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
        <el-form-item label="登录名称">
          <el-input placeholder="请输入登录名称" v-model="listQuery.userName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
          <el-button type="primary" @click="reset()">
            <el-icon>
              <RefreshLeft />
            </el-icon>
            <span>重置</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tabBox">
      <el-table stripe :data="tableData" style="width: 100%" :height="tableHeight" border>
        <el-table-column prop="userId" label="账号" />
        <el-table-column prop="userName" label="登录名称" />
        <el-table-column prop="ssdwmc" label="单位名称" />
        <el-table-column prop="ssbmmc" label="部门名称" />
        <el-table-column prop="ipaddr" label="主机" />
        <el-table-column prop="browser" label="浏览器" />
        <el-table-column prop="os" label="操作系统" />
        <el-table-column prop="loginTime" label="登录时间" />
        <el-table-column prop="operate" label="操作">
          <template #default="{ row }">
            <!-- <span
              style="color: rgb(244, 183, 70)"
              class="exit"
              @click="outClick(row)"
              >强退</span
            > -->
            <el-popover :visible="visible" placement="top" :width="160">
              <p>您确认强退此账号?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="small" text @click="visible = false">取消</el-button>
                <el-button size="small" type="primary" @click="outClick(row)">确定</el-button>
              </div>
              <template #reference>
                <span style="color: rgb(244, 183, 70)" class="exit">强退</span>
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const form = reactive({
  loginAddress: "",
  userName: ""
});

const tableData = ref([]);

const searchBox = ref();
const keyCount = ref(0); //tabel组件刷新值

const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  userName: ""
});
const total = ref(0);
const tableHeight = ref();
const tabHeightFn = () => {
  tableHeight.value =
    window.innerHeight - 57 - 37 - searchBox.value.offsetHeight - 130;
};

const getTableList = () => {
  getApi(listQuery.value, "/mosty-base/getOnlineList").then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
};

const reset = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20,
    userName: ""
  };
  getTableList();
};

const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getTableList();
};

// 分页
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableList();
};
// 分页码
const handleCurrentChange = (cur) => {
  listQuery.value.pageCurrent = cur;
  getTableList();
};
// 强退
const outClick = (row) => {
  getApi(
    { ssbmid: row.ssbmid, id: row.id, token: row.token },
    "/mosty-base/forceLogout"
  ).then((res) => {
    ElMessage({
      message: "成功",
      type: "success"
    });
    getTableList();
  });
};

onMounted(() => {
  getTableList();
  tabHeightFn()
  window.onresize = function () {
    tabHeightFn();
  };
});
</script>

<style lang="scss" scoped>
.exit:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>