<template>
	<view class="video-call-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="status-left">
				<text class="status-duration">{{callDuration}}</text>
				<!-- <view class="network-status">
					<view class="network-dot"></view>
					<text>良好</text>
				</view> -->
			</view>
		</view>

		<!-- 主视频区域 -->
		<view class="main-video-area">
			<!-- 对方视频 -->
			<view class="remote-video"></view>

			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-avatar">
					<uni-icons type="contact" size="24" color="#fff"></uni-icons>
				</view>
				<view class="user-details">
					<text class="user-name">{{targetUser}}</text>
					<text class="call-status">通话中</text>
				</view>
			</view>

			<!-- 本地预览 -->
			<view class="local-preview" @click="switchVideo">
				<view class="local-video"></view>
				<view class="preview-mask">
					<uni-icons type="reload" size="14" color="#fff"></uni-icons>
					<text>切换</text>
				</view>
			</view>
		</view>

		<!-- 底部控制栏 -->
		<view class="control-bar">
			<!-- 第一行控制按钮 -->
			<view class="control-row">
				<view class="control-item" @click="microphone">
					<view class="control-icon">
						<uni-icons :type="isMicrophoneOn ? 'mic' : 'micoff'" size="24" color="#fff"></uni-icons>
					</view>
					<text class="control-text">{{isMicrophoneOn ? '关闭' : '开启'}}麦克风</text>
				</view>

				<view class="control-item" @click="closeCameraCur">
					<view class="control-icon">
						<uni-icons :type="isCameraOn ? 'eye' : 'eye-slash'" size="24" color="#fff"></uni-icons>
					</view>
					<text class="control-text">{{isCameraOn ? '关闭' : '开启'}}摄像头</text>
				</view>

				<view class="control-item" @click="enableSpeaker">
					<view class="control-icon">
						<uni-icons :type="isSpeakerOn ? 'sound' : 'sound-filled'" size="24" color="#fff"></uni-icons>
					</view>
					<text class="control-text">{{isSpeakerOn ? '开启' : '关闭'}}扬声器</text>
				</view>
			</view>

			<!-- 第二行控制按钮 -->
			<view class="control-row">
				<view class="control-item" @click="changeMediaType">
					<view class="control-icon">
						<uni-icons :type="mediaType === 'video' ? 'phone' : 'videocam'" size="28"
							color="#fff"></uni-icons>
					</view>
					<text class="control-text">{{mediaType === 'video' ? '切换语音' : '切换视频'}}</text>
				</view>

				<view class="hangup-btn" @click="hangup">
					<view class="hangup-icon">
						<uni-icons type="phone" size="28" color="#fff"></uni-icons>
					</view>
					<text class="hangup-text">挂断</text>
				</view>

				<view class="control-item" @click="switchCamera">
					<view class="control-icon">
						<uni-icons type="refresh" size="28" color="#fff"></uni-icons>
					</view>
					<text class="control-text">翻转</text>
				</view>
			</view>
		</view>

		<!-- 来电接听界面 -->
		<view class="incoming-call" v-if="isIncomingCall">
			<view class="caller-info">
				<view class="caller-avatar">
					<uni-icons type="contact-filled" size="40" color="#fff"></uni-icons>
				</view>
				<text class="caller-name">{{callerName}}</text>
				<text class="call-type">视频通话邀请</text>
			</view>
			<view class="incoming-controls">
				<view class="incoming-control" @click="declineCall">
					<view class="call-btn decline-btn">
						<uni-icons type="phone" size="28" color="#fff"></uni-icons>
					</view>
					<text class="btn-text">拒绝</text>
				</view>
				<view class="incoming-control" @click="acceptCall">
					<view class="call-btn accept-btn">
						<uni-icons type="phone" size="28" color="#fff"></uni-icons>
					</view>
					<text class="btn-text">接听</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// #ifdef APP-PLUS
	import * as call from "@/nativeplugins/RongCloud-CallWrapper/lib/index";
	// #endif

	// 状态变量
	const isConnected = ref(true)
	const isMicrophoneOn = ref(true)
	const isCameraOn = ref(true)
	const isSpeakerOn = ref(true)
	const isIncomingCall = ref(false)
	const mediaType = ref('video')
	const callDuration = ref('00:00')
	const targetUser = ref('张伟')
	const callerName = ref('李娜')
	// 获取屏幕的高度
	const windowWidth = ref(0)
	const windowHeight = ref(0)
	// 通话信息
	const callform = ref({
		mediaType: "video",
		callType: "out",
		groupId: "",
		userIds: "",
		targetId: "", //呼叫对象id
		callWay: 0, //呼叫方式 0 单聊 1 群聊
		mediaTypeCur: "audio"
	})

	// 初始化
	onLoad(() => {
		uni.getSystemInfo({
			success: function(res) {
				windowWidth.value = res.windowWidth;
				windowHeight.value = res.windowHeight;
			}
		})
		uni.getStorage({
			key: "room-parameters",
			success: (res) => {
				callform.value.mediaType = res.data.mediaType;
				callform.value.callType = res.data.callType ? res.data.callType : 'in';
				callform.value.groupId = res.data.groupId ? res.data.groupId : '';
				callform.value.userIds = res.data.userIds ? res.data.userIds : '';
				if (callform.value.callType === 'out') {
					console.log('呼出out')
					callform.value.targetId = res.data.targetId;
					startCall();
				} else {
					console.log('呼入接受')
					// this.accept();
				}
			}
		});
		
		// 添加事件监听
		// uni.$on('OnCallConnected', this.onCallConnected)
		// uni.$on('OnCallDisconnected', this.onCallDisconnected)
	})

	function startCall(){
		const type = callform.value.mediaType === 'audio' ? 0 : 1;
		callform.value.mediaTypeCur = callform.value.mediaType;
		if (callform.value.targetId.length > 0) {
			call.enableSpeaker(true);
			call.startSingleCall(callform.value.targetId, type, null);
			// this.currentCallSession = call.getCurrentCallSession();
			// this.users = this.currentCallSession.users ? this.currentCallSession.users : [];
		} else {
			call.startGroupCall(this.groupId, this.userIds, [], type, '');
			// this.users = this.userIds;
		
			// console.log(this.users);
			// this.currentCallSession = call.getCurrentCallSession();
			// this.users = this.currentCallSession.users ? this.currentCallSession.users : [];
		}
		// im.getCurrentUserId(function(result){
		// 	 _this.systemInfoSync(result.userId,_this.$refs.bigVideoView.ref,false);
		// })
		// if (this.currentCallSession) {
		// 	this.systemInfoSync(this.currentCallSession.mine.userId, this.$refs.bigVideoView.ref, false);
		// }
	}

	// 通话计时
	let timer = null
	const startCallTimer = () => {
		let seconds = 0
		timer = setInterval(() => {
			seconds++
			const minutes = Math.floor(seconds / 60)
			const secs = seconds % 60
			callDuration.value = `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
		}, 1000)
	}

	// 切换麦克风
	const microphone = () => {
		isMicrophoneOn.value = !isMicrophoneOn.value
	}

	// 切换摄像头
	const closeCameraCur = () => {
		isCameraOn.value = !isCameraOn.value
	}

	// 切换扬声器
	const enableSpeaker = () => {
		isSpeakerOn.value = !isSpeakerOn.value
	}

	// 切换通话类型
	const changeMediaType = () => {
		mediaType.value = mediaType.value === 'video' ? 'audio' : 'video'
	}

	// 切换摄像头方向
	const switchCamera = () => {
		// 实现摄像头切换逻辑
	}

	// 切换视频画面
	const switchVideo = () => {
		// 实现画面切换逻辑
	}

	// 接听来电
	const acceptCall = () => {
		isIncomingCall.value = false
		isConnected.value = true
	}

	// 拒绝来电
	const declineCall = () => {
		isIncomingCall.value = false
	}

	// 挂断通话
	const hangup = () => {
		if (isIncomingCall.value) {
			declineCall()
		} else {
			isConnected.value = false
			clearInterval(timer)
			uni.showToast({
				title: '通话已结束',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}

</script>

<style lang="scss">
	/* 原有样式保持不变，仅需将px单位改为rpx */
	.video-call-container {
		width: 750rpx;
		height: 100vh;
		position: relative;
		background: #000;
		color: #fff;
	}

	.status-bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		padding-top: 44rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 20;
	}

	.status-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.status-duration {
		font-size: 18rpx;
		font-weight: 600;
	}

	.network-status {
		display: flex;
		align-items: center;
		gap: 4rpx;
		font-size: 14rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.network-dot {
		width: 8rpx;
		height: 8rpx;
		background: #4cd964;
		border-radius: 50%;
	}

	.main-video-area {
		width: 100%;
		height: 100%;
		background: #000;
		position: relative;
	}

	.remote-video {
		width: 100%;
		height: 100%;
	}

	.user-info {
		position: absolute;
		top: 100rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.user-avatar {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-details {
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.user-name {
		font-size: 20rpx;
		font-weight: 500;
	}

	.call-status {
		font-size: 14rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.local-preview {
		position: absolute;
		top: 120rpx;
		right: 20rpx;
		width: 120rpx;
		height: 160rpx;
		border-radius: 8rpx;
		overflow: hidden;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
	}

	.local-video {
		width: 100%;
		height: 100%;
	}

	.preview-mask {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 30rpx;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4rpx;
		font-size: 12rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.control-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		// height: 220rpx;
		width: 750rpx;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 40rpx;
		z-index: 30;
	}

	.control-row {
		display: flex;
		justify-content: center;
		gap: 40rpx;
		width: 100%;
		margin-bottom: 30rpx;
		flex-direction: row;
	}

	.control-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.control-icon {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.control-text {
		font-size: 24rpx;
		color: #fff;
	}

	.hangup-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.hangup-icon {
		width: 80rpx;
		height: 80rpx;
		background: #ff3b30;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hangup-text {
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
	}

	.incoming-call {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #1a1a1a;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.caller-info {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.caller-avatar {
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #4facfe, #00f2fe);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20rpx;
	}

	.caller-name {
		font-size: 24rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.call-type {
		font-size: 16rpx;
		color: rgba(255, 255, 255, 0.7);
	}

	.incoming-controls {
		display: flex;
		gap: 60rpx;
	}

	.incoming-control {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.call-btn {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.decline-btn {
		background: #ff3b30;
	}

	.accept-btn {
		background: #4cd964;
	}

	.btn-text {
		font-size: 14rpx;
		color: #fff;
	}

</style>