<template>
	<!-- 观众端页面 -->
	<view
		class="live-container"
		@click="handleHideInput"
		:style="{
			height: systemInfo?.windowHeight + 'px',
			width: systemInfo?.safeArea?.width + 'px'
		}"
	>
		<!-- 主播画面区域 -->
		<view class="live-content">
			<LiveStreamView
				v-if="liveID.length > 0"
				:liveID="liveID"
				:isAnchor="false"
				:templateLayout="templateLayout"
				:currentLoginUserId="currentLoginUserId"
				:onStreamViewClick="ShowAudienceViewClickPanel"
				:enableClickPanel="true"
				:isLiving="true"
			></LiveStreamView>

			<!-- 顶部信息栏 -->
			<view class="live-header">
				<view class="header-left" @click="showAnchorInfoDrawer">
					<view class="stream-info">
						<image
							class="avatar"
							:src="currentLive?.liveOwner?.avatarURL || defaultAvatarURL"
							mode="aspectFill"
						/>
						<view class="stream-details">
							<text class="stream-title" :numberOfLines="1">
								{{
									currentLive?.liveOwner?.userName ||
									currentLive?.liveOwner?.userID
								}}
							</text>
						</view>
						<!-- <view
              class="follow-btn"
              :class="{ 'followed': isFollowed }"
              @click.stop="handleFollowClick"
            >
              <text :style="isFollowed ? 'color: #338aff; font-size: 28rpx;' : 'color: #fff; font-size: 28rpx;'">
                {{ isFollowed ? '已关注' : '关注' }}
              </text>
            </view> -->
					</view>
				</view>
				<view class="header-right">
					<view class="participants" @click="showAudienceList">
						<view v-for="(user, index) in audienceList.slice(0, 2)">
							<image
								class="participant-avatar"
								:src="user?.avatarURL || defaultAvatarURL"
								mode="aspectFill"
							/>
						</view>
						<view class="participant-count">
							<text v-if="Number(topNUmber) > 0" class="count-text">
								{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}
							</text>
							<text v-else class="count-text">
								{{ audienceNumber }}
							</text>
						</view>
					</view>
					<view class="control-icons" @click.stop="topBack()">
						<!-- <image class="control-icon" src="/static/images/live-share.png" /> -->
						<image class="control-icon" src="/static/images/close.png" />
					</view>
				</view>
			</view>

			<view
				class="live-network-container"
				@tap="isShowLiveStatusInfoCard = true"
			>
				<image
					class="live-network"
					src="/static/images/network-good.png"
					alt=""
				/>
				<text class="live-timer">{{ liveDurationText }}</text>
			</view>

			<!-- 聊天消息列表 -->
			<BarrageList
				mode="audience"
				:bottomPx="(safeArea.height * 1) / 8"
				@itemTap="audienceOperator"
				ref="barrageListRef"
			/>

			<!-- 底部互动区域 -->
			<view class="footer">
				<BarrageInput></BarrageInput>
				<view class="action-buttons">
					<image
						v-if="activityData?.id"
						class="action-btn"
						@click="isShowActivity = true"
						src="/static/images/activity.png"
					/>
					<!--  <image class="action-btn" @click="showNetworkQualityPanel()" src="/static/images/dashboard.png" /> -->
					<image
						class="action-btn"
						@click="showGiftPicker()"
						src="/static/images/live-gift.png"
					/>
					<image
						class="action-btn"
						:class="{ disabled: shouldDisableCoGuestButton }"
						v-if="
							templateLayout !== 200 && uni.$localGuestStatus === 'IDLE'
						"
						@click="handleCoGuestButtonClick"
						src="/static/images/link-guest.png"
					/>
					<image
						class="action-btn"
						v-if="
							templateLayout !== 200 &&
							uni.$localGuestStatus === 'USER_APPLYING'
						"
						@click="ShowCoGuestRequestPanel()"
						src="/static/images/live-request.png"
					/>
					<image
						class="action-btn"
						v-if="
							templateLayout !== 200 &&
							uni.$localGuestStatus === 'CONNECTED'
						"
						@click="ShowCoGuestRequestPanel()"
						src="/static/images/live-disconnect.png"
					/>
					<image
						class="action-btn"
						src="/static/images/fengxiang.png"
						style="width: 72rpx; height: 72rpx"
						@click="
							navigateTo('/pages/shop-together/user', {
								type: 1,
								id: currentLive.liveID
							})
						"
					/>
					<Like />
				</view>
			</view>

			<!-- 活动信息 :showData="activityData"  -->
			<ActivityInfo
				v-model="isShowActivity"
				v-model:info="activityData"
				:roomId="liveID"
			></ActivityInfo>
			<UserInfoPanel
				v-model="isShowUserInfoPanel"
				:userInfo="clickUserInfo"
				:isShowAnchor="isShowAnchorInfo"
			></UserInfoPanel>
			<LiveAudienceList v-model="isShowAudienceList"></LiveAudienceList>
			<CoGuestRequestPanel
				v-model="isShowCoGuestRequestPanel"
				:liveID="currentLive.liveID"
				:userID="currentLoginUserId"
				:seatIndex="seatIndex"
			></CoGuestRequestPanel>

			<GiftPicker
				v-model="isShowGiftPicker"
				:onGiftSelect="showGiftToast"
			></GiftPicker>
			<GiftPlayer
				ref="giftPlayerRef"
				v-model="isLargeSizeGiftPlayer"
				:url="giftInfo?.resourceURL"
				:safeArea="safeArea"
				@finished="svgaPlayerFinished"
			/>

			<NetworkQualityPanel
				v-model="isShowNewWorkPanel"
			></NetworkQualityPanel>
		</view>
	</view>
	<LiveStatusInfoCard
		v-model="isShowLiveStatusInfoCard"
		videoQuality="4K"
		audioMode="高保真人声"
		:audioVolume="70"
		:latency="45"
		:downLoss="0"
		:upLoss="2"
	/>
	<ActionSheet
		v-model="isShowExitSheet"
		:title="exitSheetTitle"
		:itemList="exitSheetItems"
		@select="onExitSheetSelect"
	/>
	<ActionSheet
		v-model="isShowCoGuestSheet"
		:title="coGuestSheetTitle"
		:itemList="coGuestSheetItems"
		@select="onCoGuestSheetSelect"
	/>
