<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="topNUmber" class="count-text">{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}</text>
              <text v-else class="count-text">{{ audienceList.length }}</text>
            </view>
          </view>
          <view class="control-icons" @click.stop="navigateBack()">
            <!-- <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 { navigateTo } from '@/utils/router'
  import { imDataEndLive, getLiveActivityDetail, getLiveActivityRecord } 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);
  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'


  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,
  });
  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 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('')


  // 监听座位变化：当自身不在 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)) {
        activityData.value = {
          ...JSON.parse(newMessages.find(v => v.businessID === LIVE_BUSINESS.SIGN)?.data),
          isParticipated: false
        };
        isShowActivity.value = true;
      }
    }
  });

  // 页面加载
  onLoad((options) => {
    console.warn('Live page onLoad = ', options);
    liveID.value = options?.liveID;
    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) {
      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.showToast({
        icon: 'none',
        title: '直播已结束'
      })
      uni.$liveID = ''
      uni.redirectTo({
        url: `/pages/livelist/index`,
        delta: 1,
        success: () => {
          console.log('返回成功');
        },
        fail: (err) => {
          console.error('返回失败', err);
        }
      });
    }
  }
  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 navigateBack = () => {
    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 = ['退2出直播间']
      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.redirectTo({
            url: `/pages/discover/livelist/index`,
            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 = () => {
    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>