<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'; 
	import { ref } from 'vue';
	import useWebSocket from './useWebSocket';
	const { state, connect, disconnect, sendBinary } = useWebSocket(
	  'ws://127.0.0.1:8000/ws/audio',
	  {
	    // 身份校验信息（从登录态获取）
	    identity: {
	      user_id: '1001',
	      token: 'your_auth_token',
	      name: '测试用户'
	    },
	    reconnectDelay: 5000,
	    // 🔴 1. 消息回调：接收服务端所有消息（含身份响应、错误、自定义消息）
	    onMessage: ({ msgType, data, rawData }) => {
	      console.log('收到服务端消息', { msgType, data });
	      
	    },
	    // 🔴 2. 身份校验成功回调：仅在身份校验通过后触发
	    onAuthSuccess: (context) => {
	      console.log('身份校验成功！上下文信息：', context);
	      
	    },
	
	    // 🔴 3. 连接关闭回调：连接关闭时触发（含主动关闭、异常关闭）
	    onClose: (closeInfo) => {
	      console.log('连接关闭', closeInfo);
	     
	    }
	  }
	);
	
	// 2. 示例：发送音频帧
	const sendAudioFrame = (frameBuffer) => {
	  // if (!state.isConnected) {
	  //   console.warn('未连接，无法发送音频帧');
	  //   return;
	  // }
	 
	};
	const callPhone = () => {
		connect()
	}
	const frameRecorded =() =>{}
	// 组件挂载时初始化连接
	onMounted(() => {
		
	});

	// 组件卸载时关闭连接（可选）
	onUnmounted(() => {
	});
</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>