</template>

<script setup lang="ts">
	import { navigateBack, navigateTo } from '@/utils/router'
	import {
		imDataEndLive,
		getLiveActivityDetail,
		getLiveActivityRecord,
		getLIveRecordDetailByRoomId
	} from '@/api/tui-kit'
	import { onLoad } from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		computed,
		onUnmounted,
		watch,
		nextTick
	} from 'vue'
	import UserInfoPanel from '@/uni_modules/tuikit-atomic-x/components/LiveStreamView/UserInfoPanel.nvue'
	import LiveAudienceList from '@/uni_modules/tuikit-atomic-x/components/LiveAudienceList/LiveAudienceList.nvue'
	import CoGuestRequestPanel from '@/uni_modules/tuikit-atomic-x/components/CoGuestPanel/CoGuestRequestPanel.nvue'
	import GiftPicker from '@/uni_modules/tuikit-atomic-x/components/GiftPicker.nvue'
	import NetworkQualityPanel from '@/uni_modules/tuikit-atomic-x/components/NetworkQualityPanel.nvue'
	import LiveStatusInfoCard from '@/uni_modules/tuikit-atomic-x/components/LiveStatusInfoCard.nvue'
	import Like from '@/uni_modules/tuikit-atomic-x/components/Like.nvue'
	import LiveStreamView from '@/uni_modules/tuikit-atomic-x/components/LiveStreamView/LiveStreamView.nvue'
	import BarrageInput from '@/uni_modules/tuikit-atomic-x/components/BarrageInput.vue'
	import BarrageList from '@/uni_modules/tuikit-atomic-x/components/BarrageList.nvue'
	import GiftPlayer from '@/uni_modules/tuikit-atomic-x/components/GiftPlayer/GiftPlayer.nvue'
	import { giftService } from '@/uni_modules/tuikit-atomic-x/components/GiftPlayer/giftService'
	import { useBarrageState } from '@/uni_modules/tuikit-atomic-x/state/BarrageState'
	import { useLiveListState } from '@/uni_modules/tuikit-atomic-x/state/LiveListState'
	import { useLiveSeatState } from '@/uni_modules/tuikit-atomic-x/state/LiveSeatState'
	import { useLiveAudienceState } from '@/uni_modules/tuikit-atomic-x/state/LiveAudienceState'
	import { useCoGuestState } from '@/uni_modules/tuikit-atomic-x/state/CoGuestState'
	import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState'
	import { useGiftState } from '@/uni_modules/tuikit-atomic-x/state/GiftState'
	import { useCoHostState } from '@/uni_modules/tuikit-atomic-x/state/CoHostState'
	import ActionSheet from '@/components/ActionSheet.nvue'
	uni.$localGuestStatus = 'IDLE'
	const { loginUserInfo } = useLoginState()
	const { messageList, sendTextMessage, sendCustomMessage } =
		useBarrageState(uni?.$liveID)
	const {
		joinLive,
		createLive,
		fetchLiveList,
		liveList,
		leaveLive,
		currentLive,
		addLiveListListener,
		removeLiveListListener
	} = useLiveListState(uni?.$liveID)
	const {
		seatList,
		addLiveSeatEventListener,
		removeLiveSeatEventListener
	} = useLiveSeatState(uni?.$liveID)
	console.log("uniliveID",uni?.$liveID)
	const { audienceList } = useLiveAudienceState(uni?.$liveID)
	const { disconnect, connected, cancelApplication } = useCoGuestState(
		uni?.$liveID
	)
	const { addGiftListener, removeGiftListener } = useGiftState(
		uni?.$liveID
	)
	const { connected: hostConnected } = useCoHostState(uni?.$liveID)
	import ActivityInfo from './components/activity-info.vue'
	import { LIVE_BUSINESS } from '@/constants/live-keys'
	import { useAuthUser } from '../../composables/useAuthUser'
	import { getUserAdminList } from '../../api'

	const dom = uni.requireNativePlugin('dom')
	const shareDialog = ref(false)
	const isShowActivity = ref(false)
	const activityData = ref({})
	const systemInfo = ref({})
	const safeArea = ref({
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
		width: 375,
		height: 750
	})
	/** 当前是否管理员 true: 是管理员，false: 不是管理员*/
	const isAdmin = ref(false)
	const isShowUserInfoPanel = ref(false)
	const isShowAudienceList = ref(false)
	const isShowCoGuestRequestPanel = ref(false)
	const isShowGiftPicker = ref(false)
	const isShowLiveStatusInfoCard = ref(false)
	const isLargeSizeGiftPlayer = ref(false)
	const giftInfo = ref({})
	const isShowNewWorkPanel = ref(false)
	const selectedAudience = ref({})
	const defaultCoverURL = '/static/images/default-background.jpg'
	const defaultAvatarURL =
		'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png'

	// 连麦按钮禁用状态
	const isCoGuestButtonDisabled = ref(false)

	// 计算连麦按钮是否应该被禁用
	const shouldDisableCoGuestButton = computed(() => {
		// 当 hostConnected 数组长度大于0时，按钮置灰
		return hostConnected.value.length > 0
	})

	const { tencentUserSig } = useAuthUser()
	const liveID = ref('')
	const isFollowed = ref(false)
	const inputValue = ref('')
	// Removed direct svga-player ref; handled inside GiftPlayer
	const liveDuration = ref(0) // 秒
	const liveDurationText = ref('00:00:00')
	let timer: any = null
	const currentLoginUserId = ref()
	const clickUserInfo = ref({})
	const templateLayout = ref(600)
	const seatIndex = ref(-1)
	const barrageListRef = ref()
	const giftPlayerRef = ref()
	const { showGift, onGiftFinished } = giftService({
		roomId: uni?.$liveID,
		giftPlayerRef
	})
	const isShowAnchorInfo = ref(true)

	// action sheets
	const isShowExitSheet = ref(false)
	const isShowCoGuestSheet = ref(false)
	const exitSheetTitle = ref('')
	const exitSheetItems = ref(['退出直播间'])
	const coGuestSheetItems = ref(['取消连麦申请'])
	const coGuestSheetTitle = ref('')
	const topNUmber = ref('')
	const audienceNumber = computed(()=>audienceList.value.length)

	// 监听座位变化：当自身不在 seatList 时，将本地连麦状态重置为 IDLE
	watch(
		connected,
		(newList, oldList) => {
			const list = Array.isArray(newList) ? newList : []
			const hasSelfInConnected = list.some(
				item => item?.userID === uni.$userID
			)
			if (!hasSelfInConnected) {
				uni.$localGuestStatus = 'IDLE'
			}
		},
		{ deep: true, immediate: true }
	)
	watch(
		() => loginUserInfo.value?.userID,
		(newUserId, oldUserId) => {
			if (newUserId) {
				currentLoginUserId.value = newUserId
			}
		},
		{ immediate: true, deep: true }
	)

	// 监听自定义消息列表更新
	watch(messageList, newMessages => {
		if (newMessages && newMessages.length > 0) {
			console.log('弹幕消息列表更新:', newMessages)
			if (newMessages.some(v => v.businessID === LIVE_BUSINESS.ADMIN)) {
				console.log(
					'管理员消息====================',
					newMessages.find(v => v.businessID === LIVE_BUSINESS.ADMIN)
				)
				topNUmber.value = newMessages.find(
					v => v.businessID === LIVE_BUSINESS.ADMIN
				).data
			}
			if (newMessages.some(v => v.businessID === LIVE_BUSINESS.SIGN)) {
				const list = newMessages.filter(
					v => v.businessID === LIVE_BUSINESS.SIGN
				)

				activityData.value = {
					...JSON.parse(list[list.length - 1]?.data),
					isParticipated: false
				}
				isShowActivity.value = true
			}
			if (newMessages.some(v => v.businessID === LIVE_BUSINESS.ANCHOR)) {
				const list = newMessages.filter(
					v => v.businessID === LIVE_BUSINESS.ANCHOR
				)

				const e = list[list.length - 1]
				if (e) {
					console.log('==管理员状态===', JSON.parse(e.data))

					isAdmin.value = JSON.parse(e.data).show
				}
			}
		}
	})

	// 页面加载
	onLoad(options => {
		console.warn('Live page onLoad = ', options)
		liveID.value = options?.liveID
		getLIveRecordDetailByRoomId(liveID.value).then(res=>{
			console.log('初始化虚拟人数===========', res.data.virtualViewers)
			topNUmber.value = res.data.virtualViewers
		})
		getLiveActivityDetail(liveID.value).then(res => {
			if (res?.data && res.data.status === 1) {
				// status: 0-未开始 1-进行中 2-已结束 3-已取消
				console.log('活动数据============= ', res.data)

				getLiveActivityRecord(res.data.activityId).then(show => {
					activityData.value = {
						...res.data,
						isParticipated: show.data
					}
					console.log('是否参加============= ', show)
					isShowActivity.value = !show.data
				})
			} else {
				isShowActivity.value = false
			}
		})
		if (liveID.value) {
			getUserAdminList(liveID.value).then(res => {
				const adminList = res.data.Response?.Admin_Account || []
				isAdmin.value = adminList?.some(
					v => v === tencentUserSig.value.userId
				)
			})
			joinLive({
				liveID: liveID.value,
				success: () => {
					liveDuration.value = 0
					updateLiveDurationText()
					timer = setInterval(() => {
						updateLiveDurationText()
					}, 1000)

					templateLayout.value =
						currentLive.value?.seatLayoutTemplateID ||
						templateLayout.value
					console.log(
						'joinLive success templateLayout: ',
						templateLayout.value
					)
				},
				fail: () => {
					uni.showToast({ icon: 'none', title: '直播已结束' })
					setTimeout(
						() => uni.redirectTo({ url: `/pages/livelist/index` }),
						500
					)
				}
			})
			return
		}
		uni.showToast({ title: 'liveID 为空', icon: 'none' })
	})

	watch(currentLive, (newVal, oldVal) => {
		if (newVal) {
			templateLayout.value =
				newVal.seatLayoutTemplateID || templateLayout.value
			console.log(`currentLive change: ${JSON.stringify(newVal)}`)
		}
	})

	function updateLiveDurationText() {
		// 如果 currentLive 存在且有 createTime，则基于创建时间计算
		if (currentLive.value && currentLive.value.createTime) {
			const currentTime = Math.floor(Date.now() / 1000) // 当前时间戳（秒）
			const createTime = Math.floor(currentLive.value.createTime / 1000) // 直播间创建时间（秒）
			const duration = Math.max(0, currentTime - createTime) // 直播时长（秒）

			const h = String(Math.floor(duration / 3600)).padStart(2, '0')
			const m = String(Math.floor((duration % 3600) / 60)).padStart(
				2,
				'0'
			)
			const s = String(duration % 60).padStart(2, '0')
			liveDurationText.value = `${h}:${m}:${s}`
		}
	}

	onUnmounted(() => {
		if (timer) clearInterval(timer)
		removeLiveListListener('onLiveEnded', handleLiveEnded)
		removeLiveListListener('onKickedOutOfLive', handleKickedOutOfLive)
		removeGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
		removeLiveSeatEventListener(
			uni.$liveID,
			'onLocalCameraOpenedByAdmin',
			handleLocalCameraOpenedByAdmin
		)
		removeLiveSeatEventListener(
			uni.$liveID,
			'onLocalCameraClosedByAdmin',
			handleLocalCameraClosedByAdmin
		)
		removeLiveSeatEventListener(
			uni.$liveID,
			'onLocalMicrophoneOpenedByAdmin',
			handleLocalMicrophoneOpenedByAdmin
		)
		removeLiveSeatEventListener(
			uni.$liveID,
			'onLocalMicrophoneClosedByAdmin',
			handleLocalMicrophoneClosedByAdmin
		)
	})
	onMounted(() => {
		uni.setKeepScreenOn({
			keepScreenOn: true
		})
		uni.getSystemInfo({
			success: res => {
				systemInfo.value = res
				safeArea.value = res.safeArea
			}
		})
		addLiveListListener('onLiveEnded', handleLiveEnded)
		addLiveListListener('onKickedOutOfLive', handleKickedOutOfLive)
		addGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
		addLiveSeatEventListener(
			uni.$liveID,
			'onLocalCameraOpenedByAdmin',
			handleLocalCameraOpenedByAdmin
		)
		addLiveSeatEventListener(
			uni.$liveID,
			'onLocalCameraClosedByAdmin',
			handleLocalCameraClosedByAdmin
		)
		addLiveSeatEventListener(
			uni.$liveID,
			'onLocalMicrophoneOpenedByAdmin',
			handleLocalMicrophoneOpenedByAdmin
		)
		addLiveSeatEventListener(
			uni.$liveID,
			'onLocalMicrophoneClosedByAdmin',
			handleLocalMicrophoneClosedByAdmin
		)
	})

	const handleLocalCameraOpenedByAdmin = {
		callback: event => {
			uni.showToast({
				title: `您已被解除禁画`,
				icon: 'none'
			})
		}
	}
	const handleLocalCameraClosedByAdmin = {
		callback: event => {
			uni.showToast({
				title: `您已被禁画`,
				icon: 'none'
			})
		}
	}
	const handleLocalMicrophoneOpenedByAdmin = {
		callback: event => {
			uni.showToast({
				title: `您已被解除静音`,
				icon: 'none'
			})
		}
	}
	const handleLocalMicrophoneClosedByAdmin = {
		callback: event => {
			uni.showToast({
				title: `您已被静音`,
				icon: 'none'
			})
		}
	}
	const handleLiveEnded = {
		callback: event => {
			if (timer) clearInterval(timer)
			removeLiveListListener('onLiveEnded', handleLiveEnded)
			removeLiveListListener('onKickedOutOfLive', handleKickedOutOfLive)
			removeGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalCameraOpenedByAdmin',
				handleLocalCameraOpenedByAdmin
			)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalCameraClosedByAdmin',
				handleLocalCameraClosedByAdmin
			)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalMicrophoneOpenedByAdmin',
				handleLocalMicrophoneOpenedByAdmin
			)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalMicrophoneClosedByAdmin',
				handleLocalMicrophoneClosedByAdmin
			)
			uni.$liveID = ''
			isShowExitSheet.value = true
			uni.showModal({
				title: `提示`,
				content: `直播已结束`,
				showCancel: false
			})
			navigateBack()
		}
	}
	const handleKickedOutOfLive = {
		callback: event => {
			if (timer) clearInterval(timer)
			removeLiveListListener('onLiveEnded', handleLiveEnded)
			removeLiveListListener('onKickedOutOfLive', handleKickedOutOfLive)
			removeGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalCameraOpenedByAdmin',
				handleLocalCameraOpenedByAdmin
			)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalCameraClosedByAdmin',
				handleLocalCameraClosedByAdmin
			)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalMicrophoneOpenedByAdmin',
				handleLocalMicrophoneOpenedByAdmin
			)
			removeLiveSeatEventListener(
				uni.$liveID,
				'onLocalMicrophoneClosedByAdmin',
				handleLocalMicrophoneClosedByAdmin
			)

			uni.showToast({
				icon: 'none',
				title: '被踢出直播间'
			})
			uni.$liveID = ''
			uni.redirectTo({
				url: `/pages/livelist/index`,
				delta: 1,
				success: () => {
					console.log('返回成功')
				},
				fail: err => {
					console.error('返回失败', err)
				}
			})
		}
	}

	const handleReceiveGift = {
		callback: event => {
			const res = JSON.parse(event)
			if (res.sender.userID !== uni.$userID) {
				showGiftToast(res?.gift || {}, true)
			}
		}
	}
	const audienceCount = computed(() => audienceList.value?.length)

	watch(
		liveList,
		(newValue, oldValue) => {
			for (let i = 0; i < (oldValue || []).length; i++) {
				const liveNewInfo = (newValue || [])[i]
				const liveOldInfo = (oldValue || [])[i]
				if (!liveNewInfo || !liveOldInfo) continue

				if (
					!liveOldInfo?.isMessageDisable &&
					liveNewInfo?.isMessageDisable
				) {
					uni.showToast({
						title: `${liveNewInfo?.liveOwner?.userName}被禁言`,
						icon: 'none',
						duration: 2000,
						position: 'center'
					})
				}
			}
		},
		{ immediate: true, deep: true }
	)

	const audienceOperator = (message: any) => {
		console.warn(`click message: ${JSON.stringify(message)}`)
		if (message?.sender?.userID === loginUserInfo.value.userID) {
			return
		}

		clickUserInfo.value = {
			...(message?.sender || {}),
			liveID: uni?.$liveID
		}
		console.warn(
			`click message clickUserInfo: ${JSON.stringify(
				clickUserInfo.value
			)}`
		)
		isShowAnchorInfo.value = false
		showUserInfoPanel()
	}
	const handleHideInput = () => {
		uni.hideKeyboard()
	}

	const topBack = () => {
		if (uni.$localGuestStatus === 'CONNECTED') {
			exitSheetItems.value = ['断开连麦', '退出直播间']
			exitSheetTitle.value =
				'当前处于连麦状态，是否需要「断开连麦」或「退出直播间」'
		}
		isShowExitSheet.value = true
	}

	const onExitSheetSelect = (res: { tapIndex: number }) => {
		const index = res.tapIndex
		// 当处于连麦，索引0是“断开连麦”，索引1是“退出直播间”；否则只有“退出直播间”在索引0
		if (uni.$localGuestStatus === 'CONNECTED' && index === 0) {
			disconnect({
				liveID: uni?.$liveID
			})
			exitSheetItems.value = ['退出直播间']
			exitSheetTitle.value = ''
			uni.$localGuestStatus = 'IDLE'
			return
		}
		if (
			(uni.$localGuestStatus === 'CONNECTED' && index === 1) ||
			(uni.$localGuestStatus !== 'CONNECTED' && index === 0)
		) {
			// imDataEndLive(liveID.value, 0)
			leaveLive({
				success: () => {
					uni.$liveID = ''
					uni.navigateBack()
					// uni.redirectTo({
					// 	url: `/pages/discover/livelist/list`,
					// 	delta: 1,
					// 	animationType: 'pop-out',
					// 	animationDuration: 300,
					// 	success: () => {
					// 		console.log('返回成功')
					// 	},
					// 	fail: err => {
					// 		console.error('返回失败', err)
					// 	}
					// })
				}
			})
		}
	}

	const ShowAudienceViewClickPanel = userInfo => {
		if (!userInfo) return
		if (userInfo?.userID === currentLive.value.liveOwner.userID) return
		console.warn(
			`ShowAudienceViewClickPanel userID: ${userInfo?.userID}, currentLoginUserId: ${currentLoginUserId?.value}`
		)
		clickUserInfo.value = userInfo
		isShowAnchorInfo.value = false
		showUserInfoPanel()
	}

	const showAnchorInfoDrawer = () => {
		isShowAnchorInfo.value = true
		clickUserInfo.value = {
			...(currentLive?.value.liveOwner || {}),
			liveID: currentLive?.value.liveID || ''
		}
		showUserInfoPanel()
	}

	const showUserInfoPanel = () => {
		isShowUserInfoPanel.value = true
	}

	const showAudienceList = () => {
		if (isAdmin.value) {
			isShowAudienceList.value = true
		}
	}

	// 处理连麦按钮点击事件
	const handleCoGuestButtonClick = () => {
		if (shouldDisableCoGuestButton.value) {
			return // 如果按钮被禁用，直接返回
		}
		ShowCoGuestRequestPanel()
	}

	const ShowCoGuestRequestPanel = () => {
		if (
			uni.$localGuestStatus === 'CONNECTED' ||
			uni.$localGuestStatus === 'USER_APPLYING'
		) {
			if (uni.$localGuestStatus === 'USER_APPLYING') {
				coGuestSheetItems.value = ['取消连麦申请']
			} else if (uni.$localGuestStatus === 'CONNECTED') {
				coGuestSheetItems.value = ['断开连麦']
			}
			isShowCoGuestSheet.value = true
		} else {
			isShowCoGuestRequestPanel.value = true
		}
	}

	const onCoGuestSheetSelect = (res: { tapIndex: number }) => {
		if (uni.$localGuestStatus === 'CONNECTED') {
			if (res.tapIndex === 0) {
				disconnect({
					liveID: uni?.$liveID
				})
				uni.$localGuestStatus = 'IDLE'
			}
			return
		}
		if (uni.$localGuestStatus === 'USER_APPLYING') {
			if (res.tapIndex === 0) {
				cancelApplication({
					liveID: uni?.$liveID
				})
				uni.$localGuestStatus = 'IDLE'
			}
		}
	}

	const selectParticipant = participant => {
		console.warn('选择参与者:', participant)
		selectedAudience.value = participant
		// 可以在这里添加更多逻辑，比如显示参与者详情
	}

	const showGiftPicker = () => {
		isShowGiftPicker.value = true
	}

	const showNetworkQualityPanel = () => {
		isShowNewWorkPanel.value = true
	}

	const handleFollowClick = () => {
		isFollowed.value = !isFollowed.value
		uni.showToast({
			title: isFollowed.value ? '已关注' : '已取消关注',
			icon: 'success',
			duration: 1500
		})
	}

	// 显示礼物提示
	const showGiftToast = async (
		giftData?: any,
		isOnlyDisplay: boolean = false
	) => {
		if (!giftData) return

		const giftDataCopy = {
			...giftData,
			resourceURL: giftData.resourceURL
				? String(giftData.resourceURL)
				: '',
			name: giftData.name ? String(giftData.name) : '',
			giftID: giftData.giftID || 0
		}

		giftInfo.value = giftDataCopy

		const isFromSelf =
			!giftData?.sender || giftData?.sender?.userID === uni.$userID

		showGift(giftDataCopy, {
			onlyDisplay: isOnlyDisplay,
			isFromSelf: isFromSelf
		})

		// 使用 BarrageList 的 showToast 方法显示礼物提示
		if (barrageListRef.value) {
			barrageListRef.value.showToast({
				name:
					giftData?.sender?.userName || giftData?.sender?.userID || '',
				avatarURL: giftData?.sender?.avatarURL || '',
				desc: giftData?.name || '',
				iconURL: giftData?.iconURL || '',
				duration: 3000
			})
		}
	}

	const svgaPlayerFinished = () => {
		isLargeSizeGiftPlayer.value = false
		onGiftFinished()
	}
