<template>
	<div class="tels-callLog-container layout-pd">
		<el-card shadow="never">
			<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
				<template #tableHeader="scope">
					<el-radio-group v-model="telState" class="mb10" @change="search">
						<el-radio label=" "
							>总数：
							<el-tag type="">{{ state.tableList.length }}</el-tag>
						</el-radio>
						<el-radio label="device"
							>注册数：
							<el-tag type="success">{{ registerCount }}</el-tag>
						</el-radio>
						<el-radio label="login"
							>签入数：
							<el-tag type="danger">{{ loginCount }}</el-tag>
						</el-radio>
						<el-radio label="ready"
							>示闲数：
							<el-tag type="info">{{ readyCount }}</el-tag>
						</el-radio>
						<el-radio label="unready"
							>小休数：
							<el-tag type="success">{{ unreadyCount }}</el-tag>
						</el-radio>
						<el-radio label="busy"
							>通话数：
							<el-tag type="danger">{{ busyCount }}</el-tag>
						</el-radio>
						<el-radio label="acw"
							>整理数：
							<el-tag type="info">{{ acwCount }}</el-tag>
						</el-radio>
						<el-radio label="held"
							>保持数：
							<el-tag type="success">{{ heldCount }}</el-tag>
						</el-radio>
						<el-radio label="threeWay"
							>三方会议数：
							<el-tag type="danger">{{ threeWayCount }}</el-tag>
						</el-radio>
					</el-radio-group>
				</template>
				<template #sipState="{ row }">
					<el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
					<el-tag v-else type="danger">未注册</el-tag>
				</template>
				<template #state="{ 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 === '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>
				<!-- 表格操作 -->
				<template #operation="{ row }">
					<el-button link type="primary" @click="onListen(row)" title="监听分机" v-auth="'tels:extension:listen'" v-if="row.state === 'busy'">
						监听分机
					</el-button>
				</template>
			</ProTable>
		</el-card>
	</div>
</template>

<script lang="tsx" setup name="telsExtension">
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElButton } from 'element-plus';
import signalR from '@/utils/signalR';
import { ola } from '@/utils/ola_api';
import { storeToRefs } from 'pinia';
import { useTelStatus } from '@/stores/telStatus';
import { extensionPaged } from '@/api/tels/extension';
import mittBus from '@/utils/mitt';

const proTableRef = ref<RefType>(); // 表格ref
// 表格配置项
const columns = ref<any[]>([
	{ prop: 'telNo', label: '分机号', showOverflowTooltip: true, width: 200 },
	{ prop: 'sipState', label: '是否注册', showOverflowTooltip: true, width: 200 },
	{ prop: 'device', label: '注册信息', showOverflowTooltip: true },
	{ prop: 'state', label: '状态', showOverflowTooltip: true, width: 200 },
	{ prop: 'operation', label: '操作', fixed: 'right', width: 100, align: 'center' },
]);
// 定义变量内容
const state = reactive({
	tableList: [], // 列表数据
	tableData: [], // 显示的列表数据
	loading: false, // 加载
	total: 0, // 总条数
});
const telState = ref<string>(' ');
const useTelStatusStore = useTelStatus();
const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
const ruleFormRef = ref<FormInstance>(); // 表单ref
/** 通话记录列表 */
const queryList = async () => {
	state.loading = true;
	try {
		const response = await extensionPaged();
		state.tableList = response.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 onListen = (row: any) => {
	ola.monitor(row.telNo, telStatusInfo.value.telsNo);
};
onMounted(() => {
	queryList();
	signalR.joinGroup('BigScreen-SeatState');
	mittBus.on('SeatState', (data) => {
		const item = state.tableList.find((item: any) => item.telNo === data.telNo);
		if (item) {
			item.state = data.state;
		}
		search();
	});
});
onUnmounted(() => {
	mittBus.off('SeatState');
});
</script>
<style lang="scss" scoped>
.arrow {
	transition: transform var(--el-transition-duration);
	cursor: pointer;
}

.arrow.is-reverse {
	transform: rotateZ(-180deg);
}
</style>
