<template>
  <!-- 直播中控台 start -->
  <el-row type="flex" justify="center" class="live-console" :gutter="10" v-loading="loading">>
    <!-- 聊天 start -->
    <el-col class="live-console-col" :span="6">
      <el-tabs class="live-console-tab-left" v-model="tabRight.activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="讨论" name="talk">
          <el-scrollbar style="height: 500px; width: 100%;" ref="manageRightRef">
            <el-row v-for="m in msgList" >
              <el-row v-if="m.userId !== userId" style="margin-top: 5px" type="flex" align="top" >
                <el-col :span="3" style="margin-left: 10px"><el-avatar :src="m.avatar"/></el-col>
                <el-col :span="15">
                  <el-row style="margin-left: 10px">
                    <el-col><div style="font-size: 12px; color: #999; margin-bottom: 3px;">{{ m.nickName }}</div></el-col>
                    <el-col :span="24" style="max-width: 200px;">
                      <div style="white-space: normal; word-wrap: break-word;background-color: #f0f2f5; padding: 8px; border-radius: 5px;font-size: 14px;width: 100%;">
                        {{ m.msg }}
                      </div>
                    </el-col>
                    <el-col>
                      <a style="cursor: pointer;color: #ff0000;padding: 8px 8px 0 0;font-size: 12px;" @click="changeUserState(m)">{{ m.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                      <a style="cursor: pointer;color: #ff0000;padding: 8px 8px 0 0;font-size: 12px;" @click="blockUser(m)">拉黑</a>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row v-if="m.userId === userId" style="padding: 8px 0" type="flex" align="top" justify="end">
                <div style="display: flex;justify-content: flex-end">
                  <div style="display: flex;justify-content: flex-end;flex-direction: column;max-width: 200px;align-items: flex-end">
                    <div style="font-size: 12px; color: #999; margin-bottom: 3px;">{{ m.nickName }}</div>
                    <div style="white-space: normal; word-wrap: break-word;width: 100%; background-color: #e6f7ff; padding: 8px; border-radius: 5px;font-size: 14px;">{{ m.msg }}</div>
                  </div>
                  <el-avatar :src="m.avatar" style="margin-left: 10px; margin-right: 10px;"/>
                </div>
              </el-row>
            </el-row>
            <!-- 底部留白 -->
            <div style="height: 20px;"></div>
          </el-scrollbar>

          <!-- 消息输入区域 -->
          <div style="padding: 10px; border-top: 1px solid #ebeef5; background-color: #fff; min-height: 120px;">
            <el-input
              type="textarea"
              v-model="newMsg"
              placeholder="请输入消息..."
              :rows="8"
              @keyup.enter.native="sendMessage"
              clearable
              resize="none"
              style="flex: 1; margin-right: 10px;"
            >
            </el-input>
            <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
              <el-button plain @click="sendMessage">发送</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <!-- 聊天 end -->


    <!-- 直播/视频 start -->
    <el-col class="live-console-col" :span="12">
      <div style="background: #000; border-radius: 5px; overflow: hidden; margin: 10px 5px;">
        <div style="border-radius: 5px; overflow: hidden;" v-if="!isAudit">
          <img :src="require('@/assets/image/videoIsAudit.png')" style="width: 100%; height: 45vh;">
        </div>
        <div style="border-radius: 5px; overflow: hidden;" v-else-if="status != 2 && status != 4">
          <img :src="require('@/assets/image/videoNotStart.png')" style="width: 100%; height: 45vh;">
        </div>
        <div style="border-radius: 5px; overflow: hidden;" v-else-if="liveType == 1">
          <video
            controls
            ref="livingPlayer"
            autoplay
            @click.prevent
            @contextmenu.prevent
            class="custom-video"
            width="100%"
            style="display: block; background: #000; height: 45vh;"
          ></video>

          <!-- 时间显示（可选） -->
          <div ref="liveElapsedTime" class="time-display">
            已播放：<span id="liveElapsedTime">00:00:00</span>
          </div>
        </div>
        <div style="border-radius: 5px; overflow: hidden;" v-else-if="liveType == 2">
          <video
            controls
            ref="videoPlayer"
            loop
            autoplay
            width="100%"
            muted
            playsinline
            @click.prevent
            @contextmenu.prevent
            class="custom-video"
            style="display: block; background: #000; height: 40vh;"
          >
            <source :src="videoUrl" type="video/mp4">
          </video>
          <!-- 自定义进度条容器 -->
          <div ref="progressBar" class="progress-container">
            <div id="progressBar" class="progress-bar"></div>
          </div>

          <!-- 时间显示（可选） -->
          <div ref="elapsedTime" class="time-display">
            已播放：<span id="elapsedTime">00:00:00</span>
          </div>
        </div>
        <div style="border-radius: 5px; overflow: hidden;" v-else-if="liveType == 3">
          <video
            controls
            ref="liveReplay"
            loop
            autoplay
            width="100%"
            playsinline
            style="display: block; background: #000; height: 40vh;"
          >
            <source :src="videoUrl" type="video/mp4">
          </video>
        </div>
        <div style="border-radius: 5px; overflow: hidden;" v-else>
          <img :src="require('@/assets/image/videoNotStart.png')" style="width: 100%; height: 45vh;">
        </div>
      </div>
      <!-- 底部导航栏 -->
      <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">
        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickRed">
          <i class="el-icon-money" style="font-size: 20px;"></i>
          <span style="font-size: 12px; margin-top: 4px;">红包配置</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickLottery">
          <i class="el-icon-present" style="font-size: 20px;"></i>
          <span style="font-size: 12px; margin-top: 4px;">抽奖配置</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickGoods">
          <i class="el-icon-goods" style="font-size: 20px;"></i>
          <span style="font-size: 12px; margin-top: 4px;">商品</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickOrder">
          <i class="el-icon-goods" style="font-size: 20px;"></i>
          <span style="font-size: 12px; margin-top: 4px;">直播订单</span>
        </div>
      </div>
      <el-radio-group v-model="tableRadio" >
        <el-radio-button label="订单数">订单数</el-radio-button>
      </el-radio-group>
      <div  style="position: relative;width: 100%; height: 300px;">
        <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
        <div style="position: absolute; top: 10px; right: 10px; background: #fff; padding: 5px; z-index: 1;">
          <el-select v-model="searchQuery.timeOptions" placeholder="请选择" style="width: 150px"  @change="timeChange">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="searchQuery.timeGranularity" placeholder="请选择" style="width: 150px"  @change="timeGranularityChange">
            <el-option
              v-for="item in timeGranularity"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
<!--          <el-button type="primary" @click="applyFilter">搜索</el-button>-->
        </div>
      </div>
    </el-col>
    <!-- 直播/视频 end -->

    <!-- 用户列表 start -->
    <el-col class="live-console-col" :span="6">
      <el-tabs class="live-console-tab-right" v-model="tabLeft.activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane :label="onlineLabel" name="online">
          <el-scrollbar ref="manageLeftRef_online" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in onlineUserList">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                  <i class="el-icon-more" slot="reference"></i>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane :label="offlineLabel" name="offline">
          <el-scrollbar ref="manageLeftRef_offline" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in offlineUserList">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <i class="el-icon-more" slot="reference"></i>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane :label="silencedUserLabel" name="silenced">
          <el-scrollbar ref="manageLeftRef_silenced" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in silencedUserList">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                  <i class="el-icon-more" slot="reference"></i>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <!-- 用户列表 end -->
  </el-row>
  <!-- 直播中控台  end -->
</template>

<script>
import {blockUser, changeUserStatus, watchUserList} from '@/api/live/liveWatchUser'
import { getLiveVideoByLiveId } from '@/api/live/liveVideo'
import {getLivingUrl, getLive, delLive} from '@/api/live/live'
import { getLiveOrderTimeGranularity } from '@/api/live/liveOrder'
import { listLiveMsg } from '@/api/live/liveMsg'
import Hls from 'hls.js';
import {onBeforeUnmount} from 'vue';
import LiveLotteryConf from '@/views/live/liveConfig/liveLotteryConf.vue'
import LiveRedConf from '@/views/live/liveConfig/liveRedConf.vue'
import LiveGoods from '@/views/live/liveConfig/goods.vue'
import LiveOrder from '@/views/live/liveOrder/index.vue'
import echarts from 'echarts'


export default {
  name: "LiveConsole",
  components: { LiveLotteryConf,LiveRedConf,LiveGoods },
  data() {
    return {
      loading: true,
      tabLeft: {
        activeName: "online",
      },
      tabRight: {
        activeName: "talk",
      },
      livingUrl: "",
      videoUrl: "",
      status: 0,
      loadMsgMaxPage: 2,
      his: null,
      liveVideo: {},
      socket: null,
      liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
      userParams:{
        pageNum: 1,
        pageSize: 10,
        liveId: null
      },
      msgParams: {
        pageNum: 1,
        pageSize: 10,
        liveId: null
      },
      userList: [],
      msgList: [],
      newMsg: '',
      isAudit: false,
      myChart: null, // 用于存储 ECharts 实例
      liveType: 1,
      tableRadio: '订单数',
      // ... 其他数据 ...
      searchQuery: {timeOptions:'2',timeGranularity:'10',liveId: null}, // 搜索查询条件
      timeOptions: [
        {value:'2',label:'最近2小时',key:'2'},
        {value:'4',label:'最近4小时',key:'4'},
        {value:'all',label:'全场',key:'all'},
      ],
      timeGranularity: [
        {value:'10',label:'10分钟',key:'10'},
        {value:'30',label:'30分钟',key:'30'},
        {value:'60',label:'1小时',key:'60'},
      ],
      videoDuration: 0,
      startTime: null,
      processInterval: null,
      // ... 其他数据
      chatScrollTop: 0, // 保存聊天滚动位置,
      liveId: null,
    }
  },
  created() {
    if (this.$route.params.liveId) {
      this.liveId = this.$route.params.liveId;
    }else {
      this.liveId = this.$route.query.liveId;
    }
    // this.getLiveVideo()
    this.getList()
    this.connectWebSocket()
    this.getLive()
    console.log(this.liveId)
    this.searchQuery.liveId = this.liveId
  },
  computed: {
    userId() {
      return this.$store.state.user.user.userId
    },
    companyId() {
      return this.$store.state.user.user.companyId
    },
    onlineUserList() {
      return this.userList.filter(u => u.online === 0)
    },
    onlineLabel() {
      if (this.onlineUserList.length > 0) {
        return '在线(' + this.onlineUserList.length + ')'
      }
      return '在线'
    },
    offlineUserList() {
      return this.userList.filter(u => u.online === 1)
    },
    offlineLabel() {
      if (this.offlineUserList.length > 0) {
        return '离线(' + this.offlineUserList.length + ')'
      }
      return '离线'
    },
    silencedUserList() {
      return this.userList.filter(u => u.msgStatus === 1)
    },
    silencedUserLabel() {
      if (this.silencedUserList.length > 0) {
        return '禁言(' + this.silencedUserList.length + ')'
      }
      return '禁言'
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.restoreChatScrollPosition();
    });
    this.getEchartsTables();
    // 添加滚动事件监听器
    this.$nextTick(() => {
      if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
        this.$refs.manageRightRef.wrap.addEventListener('scroll', this.saveChatScrollPosition);
      }
    });
  },
  // 使用 deactivated 和 activated 钩子替代 beforeDestroy 和 destroyed
  deactivated() {
    this.saveChatScrollPosition();
  },
  activated() {
    this.$nextTick(() => {
      this.restoreChatScrollPosition();
    });
    this.$nextTick(() => {
      const video = this.$refs.videoPlayer;
      if (video != null) {
        video.play();
        this.initVideoPlayer(this.liveInfo.startTime)
      }
    })
  },
  methods: {
    // 保存聊天滚动位置
    saveChatScrollPosition() {
      if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
        this.chatScrollTop = this.$refs.manageRightRef.wrap.scrollHeight - this.$refs.manageRightRef.wrap.clientHeight;
      }
    },

    // 恢复聊天滚动位置
    restoreChatScrollPosition() {
      if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
        this.$refs.manageRightRef.wrap.scrollTop = this.chatScrollTop;
      }
    },
    getLive(){
      getLive(this.liveId).then(res => {
        if (res.code == 200) {
          if (res.data.isAudit != 1) {
            this.$message.error("当前直播间未经审核");
            this.loading = false
            return
          }
          this.isAudit = true
          this.status = res.data.status

          if(res.data.status == 4){
            this.liveType = 3
            this.videoUrl = res.data.videoUrl;
          }else {
            if (res.data.status != 2) {
              this.$message.error("当前直播间未直播");
              this.loading = false
              return
            }
            if (res.data.liveType == 1) {
              this.livingUrl = res.data.flvHlsUrl
              this.livingUrl = this.livingUrl.replace("flv","m3u8")
              this.$nextTick(() => {
                this.initPlayer()
              })
              this.startTime = new Date(res.data.startTime).getTime()
              this.processInterval = setInterval(this.updateLiveProgress, 1000);
            } else {
              console.log("getinfo")
              this.liveType = 2
              this.videoUrl = res.data.videoUrl;
              this.$nextTick(() => {
                const video = this.$refs.videoPlayer;
                video.play()
                this.initVideoPlayer(res.data.startTime)
              })
            }
          }
          this.loading = false
        } else {
          this.$message.error(res.msg)
          this.loading = false
        }
        this.liveInfo = res.data
      })
    },
    initVideoPlayer: function (startTime) {
      const video = this.$refs.videoPlayer;
      console.log(123)


      // 1. 初始化开播时间
      startTime = new Date(startTime).getTime();
      this.startTime = startTime;
      // 2. 监听视频元数据加载完成（获取视频时长）
      video.addEventListener('loadedmetadata', () => {
        this.videoDuration = video.duration; // 获取视频时长（秒）

        // 初始化视频播放位置
        this.updateVideoPosition(video);

        // 启动实时进度更新（每秒刷新一次）
        this.processInterval = setInterval(this.updateProgress, 1000);
      });

    },
    updateVideoPosition(video){
      const currentTime = new Date().getTime(); // 当前时间戳（毫秒）
      const elapsedTime = currentTime - this.startTime; // 已流逝时间（毫秒）

      if (elapsedTime < 0) {
        // 未开播：视频停在初始位置
        video.currentTime = 0;
        return;
      }

      // 已开播：计算视频循环后的位置（流逝时间 % 视频时长）
      const elapsedSeconds = elapsedTime / 1000; // 转换为秒
      const videoPosition = elapsedSeconds % this.videoDuration; // 视频内的播放位置（秒）

      // 设置视频播放位置
      video.currentTime = videoPosition;
    },
    updateProgress() {
      const progressBar = this.$refs.progressBar;
      const elapsedTimeEl = this.$refs.elapsedTime;
      if (!this.videoDuration) return; // 视频时长未加载时不更新

      const currentTime = new Date().getTime();
      const elapsedTime = currentTime - this.startTime; // 总流逝时间（毫秒）

      if (elapsedTime < 0) {
        // 未开播状态
        progressBar.style.width = '0%';
        elapsedTimeEl.textContent = '00:00:00';
        return;
      }

      // 计算进度百分比（基于视频循环）
      const elapsedSeconds = elapsedTime / 1000;
      const videoPosition = elapsedSeconds % this.videoDuration; // 当前在视频中的位置
      const progressPercent = (videoPosition / this.videoDuration) * 100; // 进度百分比

      // 更新进度条宽度
      progressBar.style.width = `${progressPercent}%`;

      // 格式化总流逝时间为“时:分:秒”并显示
      elapsedTimeEl.textContent = this.formatTime(elapsedTime);
    },
    updateLiveProgress() {
      const elapsedTimeEl = this.$refs.liveElapsedTime;

      const currentTime = new Date().getTime();
      const elapsedTime = currentTime - this.startTime; // 总流逝时间（毫秒）
      console.log(this.startTime)

      if (elapsedTime < 0) {
        elapsedTimeEl.textContent = '00:00:00';
        return;
      }


      // 格式化总流逝时间为“时:分:秒”并显示
      elapsedTimeEl.textContent = this.formatTime(elapsedTime);
    },
    formatTime(ms) {
      const totalSeconds = Math.floor(ms / 1000);
      const hours = Math.floor(totalSeconds / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      // 补零处理（确保两位数）
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    // ... 其他方法 ...
    timeChange(val) {
      this.searchQuery.timeOptions = val
      this.getEchartsTables(this.searchQuery)
      this.initChart()
    },
    timeGranularityChange(val) {
      this.searchQuery.timeGranularity =  val
      this.getEchartsTables()
      this.initChart()
    },
    getEchartsTables() {
      getLiveOrderTimeGranularity(this.searchQuery).then(res => {
        if (res.code == 200) {
          this.echartsXLine = res.hourlySlots
          this.echartsXValue = res.hourlySlotsValue
          this.initChart()
        }
      })
    },
    initChart() {
      const chartDom = this.$refs.chartContainer;
      this.myChart = echarts.init(chartDom);
      const option = {
        tooltip: {trigger: 'axis'},
        legend: {data: ['订单数']},
        xAxis: {type: 'category', boundaryGap: false, data: this.echartsXLine},
        yAxis: {type: 'value'},
        series: [
          {name: '订单数', type: 'line', data: this.echartsXValue}
        ],
      };
      this.myChart.setOption(option);
    },

    handleClickRed(){
      this.$router.push({
        name: 'LiveRedConf',
        query: {
          liveId: this.liveId
        }
      })
    },
    handleClickLottery(){
      this.$router.push({
        name: 'LiveLotteryConf',
        query: {
          liveId: this.liveId
        }
      })
    },
    handleClickGoods(){
      this.$router.push({
        name: 'LiveGoods',
        query: {
          liveId: this.liveId
        }
      })
    },
    handleClickOrder(){
      this.$router.push({
        name: 'LiveOrder',
        query: {
          liveId: this.liveId
        }
      })
    },
    initPlayer(){
      var isUrl = this.livingUrl === null || this.livingUrl.trim() === ''
      if (isUrl) {
        console.error('直播地址为空，无法初始化播放器')
        return
      }
      if (Hls.isSupported() && !isUrl) {
        const videoElement = this.$refs.livingPlayer
        if (!videoElement) {
          console.error('找不到 video 元素')
          return
        }
        this.hls = new Hls();
        this.hls.attachMedia(videoElement);
        this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
          this.hls.loadSource(this.livingUrl);
          this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
            videoElement.play();
          });
        });
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          console.error('HLS 错误:', data);
        });
      } else {
        console.error('浏览器不支持 HLS')
      }
    },
    handleClick(tab) {
    },
    getList() {
      this.resetParams()
      this.loadUserList()
      this.loadMsgList()
    },
    resetParams() {
      this.userList= []
      this.userParams = {
        pageNum: 1,
        pageSize: 10,
        liveId: this.liveId
      }
      this.msgList = []
      this.msgParams = {
        pageNum: 1,
        pageSize: 10,
        liveId: this.liveId
      }
    },
    loadUserList() {
      // 直播间用户
      watchUserList({
        liveId: this.liveId,
        pageNum: this.userParams.pageNum,
        pageSize: this.userParams.pageSize
      }).then(response => {
        let {code,rows,total} = response
        if (code === 200) {
          let totalPage = (total % this.userParams.pageSize == 0) ? Math.floor(total / this.userParams.pageSize) : Math.floor(total / this.userParams.pageSize + 1);
          rows.forEach(row => {
            if (!this.userList.some(u => u.userId === row.userId)) {
              this.userList.push(row)
            }
          })

          // 没加载完继续加载
          if (this.userParams.pageNum < totalPage) {
            this.userParams.pageNum = parseInt(this.userParams.pageNum) + 1;
            this.loadUserList()
          }
        }
      })
    },
    loadMsgList() {
      // 直播间消息
      listLiveMsg({
        liveId:this.liveId,
        pageNum: this.msgParams.pageNum,
        pageSize: this.msgParams.pageSize
      }).then(response => {
          let {code, rows,total} = response;
          if (code === 200) {
            let totalPage = (total % this.msgParams.pageSize == 0) ? Math.floor(total / this.msgParams.pageSize) : Math.floor(total / this.msgParams.pageSize + 1);
            rows.forEach(row => {
              if (!this.msgList.some(m => m.msgId === row.msgId)) {

                let user = this.userList.find(u => u.userId === row.userId)
                if (user) {
                  row.msgStatus = user.msgStatus
                } else {
                  row.msgStatus = 0
                }

                this.msgList.push(row)

                // 移动到底部
                this.$nextTick(() => {
                  setTimeout(() => {
                    this.$refs.manageRightRef.wrap.scrollTop = this.$refs.manageRightRef.wrap.scrollHeight - this.$refs.manageRightRef.wrap.clientHeight
                  }, 200)
                })
              }
            })

            // 没加载完继续加载
            if (this.msgParams.pageNum < this.loadMsgMaxPage) {
              this.msgParams.pageNum = parseInt(this.msgParams.pageNum) + 1;
              this.loadMsgList()
            }

            // 同步更新消息列表中相同用户的状态
            this.userList.forEach(u => {
              this.msgList.filter(m => m.userId === u.userId).forEach(m => m.msgStatus = u.msgStatus)
            })
          }
        })

      // 添加滚动监听
      this.$nextTick(() => {
        this.$refs.manageRightRef.wrap.addEventListener("scroll", this.manageRightScroll)
      })
    },
    manageRightScroll() {
      this.saveChatScrollPosition();
    },
    blockUser(u){
      console.log(u)
      this.$confirm('是否确认封禁用户账号为:"' + u.nickName + '-' + u.userId + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return blockUser(u.userId);
      }).then(() => {
        let msg = {
          msg: "",
          liveId: this.liveId,
          userId: u.userId,
          userType: 0,
          cmd: 'blockUser',
          avatar: this.$store.state.user.user.avatar,
          nickName: this.$store.state.user.user.nickName
        }
        console.log(msg)
        this.socket.send(JSON.stringify(msg))
        this.msgSuccess("封禁成功");
      }).catch(() => {});
    },
    changeUserState(u) {
      // 修改状态
      changeUserStatus({liveId: u.liveId, userId: u.userId}).then(response => {
        let { code } = response;
        if (200 === code) {
          u.msgStatus = u.msgStatus === 0 ? 1 : 0
          // 同步更新消息列表中相同用户的状态
          this.msgList.forEach(msg => {
            if (msg.userId === u.userId) {
              msg.msgStatus = u.msgStatus;
            }
          });

          this.userList.forEach(user => {
            if (user.userId === u.userId) {
              user.msgStatus = u.msgStatus;
            }
          });

          let msg = u.msgStatus === 0 ? "已解禁" : "已禁言"
          this.msgSuccess(msg);
          return
        }
        this.msgError("操作失败");
      })
    },
    connectWebSocket() {
      this.$store.dispatch('initLiveWs', {
        liveWsUrl: this.liveWsUrl,
        liveId: this.liveId,
        userId: this.userId
      })
      this.socket = this.$store.state.liveWs[this.liveId]
      this.socket.onmessage = (event) => this.handleWsMessage(event)
    },
    handleWsMessage(event) {
      let { code, data } = JSON.parse(event.data)
      if (code === 200) {
        let { cmd } = data
        if (cmd === 'sendMsg') {
          let message = JSON.parse(data.data)

          let user = this.userList.find(u => u.userId === message.userId)
          if (user) {
            message.msgStatus = user.msgStatus
          } else {
            message.msgStatus = 0
          }
          delete message.params
          this.msgList.push(message)
          // 移动到底部
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs.manageRightRef.wrap.scrollTop = this.$refs.manageRightRef.wrap.scrollHeight - this.$refs.manageRightRef.wrap.clientHeight
            }, 200)
          })
        } else if (cmd === 'entry' || cmd === 'out') {
          let user = data
          if(this.userList.length > 0){
            this.userList = this.userList.filter(u => u.userId !== user.userId)
          }
          let online = 0
          if (cmd === 'out') {
            online = 1
          }
          let info = {"avatar":user.avatar, "nickName":user.nickName,"liveId":this.liveId, "msgStatus":user.msgStatus,"online": online,"userId":user.userId};
          this.userList.push(info)
        } else if (cmd === 'live_start') {
          this.msgSuccess("直播开始了!");
        } else if (cmd === 'live_end') {
          this.msgError("直播已结束!");
        }
      }
    },
    sendMessage() {
      // 发送前简单校验
      if (this.newMsg.trim() === '') {
        return;
      }

      let msg = {
        msg: this.newMsg,
        liveId: this.liveId,
        userId: this.userId,
        userType: 1,
        cmd: 'sendMsg',
        avatar: this.$store.state.user.user.avatar,
        nickName: this.$store.state.user.user.nickName
      }

      this.socket.send(JSON.stringify(msg))

      this.newMsg = '';
    },
  },
  destroyed() {
    this.hls?.destroy();
    clearInterval(this.processInterval)
  }
}
</script>

