<template>
	<div class="tels-callLog-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<vxe-toolbar
				ref="toolbarRef"
				:loading="state.loading"
				custom
				:refresh="{
					queryMethod: queryList,
				}"
			>
				<template #buttons>
					<el-radio-group v-model="telState" class="mb10" @change="search">
						<el-radio value=" "
							>总数：
							<el-tag>{{ state.tableList.length }}</el-tag>
						</el-radio>
						<el-radio value="device"
							>注册数：
							<el-tag type="success">{{ registerCount }}</el-tag>
						</el-radio>
						<el-radio value="login"
							>签入数：
							<el-tag type="danger">{{ loginCount }}</el-tag>
						</el-radio>
						<el-radio value="ready"
							>示闲数：
							<el-tag type="info">{{ readyCount }}</el-tag>
						</el-radio>
						<el-radio value="unready"
							>小休数：
							<el-tag type="success">{{ unreadyCount }}</el-tag>
						</el-radio>
						<el-radio value="ring"
							>振铃数：
							<el-tag type="info">{{ busyCount }}</el-tag>
						</el-radio>
						<el-radio value="busy"
							>通话数：
							<el-tag type="danger">{{ busyCount }}</el-tag>
						</el-radio>
						<el-radio value="acw"
							>整理数：
							<el-tag type="info">{{ acwCount }}</el-tag>
						</el-radio>
						<el-radio value="held"
							>保持数：
							<el-tag type="success">{{ heldCount }}</el-tag>
						</el-radio>
						<el-radio value="threeWay"
							>三方会议数：
							<el-tag type="danger">{{ threeWayCount }}</el-tag>
						</el-radio>
					</el-radio-group>
				</template>
			</vxe-toolbar>
			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
				<vxe-table
					border
					:loading="state.loading"
					:data="state.tableData"
					:sort-config="{ remote: true }"
					:column-config="{ resizable: true }"
					:row-config="{ isCurrent: true, isHover: true, height: 30, useKey:true }"
					ref="tableRef"
					height="auto"
					auto-resize
					show-overflow
					:scrollY="{ enabled: true, gt: 100 }"
					id="telsExtension"
					:custom-config="{ storage: true }"
				>
					<vxe-column field="telNo" title="分机号" width="150"></vxe-column>
					<vxe-column field="sipState" title="是否注册" width="150">
						<template #default="{ row }">
							<el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
							<el-tag v-else type="danger">未注册</el-tag>
						</template>
					</vxe-column>
					<vxe-column field="device" title="注册信息" min-width="150">
						<template #default="{ row }"> {{ row.device }}({{ row.sipIp }}) </template>
					</vxe-column>
					<vxe-column field="state" title="状态" min-width="150">
						<template #default="{ row }">
							<el-tag v-if="row.state === 'login'" type="success">签入</el-tag>
							<el-tag v-else-if="row.state === 'ready'" type="info">示闲</el-tag>
							<el-tag v-else-if="row.state === 'unready'" type="warning">小休</el-tag>
							<el-tag v-else-if="row.state === 'ring'" type="danger">振铃中</el-tag>
							<el-tag v-else-if="row.state === 'busy'">通话</el-tag>
							<el-tag v-else-if="row.state === 'acw'" type="info">整理</el-tag>
							<el-tag v-else-if="row.state === 'logout'" type="danger">签出</el-tag>
							<el-tag v-else-if="row.state === 'held'" type="danger">保持</el-tag>
							<el-tag v-else-if="row.state === 'threeWay'" type="danger">三方会议</el-tag>
						</template>
					</vxe-column>
					<vxe-column title="操作" fixed="right" width="90" align="center">
						<template #default="{ row }">
							<el-button link type="primary" @click="onOffline(row)" title="强制下线" v-auth="'tels:extension:forceLogout'"> 强制下线 </el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</div>
		</div>
	</div>
</template>

<script lang="tsx" setup name="telsExtension">
import { computed, onMounted, reactive, ref, onBeforeUnmount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import signalR from '@/utils/signalR';
import { extensionList, forceLogout } from '@/api/tels/extension';

// 定义变量内容
const state = reactive({
	tableList: [], // 列表数据
	tableData: [], // 显示的列表数据
	loading: false, // 加载
});
const telState = ref<string>(' ');
/** 通话记录列表 */
const queryList = async () => {
	state.loading = true;
	try {
		const { result } = await extensionList({ hasListen: true });
		// state.tableList = [...result,...result,...result];
		state.tableList = result;
		state.tableData = state.tableList;
		state.loading = false;
	} catch (e) {
		state.loading = false;
	}
};
const search = () => {
	state.loading = true;
	if (telState.value !== ' ') {
		if (telState.value === 'device') {
			state.tableData = state.tableList.filter((item: any) => item.sipState === 'true');
		} else {
			state.tableData = state.tableList.filter((item: any) => item.state === telState.value);
		}
		setTimeout(() => {
			state.loading = false;
		}, 200);
	} else {
		state.tableData = state.tableList;
		setTimeout(() => {
			state.loading = false;
		}, 200);
	}
};
// 注册数
const registerCount = computed(() => {
	return state.tableList.filter((item: any) => item.device).length;
});
// 签入数
const loginCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'login').length;
});
// 示闲数
const readyCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'ready').length;
});
// 示忙数
const unreadyCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'unready').length;
});
// 通话数
const busyCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'busy').length;
});
// 整理数
const acwCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'acw').length;
});
// 保持数
const heldCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'held').length;
});
// 三方会议数
const threeWayCount = computed(() => {
	return state.tableList.filter((item: any) => item.state === 'threeWay').length;
});
// 强制下线
const onOffline = (row: any) => {
	ElMessageBox.confirm(`确定要强制下线${row.telNo}？`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			forceLogout({ telNo: row.telNo })
				.then(() => {
					ElMessage.success('强制下线成功');
				})
				.catch(() => {});
		})
		.catch(() => {});
};
const toolbarRef = ref<RefType>();
const tableRef = ref<RefType>();
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	signalR.joinGroup('BigScreen-SeatState');
	signalR.SR?.on('SeatState', (data: any) => {
		const item = state.tableList.find((item: any) => item.telNo === data.telNo);
		if (item) {
			item.state = data.state;
		}
		search();
	});
});
onBeforeUnmount(() => {
	signalR.SR.off('SeatState');
});
</script>
