<template>
	<pi-table ref="tableRef" :api="api.system.online.list">
		<template #do>
			<el-input v-model="search.username" placeholder="用户名" clearable style="width: 200px;" @keyup.enter="upsearch"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
		</template>
		<el-table-column label="#" type="index" width="50"></el-table-column>
		<el-table-column label="会话编号" prop="session_id"></el-table-column>
		<el-table-column label="用户名" prop="username"></el-table-column>
		<el-table-column label="部门名称" prop="account.dept.dept_name"></el-table-column>
		<el-table-column label="主机" prop="ip"></el-table-column>
		<el-table-column label="登录地点" prop="location"></el-table-column>
		<el-table-column label="浏览器" prop="os.browser"></el-table-column>
		<el-table-column label="操作系统" prop="os.os"></el-table-column>
		<el-table-column label="最近上线时间" prop="online_time">
			<template #default="scope">
				{{scope.row.update_time||scope.row.online_time}}
			</template>
		</el-table-column>
		<el-table-column label="操作" fixed="right" align="right" width="100">
			<template #default="scope">
				<el-button-group>
					<el-popconfirm title="确定强制退出吗？" @confirm="quit(scope.row, scope.$index)">
						<template #reference>
							<el-button v-auth="'online:quit'" text type="danger" size="small">强退</el-button>
						</template>
					</el-popconfirm>
				</el-button-group>
			</template>
		</el-table-column>
	</pi-table>
</template>

<script setup>
import api from "@/api/index";
import {getCurrentInstance, ref} from "vue";

defineOptions({
	name: "monitorOnline"
})

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

let search = ref({
	username: null
})

//删除
async function quit(row) {
	const loading = proxy.$loading();
	const res = await api.system.online.quit({session_id: row.session_id});
	tableRef.value.refresh()
	loading.close();
	proxy.$message.success(res.msg)
}

//搜索
function upsearch() {
	tableRef.value.upData(search.value)
}
</script>
