<template>
	<div class="real-time-quality">
		<el-scrollbar class="h100" ref="scrollbarRef" max-height="400px" v-if="tagList.length">
			<div class="tag-box" ref="chatBoxRef">
				<div v-for="(item, index) in tagList" :key="index" class="tag-item flex-center-between">
					<el-tag>{{ item.name }}</el-tag>
					<el-text type="info">{{ formatDate(item.timestamp, 'YYYY-mm-dd HH:MM:SS') }}</el-text>
				</div>
				<el-text class="end-call" tag="p" v-if="talkEnd">-- 通话结束 --</el-text>
			</div>
		</el-scrollbar>
		<el-empty v-else :image-size="100" />
	</div>
</template>
<script setup lang="ts" name="orderAcceptRealtimeQuality">
import { onActivated, onDeactivated, onMounted, ref } from 'vue';
import mittBus from '@/utils/mitt';
import { formatDate } from '@/utils/formatTime';
const tagList = ref<EmptyObjectType>([]);
const talkEnd = ref(false);
// 订阅消息
const subscribe = () => {
	// 接受消息
	mittBus.on('wsNotice', (message: any) => {
		wsNotice(message);
	});
};
const wsNotice = (message: any) => {
	try {
		const data = JSON.parse(message.data);
		if (data.body.bisType === 20) {
			//20代表语音提醒消息
			console.log(data.body.content[0].name, '语音提醒消息');
			tagList.value.push({
				name: data.body.content[0].name,
				timestamp: data.body.content[0].timestamp,
			});
		}
	} catch (error) {
		console.log('坐席辅助收到消息', message);
	}
};
onMounted(() => {
	// 进入页面订阅
	subscribe();
});
onActivated(() => {
	// 缓存进入重新订阅
	subscribe();
});
onDeactivated(() => {
	// 缓存离开取消订阅
	mittBus.off('wsNotice');
});
</script>
<style scoped lang="scss">
.real-time-quality {
	width: 100%;
	height: 100%;
	position: relative;
	.keep-scroll {
		position: absolute;
		right: 10px;
		bottom: 30px;
		z-index: 100;
	}
	.tag-box {
		padding: 10px 30px;
		.tag-item {
			margin-bottom: 10px;
		}
	}
}
</style>
