<template>
  <view class="live-container" @click="handleHideInput" :style="{
                                          height: systemInfo?.windowHeight + 'px',
                                          width: systemInfo?.safeArea?.width + 'px',
                                       }">
    <LiveStreamView v-if="liveID.length > 0" :liveID="liveID || ''" :isAnchor="true" :templateLayout="templateLayout"
      :isLiving="isStartLive" :enableClickPanel="true" :onStreamViewClick="ShowAnchorViewClickPanel"></LiveStreamView>

    <view class="navigate-back-arrow" @tap="goBackToTabBar" v-if="!isStartLive">
      <image class="navigate-back-arrow-image" src="/static/images/left-arrow.png"></image>
    </view>

    <!-- 顶部信息栏 -->
    <view class="header" v-if="isStartLive">
      <view class="header-left">
        <view class="stream-info" @tap="showAnchorInfoDrawer">
          <image class="avatar" :src="loginUserInfo?.avatarURL || defaultAvatarURL" mode="aspectFill" />
          <view class="stream-details">
            <text class="stream-title"
              :numberOfLines="1">{{ loginUserInfo.nickname || loginUserInfo.userID || '' }}</text>
          </view>
        </view>
      </view>
      <view class="header-right">
        <view class="participants" @tap="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">{{ audienceCount }}</text>
          </view>
        </view>
        <view class="control-icons">
          <!-- <image class="control-icon" src="/static/images/live-share.png" /> -->
          <image class="control-icon" @tap="navigateBack()" src="/static/images/live-end.png" />
        </view>
      </view>
    </view>

    <!-- 主播开播前画面区域 -->
    <BeforeLivePanel v-if="!isStartLive" :coverURL="coverURL" :liveCategory="liveCategory" :liveMode="liveMode"
      :templateLayout="templateLayout" :liveTitle="liveTitle" @editCover="editCover" @editTitle="editTitle"
      @chooseCategory="chooseCategory" @chooseMode="chooseMode" @chooseTemplate="chooseTemplate" @startLive="startLive"
      @camera="handleCamera" @settings="handleSettings" ref="beforeLivePanelRef" />

    <!-- 主播直播画面区域 -->
    <view class="live-content" v-if="isStartLive">
      <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>

      <view class="go-guest-request-container" v-if="(applicants || []).length > 0 && isShowCoGuestPanelAvatar"
        @tap="showCoGuestPanel('requests')">
        <view class="avatar-overlay-container" :style="getAvatarContainerStyle()">
          <!-- 显示前两张申请者的头像 -->
          <image v-for="(applicant, index) in applicants.slice(0, 2)" :key="index" class="go-guest-request-img"
            :style="getAvatarStyle(index, Math.min(applicants.length, 3))"
            :src="applicant?.avatarURL || defaultAvatarURL" />
          <!-- 第三张图片始终显示默认头像 -->
          <image v-if="applicants.length >= 3" class="go-guest-request-img" :style="getAvatarStyle(2, 3)"
            src="/static/images/live-more.png" />
        </view>
        <text class="go-guest-request-text">申请连麦({{ (applicants || []).length }})</text>
      </view>
      <BarrageList mode="anchor" :bottomPx="safeArea.height * 1/8" @itemTap="audienceOperator" ref="barrageListRef" />
      <view class="live-bottom-Panel" :style="{ width: safeArea.width + 'px' }">
        <BarrageInput></BarrageInput>
        <view class="action-buttons">
          <view class="action-button-item" @tap="showCoHostPanel">
            <image class="action-button-icon" src="/static/images/link-host.png" mode="aspectFit" />
            <text class="action-button-text">连主播</text>
          </view>
          <!-- <view class="action-button-item">
						<image class="action-button-icon" src="/static/images/host-pk.png" mode="aspectFit" />
            <text class="action-button-text">主播pk</text>
          </view> -->
					<view class="action-button-item" @tap="userAddActivity">
					  <image class="action-button-icon" src="/static/images/activity.png" mode="aspectFit" />
					  <text class="action-button-text">活动</text>
					</view>
          <view class="action-button-item" @tap="showCoGuestPanel('requests')">
            <image class="action-button-icon" src="/static/images/link-guest.png" mode="aspectFit" />
            <text class="action-button-text">连观众</text>
          </view>
          <view class="action-button-item" @tap="handleSettings">
            <image class="action-button-icon" src="/static/images/live-more.png" mode="aspectFit" />
            <text class="action-button-text">更多</text>
          </view>
          <Like role="anchor" />
        </view>
      </view>
			<!-- 活动弹框 -->
			<Activity v-model="isShowActivity" :roomId="roomDataId" :groupID="groupId" :creatorType="creatorType"></Activity>
      <LiveAudienceList v-model="isShowAudienceList"></LiveAudienceList>
      <AudienceActionPanel v-if="liveID" v-model="isShowAudienceActionPanel" :userInfo="selectedAudience"
        :liveID="liveID"></AudienceActionPanel>

      <CoGuestPanel v-if="liveID" v-model="isShowCoGuestPanel" :activeTab="activeTab"></CoGuestPanel>
      <CoHostPanel v-if="liveID" v-model="isShowCoHostPanel"></CoHostPanel>
      <LiveMoreActionsPanel v-if="liveID" v-model="isShowLiveMoreActionsPanel"></LiveMoreActionsPanel>
      <UserInfoPanel v-if="liveID" v-model="isShowUserInfoPanel" :userInfo="clickUserInfo"
        :isShowAnchor="isShowAnchorInfo"></UserInfoPanel>
    </view>

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

    <LiveStatusInfoCard v-model="isShowLiveStatusInfoCard" />
    <ActionSheet v-model="isShowEndSheet" :title="endSheetTitle" :itemList="endSheetItems" @select="onEndSheetSelect" />
    <!-- 自定义Modal组件 -->
    <view class="custom-modal-overlay" v-if="showCustomModal">
      <view class="custom-modal" @click.stop>
        <view class="modal-content">
          <text class="modal-text"> {{ modalContent }}</text>
        </view>
        <view class="modal-actions">
          <view class="modal-btn modal-btn-cancel" @tap="handleModalCancel">
            <text class="modal-btn-reject">拒绝</text>
          </view>
          <view class="modal-btn modal-btn-confirm" @tap="handleModalConfirm">
            <text class="modal-btn-accept">接受</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
  import { imAddLive, imDataStartLive, getLiveActivityDetail, imDataEndLive } from '@/api/tui-kit'
  import BeforeLivePanel from '../../components/BeforeLivePanel.nvue';
  import LiveStatusInfoCard from '@/uni_modules/tuikit-atomic-x/components/LiveStatusInfoCard.nvue';
  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 CoGuestPanel from '@/uni_modules/tuikit-atomic-x/components/CoGuestPanel/CoGuestPanel.nvue';
  import CoHostPanel from '@/uni_modules/tuikit-atomic-x/components/CoHostPanel.nvue';
  import AudienceActionPanel from '@/uni_modules/tuikit-atomic-x/components/LiveAudienceList/AudienceActionPanel.nvue';
  import LiveMoreActionsPanel from '../../components/LiveMoreActionsPanel.nvue';
  import LiveStreamView from '@/uni_modules/tuikit-atomic-x/components/LiveStreamView/LiveStreamView.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 Like from '@/uni_modules/tuikit-atomic-x/components/Like.nvue';
  import BarrageInput from '@/uni_modules/tuikit-atomic-x/components/BarrageInput.vue';
  import BarrageList from '@/uni_modules/tuikit-atomic-x/components/BarrageList.nvue';
  import { useLiveListState } from "@/uni_modules/tuikit-atomic-x/state/LiveListState";
  import { useCoGuestState } from "@/uni_modules/tuikit-atomic-x/state/CoGuestState";
  import { useDeviceState } from "@/uni_modules/tuikit-atomic-x/state/DeviceState";
  import { useBarrageState } from "@/uni_modules/tuikit-atomic-x/state/BarrageState";
  import { useLiveAudienceState } from "@/uni_modules/tuikit-atomic-x/state/LiveAudienceState";
  import { useCoHostState } from "@/uni_modules/tuikit-atomic-x/state/CoHostState";
  import { useLiveSeatState } from "@/uni_modules/tuikit-atomic-x/state/LiveSeatState";
  import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
  import { useAudioEffectState } from '@/uni_modules/tuikit-atomic-x/state/AudioEffectState'
  import { useBaseBeautyState } from '@/uni_modules/tuikit-atomic-x/state/BaseBeautyState'
  import { useGiftState } from "@/uni_modules/tuikit-atomic-x/state/GiftState";
  import { useLiveSummaryState } from '@/uni_modules/tuikit-atomic-x/state/LiveSummaryState'
  import ActionSheet from '@/components/ActionSheet.nvue'
  import Activity from './components/activity.nvue'
  import { LIVE_BUSINESS } from '@/constants/live-keys'

  const dom = uni.requireNativePlugin('dom')
  const { loginUserInfo } = useLoginState();
  uni.$liveID = `live_${uni.$userID}`
  uni.$localGuestStatus = 'IDLE'
  const { setVoiceEarMonitorEnable,
    setVoiceEarMonitorVolume,
    setAudioChangerType,
    setAudioReverbType } = useAudioEffectState(uni.$liveID)
  const { setSmoothLevel, setWhitenessLevel, setRuddyLevel, whitenessLevel, ruddyLevel, smoothLevel } = useBaseBeautyState(uni.$liveID)
  const { addCoHostListener, removeCoHostListener, acceptHostConnection, rejectHostConnection, exitHostConnection, coHostStatus, invitees } = useCoHostState(uni?.$liveID)
  const { joinLive, createLive, fetchLiveList, liveList, endLive, currentLive, liveListCursor, callExperimentalAPI } = useLiveListState();
  const { applicants, rejectApplication, connected } = useCoGuestState(uni?.$liveID);
  const { messageList, sendTextMessage, sendCustomMessage } = useBarrageState(uni?.$liveID);
  const { openLocalCamera, openLocalMicrophone, isFrontCamera, switchCamera, closeLocalMicrophone, closeLocalCamera } = useDeviceState(uni?.$liveID);
  const { audienceList } = useLiveAudienceState(uni?.$liveID);
  const { seatList, canvas, lockSeat, } = useLiveSeatState(uni?.$liveID);
  const { addGiftListener, removeGiftListener } = useGiftState(uni?.$liveID);
  const { summaryData } = useLiveSummaryState(uni.$liveID)
  const defaultCoverURL = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
  const defaultAvatarURL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png';

 const topNUmber = ref('')
  const audienceCount = computed(() => audienceList.value.length);
  const isShowEndSheet = ref(false)
  const endSheetTitle = ref('')
  const endSheetItems = ref(['关闭直播间'])
  const systemInfo = ref({});
  const safeArea = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    width: 375,
    height: 750,
  });
  const beforeLivePanelRef = ref();
  // 活动弹框状态
  const isShowActivity = ref(false);
  const isShowUserInfoPanel = ref(false);
  const isShowAudienceList = ref(false);
  const isShowCoHostPanel = ref(false);
  const isShowCoGuestPanel = ref(false);
  const isShowAudienceActionPanel = ref(false);
  const isShowLiveMoreActionsPanel = ref(false);
  const isShowLiveStatusInfoCard = ref(false);
  // 主播直播状态
  const isStartLive = ref(false);
  // 通过点击 message 信息选中的观众
  const selectedAudience = ref({});
  const liveID = ref(uni?.$liveID);
  const isLargeSizeGiftPlayer = ref(false);
  const giftInfo = ref({});

  const activeTab = ref('requests');

  // 自定义Modal相关状态
  const showCustomModal = ref(false);
  const modalContent = ref('');
  const currentModalUserInfo = ref(null);

  const coverURL = ref(defaultCoverURL);
  const liveCategory = ref('日常聊天');
  const liveMode = ref('公开');
  const templateLayout = ref(600);
  const liveTitle = ref(loginUserInfo.value?.nickname);
  const currentUserID = ref(loginUserInfo.value?.userID);
  const clickUserInfo = ref({});
  const isShowCoGuestPanelAvatar = ref(true);
  const barrageListRef = ref();
  const giftPlayerRef = ref();
  const { showGift, onGiftFinished } = giftService({
    roomId: uni?.$liveID,
    giftPlayerRef,
  })
  const isShowAnchorInfo = ref(true)
  // 监听用户名变化，更新 liveTitle
  watch(() => loginUserInfo.value?.nickname, (newUserName, oldUserName) => {
    if (newUserName) {
      // 如果当前标题是默认值或者为空，则更新为新的用户名
      if (!liveTitle.value || liveTitle.value === oldUserName) {
        liveTitle.value = newUserName;
      }
    }
  }, { immediate: true, deep: true });

  watch(() => loginUserInfo.value?.userID, (newUserId, oldUserId) => {
    if (newUserId) {
      // 如果当前标题是默认值或者为空，则更新为新的用户名
      currentUserID.value = newUserId;
      uni.$liveID = `live_${currentUserID.value}`;
      liveID.value = uni.$liveID;
    }
  }, { 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;
      }
    }
  });

  const editCover = (data : string) => {
    coverURL.value = data
  };
  const editTitle = (data : string) => {
    liveTitle.value = data
  };
  const chooseCategory = (data : string) => {
    liveCategory.value = data
  };
  const chooseMode = (data : string) => {
    liveMode.value = data
  };

  const chooseTemplate = (data : number) => {
    templateLayout.value = data;
  }

  // 自定义Modal相关方法
  const showCustomModalDialog = (userInfo) => {
    currentModalUserInfo.value = userInfo;
    modalContent.value = `${userInfo.userName || userInfo.userID}向你发来连线邀请`;
    showCustomModal.value = true;

    setTimeout(() => {
      closeCustomModal();
    }, 30000);
  };

  // 关闭Modal
  const closeCustomModal = () => {
    showCustomModal.value = false;
    currentModalUserInfo.value = null;
  };

  // 处理确认操作
  const handleModalConfirm = () => {
    if (currentModalUserInfo.value) {
      acceptHostConnection({
        liveID: uni?.$liveID,
        fromHostLiveID: currentModalUserInfo.value.liveID
      });
    }
    closeCustomModal();
  };

  // 处理取消操作
  const handleModalCancel = () => {
    if (currentModalUserInfo.value) {
      rejectHostConnection({
        liveID: uni?.$liveID,
        fromHostLiveID: currentModalUserInfo.value.liveID
      });
    }
    isShowCoGuestPanelAvatar.value = true
    closeCustomModal();
  };

  watch(applicants, (newVal, oldVal) => {
    if (!isShowCoGuestPanelAvatar.value) {
      applicants.value.forEach(applicant => {
        rejectApplication({
          liveID: uni?.$liveID,
          userID: applicant.userID,
        });
      });
    }
  }, {
    deep: true,
    immediate: true,
  })

  watch(coHostStatus, (newVal) => {
    if (newVal === 'DISCONNECTED') {
      isShowCoGuestPanelAvatar.value = true
    }
  }, {
    deep: true,
    immediate: true,
  })

  watch(invitees, (newVal) => {
    if (!newVal && !isShowCoGuestPanelAvatar.value) {
      isShowCoGuestPanelAvatar.value = true
    } else {
      applicants.value.forEach(applicant => {
        rejectApplication({
          liveID: uni?.$liveID,
          userID: applicant.userID,
        });
      });
    }
  })

  // 聊天渲染与自动滚动由 ChatList 组件处理

  const handleReceiveGift = {
    callback: (event) => {
      const res = JSON.parse(event)
      showGiftToast(res?.gift || {});
    }
  }

  // 显示礼物提示
  const showGiftToast = async (giftData ?: any) => {
    if (!giftData) return;
    giftInfo.value = giftData;

    showGift(giftData, {
      onlyDisplay: true,
      isFromSelf: false
    });

    // 使用 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 groupId = ref('')
  const creatorType = ref('')
  // 页面加载
  onLoad((options) => {
    creatorType.value = options?.creatorType
    groupId.value = decodeURIComponent(options?.groupId)
    // 禁用右滑返回（仅 iOS 有效）
    if (uni.getSystemInfoSync().platform === 'ios') {
      const pages = getCurrentPages();
      if (pages.length > 0) {
        const currentPage = pages[pages.length - 1];
        currentPage.$page.style.disableSwipeBack = true;
      }
    }
  });

  onMounted(() => {

    uni.setKeepScreenOn({
      keepScreenOn: true,
    });
    openLocalCamera({
      isFront: true,
    });
    openLocalMicrophone();
    uni.getSystemInfo({
      success: (res) => {
        systemInfo.value = res;
        safeArea.value = res.safeArea;

        console.warn(`systemInfo: ${systemInfo.value.windowHeight}`)
      }
    });
    addCoHostListener(uni.$liveID,
      'onCoHostRequestAccepted',
      handleCoHostRequestAccepted
    )
    addCoHostListener(uni.$liveID,
      'onCoHostRequestRejected',
      handleCoHostRequestRejected
    )
    addCoHostListener(uni.$liveID,
      'onCoHostRequestTimeout',
      handleCoHostRequestTimeout
    )
    addCoHostListener(uni.$liveID,
      'onCoHostRequestReceived',
      handleCoHostRequestReceived
    )
    addGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)

  });
  onUnmounted(() => {
    removeCoHostListener(uni.$liveID,
      'onCoHostRequestAccepted',
      handleCoHostRequestAccepted
    )
    removeCoHostListener(uni.$liveID,
      'onCoHostRequestRejected',
      handleCoHostRequestRejected
    )
    removeCoHostListener(uni.$liveID,
      'onCoHostRequestTimeout',
      handleCoHostRequestTimeout
    )
    removeCoHostListener(uni.$liveID,
      'onCoHostRequestReceived',
      handleCoHostRequestReceived
    )
    removeGiftListener(uni.$liveID, 'onReceiveGift', handleReceiveGift)
  })

  const handleCoHostRequestAccepted = {
    callback: (event) => {
      uni.showToast({
        icon: 'none',
        title: '连线被同意'
      })
    }
  }

  const handleCoHostRequestRejected = {
    callback: (event) => {
      uni.showToast({
        icon: 'none',
        title: '连线被拒绝'
      })
    }
  }

  const handleCoHostRequestTimeout = {

    callback: (event) => {
      uni.showToast({
        icon: 'none',
        title: '连线请求超时'
      })
      isShowCoGuestPanelAvatar.value = true
    },

  }

  // 添加活动
  const userAddActivity =  () => {
    getLiveActivityDetail(roomDataId.value).then(res => {
      if (res?.data && res.data.status === 1) {
        // status: 0-未开始 1-进行中 2-已结束 3-已取消
        uni.showModal({
          title: `提示`,
          content: '您有一个活动正在进行中，请勿重复添加活动',
          showCancel: false,
          confirmText: '确定'
        })
      } else {
        isShowActivity.value = true
      }
    })
  };

  const handleCoHostRequestReceived = {
    callback: (event) => {
      if (isShowCoGuestPanelAvatar.value && applicants.value.length === 0) {
        isShowCoGuestPanelAvatar.value = false
      }
      const res = JSON.parse(event)
      if (connected.value.length > 1 || applicants.value.length > 0) {
        rejectHostConnection({
          liveID: uni?.$liveID,
          fromHostLiveID: res.inviter.liveID
        })
        return
      }
      // 使用自定义Modal替代uni.showModal
      showCustomModalDialog(res.inviter);
    }
  }

  const clearAudioEffectSet = () => {
    setVoiceEarMonitorEnable({
      enable: false
    })
    setVoiceEarMonitorVolume({
      volume: 100
    })
    setAudioChangerType({
      changerType: 'NONE'
    })
    setAudioReverbType({
      reverbType: 'NONE'
    })
  }

  const handleHideInput = () => {
    uni.hideKeyboard()
  }

  const clearBeautyPanelSet = () => {
    setSmoothLevel({ smoothLevel: 0 })
    setWhitenessLevel({ whitenessLevel: 0 })
    setRuddyLevel({ ruddyLevel: 0 })
  }

  // 未开直播：退出
  const goBackToTabBar = () => {
    clearAudioEffectSet();
    clearBeautyPanelSet();
    closeLocalMicrophone();
    closeLocalCamera();
    console.warn(` 后退 `);
    uni.navigateBack({
      delta: 1,
      // url: '/TUIKit/components/TUIChat/index',
      success: () => {
        console.log(`redirect success`);
      },
      fail: (error) => {
        console.error(`redirect, error: ${JSON.stringify(error)}`);
      },
    });
  };
  const navigateBack = () => {
    if (coHostStatus.value === 'CONNECTED') {
      endSheetItems.value = ['断开连线', '关闭直播间']
      endSheetTitle.value = '当前处于连线状态，是否需要「断开连线」或「关闭直播间」'
    }
    isShowEndSheet.value = true
  };

  const onEndSheetSelect = (res : { tapIndex : number }) => {
    const index = res.tapIndex
    if (coHostStatus.value === 'CONNECTED' && index === 0) {
      exitHostConnection({
        liveID: uni?.$liveID,
      })
      endSheetItems.value = ['关闭直播间']
      endSheetTitle.value = ''
      return
    }
    if (coHostStatus.value === 'CONNECTED' && index === 1 || coHostStatus.value !== 'CONNECTED' && index === 0) {
      clearAudioEffectSet()
      clearBeautyPanelSet()
      uni.$summaryData = summaryData.value
      console.warn(` 退出直播===直播间人数`, audienceCount.value);
			imDataEndLive(roomDataId.value, audienceCount.value).then(() => {
				uni.redirectTo({ url: '/pages/liveend/index' });
      })
      // endLive({
      //   success: () => {
      //     console.warn(` 退出直播  imDataEndLive`);
      //     uni.redirectTo({ url: '/pages/liveend/index' });
      //   },
      // });
    }
  }

  const handleCamera = () => {
    switchCamera({ isFront: !isFrontCamera.value })
  };

  const handleSettings = () => {
    isShowLiveMoreActionsPanel.value = true;
  };

  const roomDataId = ref('')
  const startLive = async () => {
    try {
      console.log('点击开始直播')
      const data = {
        coverUrl: coverURL.value,
        roomName: liveTitle.value,
        groupId: groupId.value
      }
      const roomData = await imAddLive(data)
      const roomId = roomData.data.roomId
      uni.$liveID = roomId
      liveID.value = roomId
      const res = await imDataStartLive(roomId)
      console.log(roomData, '========11111')
      console.log(res, '========22222')
      roomDataId.value = roomId
      const params = {
        cursor: "", // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
        count: 20,   // 分页拉取的个数
      };
      joinLive({  liveID: roomId })
      fetchLiveList(params);
      openLocalCamera({ isFront: isFrontCamera.value });
      openLocalMicrophone();
      setLocalVideoMuteImage();
      isStartLive.value = true;
    } catch (err) {
      console.log(err, '====22')
    }
// ======================原本代码
   // createLive({
   //   liveInfo: {
   //     liveID: uni?.$liveID,
   //     liveName: liveTitle.value,
   //     coverURL: coverURL.value,
   //     isSeatEnabled: true,
   //     seatMode: 'APPLY',
   //     maxSeatCount: 0,
   //     isPublicVisible: liveMode.value === '公开',
   //     keepOwnerOnSeat: true,
   //     seatLayoutTemplateID: templateLayout.value,
   //   },
   //   success: () => {
   //     const params = {
   //       cursor: "", // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
   //       count: 20,   // 分页拉取的个数
   //     };
   //     fetchLiveList(params);

   //     openLocalCamera({ isFront: isFrontCamera.value });
   //     openLocalMicrophone();
   //     setLocalVideoMuteImage();
   //   },
   //   fail: (errCode, errMsg) => {
   //     uni.showToast({
   //       title: '创建直播间失败',
   //     });
   //   },
   // });
   // isStartLive.value = true;
  };

  const ShowAnchorViewClickPanel = (userInfo) => {
    clickUserInfo.value = userInfo,
      showUserInfoPanel()
    isShowAnchorInfo.value = false
  }

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

  const setLocalVideoMuteImage = () => {
    const tempFilePath = '../../static/images/live-mute-local-video.png'; // 本地存放的图片文件
    let imageFilePath = '';
    uni.saveFile({
      tempFilePath: tempFilePath,
      success: (res) => {
        console.warn('保存文件成功 = ', JSON.stringify(res)); // 获取的是相对路径
        imageFilePath = res.savedFilePath;
        imageFilePath = plus.io.convertLocalFileSystemURL(imageFilePath); // 转绝对路径
        const data = { "api": "setLocalVideoMuteImage", "params": { "image": imageFilePath } }
        callExperimentalAPI(
          {
            jsonData: JSON.stringify(data)
          })
      },
      fail: (err) => {
        console.error('保存文件失败');
      },
    });
  }

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


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

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

    if (message?.sender?.userID === currentUserID.value) {
      return;
    }
    const targetAudience = audienceList.value.find(audience =>
      audience.userID === message?.sender?.userID
    );
    if (!targetAudience) {
      isShowAnchorInfo.value = false;
      clickUserInfo.value = message?.sender;
      showUserInfoPanel()
    } else {
      selectedAudience.value = targetAudience;
      console.warn(`click message selectedAudience: ${JSON.stringify(selectedAudience.value)}`);
      isShowAudienceActionPanel.value = true;
    }
  };

  // 直播中控制面板操作
  const showCoHostPanel = () => {
    if (connected.value.length > 1) {
      uni.showToast({
        title: '连麦中，不可以使用连线功能',
        icon: 'none',
      })
      return
    }
    console.warn('-> go host Panel');
    const params = {
      cursor: '', // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
      count: 20,   // 分页拉取的个数
    };
    fetchLiveList(params);
    isShowCoHostPanel.value = true;
  };
  const showCoGuestPanel = (activeTabValue : string = 'requests') => {
    console.warn(`go guest Panel activeTab = ${activeTabValue}`);
    activeTab.value = activeTabValue;
    isShowCoGuestPanel.value = true;
  };



  // 计时器相关
  import { ref as vueRef, onMounted as vueOnMounted, onUnmounted as vueOnUnmounted } from 'vue';
  const liveDuration = vueRef(0); // 秒
  const liveDurationText = vueRef('00:00:00');
  let timer : any = null;

  watch(isStartLive, (val) => {
    if (val) {
      liveDuration.value = 0;
      updateLiveDurationText();
      timer = setInterval(() => {
        liveDuration.value++;
        updateLiveDurationText();
      }, 1000);
    } else {
      clearInterval(timer);
      timer = null;
      liveDuration.value = 0;
      updateLiveDurationText();
    }
  });

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

  vueOnUnmounted(() => {
    if (timer) clearInterval(timer);
  });



  const svgaPlayerFinished = () => {
    isLargeSizeGiftPlayer.value = false;
    onGiftFinished();
  }

  // 头像叠加配置
  const avatarOverlayConfig = {
    size: 80, // 头像大小 (rpx)
    overlapRatio: 0.6, // 覆盖比例 (0.5 = 50%覆盖, 0.6 = 60%覆盖)
    enableScale: false, // 是否启用缩放效果
    enableOpacity: false, // 是否启用透明度效果

  };

  // 计算头像容器样式，确保水平垂直居中
  const getAvatarContainerStyle = () => {
    const count = applicants.value?.length || 0;
    if (count === 0) return {};

    // 使用配置计算叠加偏移量
    const overlapOffset = avatarOverlayConfig.size * (1 - avatarOverlayConfig.overlapRatio);
    // 容器总宽度 = 头像大小 + (头像数量 - 1) * 偏移量
    const containerWidth = avatarOverlayConfig.size + (count - 1) * overlapOffset;

    return {
      position: 'relative',
      width: `${containerWidth}rpx`,
      height: `${avatarOverlayConfig.size}rpx`,
      margin: '0 auto' // 水平居中
    };
  };

  // 计算每个头像的样式，实现真正的叠加效果
  const getAvatarStyle = (index : number, totalCount : number) => {
    // 使用配置计算叠加偏移量
    const overlapOffset = avatarOverlayConfig.size * (1 - avatarOverlayConfig.overlapRatio);

    // 计算每个头像的left位置，后面的头像向左偏移，覆盖前面的头像
    const left = index * overlapOffset;

    // 基础样式
    const baseStyle = {
      position: 'absolute',
      left: `${left}rpx`,
      top: '0',
      width: `${avatarOverlayConfig.size}rpx`,
      height: `${avatarOverlayConfig.size}rpx`,
      borderRadius: `${avatarOverlayConfig.size / 2}rpx`,
    };

    // 添加视觉效果
    if (avatarOverlayConfig.enableScale) {
      baseStyle.transform = `scale(${1 - index * 0.05})`; // 后面的头像稍微小一点
    }

    if (avatarOverlayConfig.enableOpacity) {
      baseStyle.opacity = 1 - index * 0.1; // 后面的头像稍微透明一点
    }

    return baseStyle;
  };
