<template>
	<div style="padding-bottom: 10px">
		<a-row :gutter="16">
			<a-col :span="8">
				<a-card class="monitor-card" :bordered="false">
					<template #cover>
						<team-outlined style="color: #69c0ff" class="monitor-card-icon"/>
						<div class="monitor-card-div">
							<span class="monitor-card-span">当前会话数：</span
							><span class="monitor-card-span">{{ analysisObj.currentSessionTotalCount }}</span>
						</div>
					</template>
				</a-card>
			</a-col>
			<a-col :span="8">
				<a-card class="monitor-card" :bordered="false">
					<template #cover>
						<verified-outlined style="color: rgb(255, 156, 110)" class="monitor-card-icon"/>
						<div class="monitor-card-div">
							<span class="monitor-card-span">最大签发令牌：</span
							><span class="monitor-card-span">{{ analysisObj.maxTokenCount }}</span>
						</div>
					</template>
				</a-card>
			</a-col>
			<a-col :span="8">
				<a-card class="monitor-card" :bordered="false">
					<template #cover>
						<rise-outlined style="color: rgb(255, 133, 192)" class="monitor-card-icon"/>
						<div class="monitor-card-div">
							<span class="monitor-card-span">1小时内新增：</span
							><span class="monitor-card-span">{{ analysisObj.oneHourNewlyAdded }}</span>
						</div>
					</template>
				</a-card>
			</a-col>
		</a-row>
	</div>
	<a-card :bordered="false" :body-style="{ 'padding-top': '10px' }">
		<s-table ref="table" :columns="columns" :data="loadData" :alert="false" bordered
				 :row-key="(record) => record.id">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'avatar'">
					<a-avatar :src="record.avatar" style="width: 25px; height: 25px"/>
				</template>
				<template v-if="column.dataIndex === 'latestLoginAddress'">
					{{ record.latestLoginInfo.loginAddress }}
				</template>
				<template v-if="column.dataIndex === 'lastLoginTime'">
					{{ record.lastLoginInfo.loginAt }}
				</template>
				<template v-if="column.dataIndex === 'latestLoginIp'">
					{{ record.latestLoginInfo.loginIp }}
				</template>
				<template v-if="column.dataIndex === 'tokenNumber'">
					{{ record.tokenSignList.length }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a @click="tokenInfoList.onOpen(record.tokenSignList, 'B')">令牌列表</a>
					<a-divider type="vertical"/>
					<a-space>
						<a-popconfirm title="确定要强退此用户吗？" @confirm="exit(record)">
							<a-button type="link" danger size="small">强退</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
		<token-info-list ref="tokenInfoList" @successful="table.refresh()"/>
	</a-card>
</template>

<script setup name="authMonitor">
import monitorApi from '@/api/auth/monitorApi'
import TokenInfoList from "@/views/sys/dev/authMonitor/tokenInfoList.vue";

// 预置空数据
const analysisObj = ref({
	currentSessionTotalCount: '0',
	maxTokenCount: '0',
	oneHourNewlyAdded: '0',
	proportionOfBAndC: '0/0'
})
monitorApi.monitorAnalysis().then((res) => {
	analysisObj.value = res
})
const table = ref(null)
const tokenInfoList = ref()
const columns = [
	{
		title: '头像',
		dataIndex: 'avatar',
		width: 60
	},
	{
		title: '账号',
		dataIndex: 'account'
	},
	{
		title: '姓名',
		dataIndex: 'name',
		ellipsis: true
	},
	{
		title: '登录地点',
		dataIndex: 'latestLoginAddress',
		ellipsis: true
	},
	{
		title: '上次登录时间',
		dataIndex: 'lastLoginTime',
		ellipsis: true
	},
	{
		title: '登录IP',
		dataIndex: 'latestLoginIp',
		width: 120,
		ellipsis: true
	},
	{
		title: '令牌数',
		dataIndex: 'tokenNumber',
		width: 70
	},
	{
		title: '操作',
		dataIndex: 'action',
		width: '150px',
		scopedSlots: {customRender: 'action'}
	}
]
// 列表数据
const loadData = (parameter) => {
	return monitorApi.monitorPage(parameter).then((res) => {
		return res
	})
}
// 强退B端session
const exit = (record) => {
	let params = [
		{
			userId: record.id
		}
	]
	monitorApi.monitorExit(params).then(() => {
		table.value.refresh(true)
	})
}
</script>


<style scoped>
.table-wrapper {
	margin-top: -16px !important;
}

.monitor-card {
	height: 100px;
}

.monitor-card-icon {
	font-size: 30px;
	padding-top: 18px;
	padding-bottom: 5px;
}

.monitor-card-div {
	display: flex;
	justify-content: center;
}

.monitor-card-span {
	font-size: 16px;
}
</style>