<style scoped>
.talk-list{
  display: flex;
}
  .live-console {
    width: 90vw;
    padding: 10px 0;
    background-color: #f5f4f4;
  }
  .live-console .live-console-col {
    height: 88vh;
    margin-left: 5px;
    padding: 0 10px;
    background-color: white;
    border-radius: 4px;
  }
  /*隐藏水平滚动条*/
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /* 消息输入区域 */
  .chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ebeef5;
    background-color: #fff;
    min-height: 120px;
  }

  .chat-input .el-input {
    flex: 1;
    margin-right: 10px;
  }

  .chat-input .el-textarea__inner {
    resize: none;
    min-height: 100px;
  }
  ::v-deep .el-textarea__inner {
    border: none !important;
    box-shadow: none !important;
    resize: none !important;
  }
  ::v-deep .el-textarea__inner:focus {
    border: none !important;
    box-shadow: none !important;
  }
::v-deep .el-tabs__item {
  padding: 0;
}
.live-console-tab-left ::v-deep .el-tabs__active-bar {
  width: 41px!important;
  margin-left: calc((100% / 1 - 41px) / 2);
  height: 4px;
  border-radius: 4px;
}

/* calc 3是tab数量 */
.live-console-tab-right ::v-deep .el-tabs__active-bar {
  width: 51px!important;
  margin-left: calc((100% / 3 - 51px) / 2);
  height: 4px;
  border-radius: 4px;
}
.custom-video {
  pointer-events: none !important; /* 完全禁止鼠标交互，避免悬停时显示工具栏 */
  outline: none !important; /* 移除焦点轮廓 */
}
/* 额外的兼容性隐藏 */
.custom-video::-webkit-media-controls {
  display: none !important;
}

.custom-video::-webkit-media-controls-panel {
  display: none !important;
}
/* 进度条容器 */
.progress-container {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin: 10px 0;
  cursor: pointer;
}

/* 进度条填充部分 */
.progress-bar {
  height: 100%;
  background: #42b983;  /* Vue 绿色主题示例 */
  border-radius: 3px;
  width: 0%;  /* 初始进度为 0 */
}

/* 时间显示样式 */
.time-display {
  color: #ffffff;
  font-size: 14px;
}
</style>
