<template>
	<div class="script-navigation">
		<el-steps direction="vertical" :active="active">
			<el-step title="开场语" />
			<el-step title="确认市民诉求和个人信息" />
			<el-step title="结束前语" />
			<el-step title="结束语" />
		</el-steps>
	</div>
</template>
<script setup lang="ts" name="orderAcceptScriptNavigation">
import { ref, onActivated, onDeactivated, onMounted } from 'vue';
import mittBus from '@/utils/mitt';
const active = ref(0);
// 订阅消息
const subscribe = () => {
	// 接受消息
	mittBus.on('wsReceive', (message: any) => {
		wsNotice(message);
	});
};
const wsNotice = (message: any) => {
	try {
		const data = JSON.parse(message.data);
		if (data.body.bisType === 30) {
			// 30代表话术命中
			console.log(data.body.content[0].name, '导航流程');
			if (data.body.content[0].name === '开场语') {
				active.value = 1;
			}
			if (['确认市民诉求', '确认个人信息', '确认地址'].includes(data.body.content[0].name)) {
				// 确认市民诉求和个人信息
				active.value = 2;
			}
			if (data.body.content[0].name === '结束前语') {
				active.value = 3;
			}
			if (data.body.content[0].name === '结束语') {
				active.value = 4;
			}
		}
		// console.log(data);
	} catch (error) {
		console.log('坐席辅助收到消息', message);
	}
};
onMounted(() => {
	// 进入页面订阅
	subscribe();
});
onActivated(() => {
	// 缓存进入重新订阅
	subscribe();
});
onDeactivated(() => {
	// 缓存离开取消订阅
	mittBus.off('wsReceive');
});
</script>

<style scoped lang="scss">
.script-navigation {
	padding: 20px 50px 20px 50px;
	height: 300px;
	max-width: 600px;
}
</style>
