<!-- 在线用户列表 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 1000px;">
        <div class="c-card">
            <div class="c-title">账号 {{ state.p.loginId }} 目前已在 {{ state.dataList.length }} 个客户端登录</div>
            <!-- ------------- 查询条件 ------------- -->
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info name="序号" type="index" width="60px"></td-info>
                <td-info name="Token凭证" prop="token" min-width="115px"></td-info>
                <td-info name="登录设备">
                    <template #default="s">
                        <el-tag type="success" size="small" effect="plain" disable-transitions>{{ s.row.device }}</el-tag>
                    </template>
                </td-info>
                <td-info name="会话失效于">
                    <template #default="s">
                        <p v-if="s.row.timeout === -1">永不过期</p>
                        <p v-else>
                            <span>{{ sa.forDate(new Date().getTime() + s.row.timeout * 1000, 2) }} - </span>
                            <b style="color: green;">{{ sa.forDate2(new Date().getTime() + s.row.timeout * 1000) }}</b>
                        </p>
                    </template>
                </td-info>
                <el-table-column label="操作" fixed="right" width="200px">
                    <template #default="s">
                        <el-link type="primary" icon="el-icon-Delete" @click="kickoutByToken(s.row)">&nbsp;踢下线</el-link> &nbsp;&nbsp;
                        <el-link type="primary" icon="el-icon-Delete" @click="logoutByToken(s.row)">&nbsp;强制注销</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup name="sys-user-online-info">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件
        loginId: proxy.param.loginId || 0, // id号 
    },
    dataCount: 0,   // 数据总数 
    dataList: [], // 数据表格 
})

// 组件加载时触发
onMounted(() => {
    f5();
})

// ------------------ 函数 ------------------
// 查找数据
const f5 = function() {
    sa.ajax('/SysUserOnline/getLoginInfo', state.p, function(res) {
        state.dataList = res.data;	// 数据
        // dataCount.value = res.dataCount;
    });
};

// 强制注销，根据token  
const logoutByToken = function(data) {
    let str = '将 [ ' + data.token + ' ] 的会话强制注销？';
    sa.confirm(str, function() {
        sa.ajax('/SysUserOnline/logoutByToken?tokenValue=' + data.token, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('注销成功');
        });
    });
};
// 踢人下线，根据token  
const kickoutByToken = function(data) {
    let str = '将 [ ' + data.token + ' ] 的会话踢下线？';
    sa.confirm(str, function() {
        sa.ajax('/SysUserOnline/kickoutByToken?tokenValue=' + data.token, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('踢出成功');
        });
    });
};

//
const ok = function() {
    sa.closeModel();
    sa.currView().f5();
};
defineExpose({ok})

</script>

<style scoped lang="scss">
.el-tag{border-radius: 1px;}
.c-card{padding-top: 20px;}
</style>