</script>

<style>
	.live-container {
		flex: 1;
		position: relative;
		width: 750rpx;
		background: rgba(15, 16, 20, 1);
	}

	.live-content {
		flex: 1;
		position: relative;
		width: 750rpx;
	}

	.live-background {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.live-header {
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 32rpx;
		margin-top: 80rpx;
		width: 750rpx;
		z-index: 1000;
	}

	.header-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
	}

	.stream-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 6rpx 10rpx;
		border-radius: 40rpx;
	}

	.avatar {
		width: 58rpx;
		height: 58rpx;
		border-radius: 30rpx;
		border-width: 2rpx;
		border-color: #ffffff;
		margin-right: 16rpx;
	}

	.stream-details {
		display: flex;
		flex-direction: column;
	}

	.stream-title {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 4rpx;
		width: 120rpx;
		height: 40rpx;
		lines: 1;
	}

	.header-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 300rpx;
		padding-left: 40rpx;
	}

	.participants {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.participant-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		border-width: 2rpx;
		border-color: #ffffff;
		margin-right: 8rpx;
	}

	.participant-count {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.count-text {
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 500;
	}

	.control-icons {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.control-icon {
		width: 48rpx;
		height: 48rpx;
		margin-left: 16rpx;
	}

	.footer {
		flex: 1;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 80rpx;
		padding-left: 32rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 686rpx;
	}

	.input-wrapper {
		position: relative;
		background: rgba(34, 38, 46, 0.5);
		border-radius: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 72rpx;
		padding-left: 40rpx;
		color: #ffffff;
		font-size: 28rpx;
		width: 260rpx;
		border: 1px solid rgba(255, 255, 255, 0.14);
	}

	.input-prefix {
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		top: 50rpx;
		left: 230rpx;
		flex: 1;
	}

	.input-emoji {
		width: 36rpx;
		height: 36rpx;
	}

	.action-buttons {
		position: fixed;
		right: 40rpx;
		bottom: 80rpx;
		flex-direction: row;
		align-items: center;
	}

	.action-btn {
		width: 64rpx;
		height: 64rpx;
		margin-left: 16rpx;
	}

	.action-btn.disabled {
		opacity: 0.5;
		filter: grayscale(100%);
		pointer-events: none;
	}

	.follow-btn {
		padding: 0 16rpx;
		height: 56rpx;
		background: #338aff;
		color: #fff;
		border-radius: 32rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 88rpx; */
	}

	.follow-btn.followed {
		background: #fff;
		color: #338aff;
		border: 2rpx solid #338aff;
	}

	.live-network {
		width: 36rpx;
		height: 36rpx;
	}

	.live-network-container {
		position: fixed;
		top: 200rpx;
		right: 30rpx;
		width: 180rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 45rpx;
		flex-direction: row;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.live-timer {
		color: #fff;
		font-size: 24rpx;
		margin-left: 12rpx;
	}
</style>
