<template>
	<view class="container">
		<button @click="onStartRecord" :disabled="isRecording">开始录音</button>
		<button @click="onStopRecord" :disabled="!isRecording">停止录音</button>
		<view class="tip">{{ status }}</view>
		<view class="tip">当前分贝：{{ currentDecibels }}</view>
		<yao-RecordFrame
			ref="recordFrame"
			@onFrameRecorded="frameRecorded"
			@currentDecibels="onCurrentDecibels"
			@onStop="stopIt"
		></yao-RecordFrame>
		<sdx-StreamPlayer ref="aaa">xx</sdx-StreamPlayer>
		<button @click="callPhone">接通电话</button>
	</view>
</template>

<script setup>
	import { onMounted, onUnmounted } from 'vue';
	import {
		ProtocolCodec,
		MessageType,
		SerializationType,
		CompressionType,
		ControlCommand,
		ProtocolConst
	} from './ProtocolCodec'; // 确保协议文件也是 ESModule 格式（export 导出）
	import { ref } from 'vue';
	import useWebSocket from './useWebSocket';
	const { initWebSocket, closeWebSocket } = useWebSocket();

	// 组件挂载时初始化连接
	onMounted(() => {
		initWebSocket();
	});

	// 组件卸载时关闭连接（可选）
	onUnmounted(() => {
		closeWebSocket();
	});
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	button {
		margin: 10rpx 0;
		padding: 15rpx 30rpx;
		background: #007aff;
		color: white;
		border: none;
		border-radius: 8rpx;
	}

	button:disabled {
		background: #ccc;
	}

	.tip {
		margin: 15rpx 0;
		font-size: 28rpx;
		color: #333;
	}
</style>