</script>

<style>
  .live-container {
    flex: 1;
    position: relative;
    background: rgba(15, 16, 20, 0.5);
    overflow: hidden;
  }

  .navigate-back-arrow {
    position: absolute;
    top: 130rpx;
    left: 60rpx;
    z-index: 1000;
    width: 60rpx;
    height: 60rpx;
  }

  .navigate-back-arrow-image {
    width: 20rpx;
    height: 35rpx;
  }

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

  .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: 56rpx;
    height: 56rpx;
    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;
  }

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

  .participant-avatar {
    width: 36rpx;
    height: 36rpx;
    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: 36rpx;
    height: 36rpx;
    margin-left: 16rpx;
  }


  .live-content {
    flex: 1;
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .go-guest-request-container {
    position: fixed;
    top: 280rpx;
    right: 30rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 40rpx;
    background: #4F586B;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* 头像叠加容器样式 */
  .avatar-overlay-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .go-guest-request-img {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    transition: all 0.3s ease;
    /* 确保图片内容正确显示 */
    object-fit: cover;
  }

  .go-guest-request-text {
    margin-top: 30rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .live-bottom-Panel {
    flex: 1;
    position: fixed;
    bottom: 40rpx;
    left: 20rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }




  .action-buttons {
    flex-direction: row;
    align-items: center;
    padding-right: 70rpx;
  }

  .action-button-item {
    width: 64rpx;
    height: 92rpx;
    margin-left: 24rpx;
    justify-content: center;
    align-items: center;
  }

  .action-button-icon {
    width: 56rpx;
    height: 56rpx;
    margin-bottom: 4rpx;
  }

  .action-button-text {
    color: #fff;
    font-size: 20rpx;
  }

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

  .live-network-container {
    position: fixed;
    top: 220rpx;
    right: 10rpx;
    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;
  }

  /* 自定义Modal样式 */
  .custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .custom-modal {
    width: 500rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
    flex-direction: column;
    align-items: center;
  }



  .modal-content {
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin-top: 40rpx;
  }

  .modal-text {
    color: #000000;
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    line-height: 40rpx;
    margin-bottom: 30rpx;
    max-width: 400rpx;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }

  .modal-actions {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 2rpx solid rgba(213, 224, 242, 1);
    width: 500rpx;
  }

  .modal-btn {
    width: 250rpx;
    padding: 28rpx;
    justify-content: center;
    align-items: center;
  }

  .modal-btn-confirm {
    border-left: 2rpx solid rgba(213, 224, 242, 1);
  }

  .modal-btn-reject {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(79, 88, 107, 1);
  }

  .modal-btn-accept {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(28, 102, 229, 1);
  }
</style>