<template>
  <!-- 消息页面 -->
  <div class="message">
    <div style="height: 100%">
      <el-splitter>
        <el-splitter-panel size="17%" min="17%" max="25%">
          <!-- 会话列表 -->
          <div class="demo-panel">
            <div class="chatList" style="overflow: auto">
              <div
                class="chatItem"
                v-for="(item, index) in chatList"
                :key="index"
                @click="handleClick(item)"
                :style="{ background: handleClickdata == item ? '#f5f5f5' : '' }"
              >
                <el-badge
                  :value="item.unread > 0 ? item.unread : ''"
                  :max="999"
                  class="item"
                >
                  <div class="Avatar">
                    <img class="Avatar-img" :src="item.data.avatar" alt="" />
                  </div>
                </el-badge>
                <div class="chatContent">
                  <div class="PersonalInfo">
                    <div class="name">{{ item.data.nickname }}</div>
                    <div class="time">
                      {{ TimestamptolocalTime(item.lastMessage.timestamp) }}
                    </div>
                  </div>
                  <div class="chatText">{{ item.lastMessage.payload.text }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-splitter-panel>
        <el-splitter-panel>
          <el-splitter layout="vertical">
            <el-splitter-panel>
              <!-- 消息列表 -->
              <div class="demo-panel">
                <div
                  class="chatlist"
                  v-if="handleClickdata != null"
                  style="overflow: auto"
                  ref="chatlistContainer"
                >
                  <div
                    class="chatmessages"
                    v-for="(item, index) in messageslist"
                    :key="index"
                    id:item.messageId
                  >
                    <!-- 消息时间 -->
                    <div class="chatTime" v-if="timeDisplay(item.timestamp)">
                      {{ TimestamptolocalTime(item.timestamp) }}
                    </div>
                    <!-- 对方消息 -->
                    <div
                      class="messageOtherSide"
                      v-if="item.senderId == handleClickdata.userId"
                    >
                      <!-- 头像 -->
                      <div class="messageAvatar">
                        <img
                          class="Avatar-img"
                          :src="handleClickdata.data.avatar"
                          alt=""
                        />
                      </div>
                      <!-- 三角 -->
                      <div class="OtherTriangle" v-if="item.type == 'text'" />
                      <!-- 消息内容  -->
                      <div
                        class="messageContent"
                        :style="{
                          padding: item.type == 'text' ? ' 10px 20px 10px 20px' : '0',
                        }"
                      >
                        <!-- 文本消息 -->
                        <div v-if="item.type == 'text'">
                          {{ item.payload.text }}
                        </div>
                        <!-- 图片消息 -->
                        <PictureMessage
                          :item="item"
                          v-if="item.type == 'image'"
                        ></PictureMessage>
                      </div>

                      <!-- PK消息 -->
                      <div class="PKmessageMyContent" v-if="item.type == 'pk'">
                        <PKMessage :item="item" v-if="item.type == 'pk'"></PKMessage>
                      </div>
                    </div>
                    <!-- 自己消息 -->
                    <div class="messageMySide" v-if="item.senderId == user.id">
                      <!-- 消息内容  -->
                      <div
                        class="messageMyContent"
                        :style="{
                          padding: item.type == 'text' ? ' 10px 20px 10px 20px' : '',
                        }"
                        v-if="item.type != 'pk'"
                      >
                        <!-- 文本消息 -->
                        <div v-if="item.type == 'text'">
                          {{ item.payload.text }}
                        </div>
                        <!-- 图片消息 -->
                        <PictureMessage
                          :item="item"
                          v-if="item.type == 'image'"
                        ></PictureMessage>
                      </div>
                      <!-- PK消息 -->
                      <div class="PKmessageMyContent" v-if="item.type == 'pk'">
                        <PKMessage :item="item" v-if="item.type == 'pk'"></PKMessage>
                      </div>

                      <div class="MyTriangle" v-if="item.type == 'text'" />
                      <div class="messageAvatar">
                        <img class="Avatar-img" :src="headerIcon" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-splitter-panel>
            <el-splitter-panel size="20%" min="20%" max="40%">
              <!-- 输入框 -->
              <div class="demo-panel">
                <div class="inputBox" v-if="handleClickdata != null">
                  <div class="Console">
                    <!-- 控制面板 -->
                    <div class="Console-content">
                      <!-- 其他的消息 -->
                      <div class="chat-input-other">
                        <!-- 图片消息 -->
                        <div class="chat-input-img" @click="handleClickImg">
                          <img
                            class="chat-input-img-img"
                            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Album.png"
                            alt=""
                          />
                        </div>
                        <!-- 邀请消息 -->
                        <div class="chat-input-img" @click="handleClickinvite">
                          <img
                            class="chat-input-img-img"
                            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_invite.png"
                            alt=""
                          />
                        </div>
                      </div>

                      <!-- 发送按钮 -->
                      <div class="chat-input-Send" @click="sendMsg">发送</div>
                    </div>
                  </div>
                  <div class="input">
                    <textarea
                      v-model="textarea"
                      class="textarea"
                      style="width: 100%; height: 100%"
                      @keydown.enter.native="sendMsg"
                    />
                  </div>
                </div>
              </div>
            </el-splitter-panel>
          </el-splitter>
        </el-splitter-panel>
      </el-splitter>
    </div>
  </div>

  <el-dialog v-model="PKInvitationdialog" center title="PK邀请" width="800" align-center>
    <div class="PKcontent">
      <div class="infinite-list-item">
        <div
          class="infinite-card"
          @click="otherParticipates = true"
          v-if="hostOtherSide != null"
        >
          <!-- 头像 -->
          <div class="Avatars">
            <img
              style="width: 100%; height: 100%; border-radius: 500px"
              :src="hostOtherSide.anchorIcon"
              mode="scaleToFill"
            />
          </div>
          <div class="Information">
            <!-- 个人信息 -->
            <div class="Information-Personal">
              <div class="Information-name">
                {{ hostOtherSide.anchorId }}
              </div>
              <div
                class="Information-gender"
                :style="{
                  background: hostOtherSide.sex == 1 ? '#59D8DB' : '#F3876F',
                }"
              >
                {{ hostOtherSide.sex == 1 ? "男" : "女" }}
              </div>
              <div class="Information-Country">
                {{ hostOtherSide.country }}
              </div>
            </div>
            <!-- 时间 -->
            <div class="time">
              PK时间（本地时间）:{{ TimestamptolocalTime(hostOtherSide.pkTime * 1000) }}
            </div>
            <!--PK信息 -->
            <div class="Information-PK">
              <img
                class="goldimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                alt=""
              />
              <div class="gold">金币：{{ hostOtherSide.coin }}K</div>
              <img
                class="sessionimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                alt=""
              />
              <div class="Session">场次：{{ hostOtherSide.pkNumber }}场</div>
            </div>
            <!-- 备注信息 -->
            <div class="Information-Remarks">
              {{ hostOtherSide.remark }}
            </div>
          </div>
        </div>
        <div
          class="nodata"
          @click="otherParticipates = true"
          v-if="hostOtherSide == null"
        >
          选择对方的PK主播
        </div>
      </div>
      <!--  -->
      <div class="infinite-list-item">
        <div
          class="infinite-card"
          @click="myParticipates = true"
          v-if="hostmySide != null"
        >
          <!-- 头像 -->
          <div class="Avatars">
            <img
              style="width: 100%; height: 100%; border-radius: 500px"
              :src="hostmySide.anchorIcon"
              mode="scaleToFill"
            />
          </div>
          <div class="Information">
            <!-- 个人信息 -->
            <div class="Information-Personal">
              <div class="Information-name">
                {{ hostmySide.anchorId }}
              </div>
              <div
                class="Information-gender"
                :style="{
                  background: hostmySide.sex == 1 ? '#59D8DB' : '#F3876F',
                }"
              >
                {{ hostmySide.sex == 1 ? "男" : "女" }}
              </div>
              <div class="Information-Country">
                {{ hostmySide.country }}
              </div>
            </div>
            <!-- 时间 -->
            <div class="time">
              PK时间（本地时间）:{{ TimestamptolocalTime(hostmySide.pkTime * 1000) }}
            </div>
            <!--PK信息 -->
            <div class="Information-PK">
              <img
                class="goldimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                alt=""
              />
              <div class="gold">金币：{{ hostmySide.coin }}K</div>
              <img
                class="sessionimg"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                alt=""
              />
              <div class="Session">场次：{{ hostmySide.pkNumber }}场</div>
            </div>
            <!-- 备注信息 -->
            <div class="Information-Remarks">
              {{ hostmySide.remark }}
            </div>
          </div>
        </div>
        <div class="nodata" @click="myParticipates = true" v-if="hostmySide == null">
          选择自己的PK主播
        </div>
      </div>
      <!--  -->
      <div class="PKcontentbtn">
        <div class="myAnchorDialogReset" @click="reset">取消</div>
        <div class="myAnchorDialogConfirm" @click="PKInvitationdialogclick">确认</div>
      </div>
    </div>
  </el-dialog>

  <!-- 选择对方主播弹窗 -->
  <el-dialog
    v-model="otherParticipates"
    center
    title="选择对方参与PK的主播"
    width="800"
    align-center
  >
    <div class="myanchor-content">
      <div class="myanchor-list">
        <div class="infinite-list-item" v-for="(item, index) in getAnchorListdata">
          <div
            class="infinite-card"
            @click="selectOtherAnchor(item)"
            :style="{
              backgroundImage: item == hostOtherSidenotSure ? '' : '',
              background: item == hostOtherSidenotSure ? '#FFFBFA' : '',
              border: item == hostOtherSidenotSure ? '1px solid #F4D0C9' : '',
            }"
          >
            <!-- 头像 -->
            <div class="Avatars">
              <img
                style="width: 100%; height: 100%; border-radius: 500px"
                :src="item.anchorIcon"
                mode="scaleToFill"
              />
            </div>
            <div class="Information">
              <!-- 个人信息 -->
              <div class="Information-Personal">
                <div class="Information-name">
                  {{ item.anchorId }}
                </div>
                <div
                  class="Information-gender"
                  :style="{
                    background: item.sex == 1 ? '#59D8DB' : '#F3876F',
                  }"
                >
                  {{ item.sex == 1 ? "男" : "女" }}
                </div>
                <div class="Information-Country">
                  {{ item.country }}
                </div>
              </div>
              <!-- 时间 -->
              <div class="time">
                PK时间（本地时间）:{{ TimestamptolocalTime(item.pkTime * 1000) }}
              </div>
              <!--PK信息 -->
              <div class="Information-PK">
                <img
                  class="goldimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                  alt=""
                />
                <div class="gold">金币：{{ item.coin }}K</div>
                <img
                  class="sessionimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                  alt=""
                />
                <div class="Session">场次：{{ item.pkNumber }}场</div>
              </div>
              <!-- 备注信息 -->
              <div class="Information-Remarks">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="myanchor-dialog-btn">
        <div class="myAnchorDialogReset" @click="otherParticipates = false">取消</div>
        <div class="myAnchorDialogConfirm" @click="otherParticipatesDialogConfirm()">
          确认
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- 选择我的主播弹窗 -->
  <el-dialog
    v-model="myParticipates"
    center
    title="选择我方参与PK的主播"
    width="800"
    align-center
  >
    <div class="myanchor-content">
      <div class="myanchor-list">
        <div class="infinite-list-item" v-for="(item, index) in getMyAnchorListdata">
          <div
            class="infinite-card"
            @click="selectMyAnchor(item)"
            :style="{
              backgroundImage: item == hostmySidenotSure ? '' : '',
              background: item == hostmySidenotSure ? '#FFFBFA' : '',
              border: item == hostmySidenotSure ? '1px solid #F4D0C9' : '',
            }"
          >
            <!-- 头像 -->
            <div class="Avatars">
              <img
                style="width: 100%; height: 100%; border-radius: 500px"
                :src="item.anchorIcon"
                mode="scaleToFill"
              />
            </div>
            <div class="Information">
              <!-- 个人信息 -->
              <div class="Information-Personal">
                <div class="Information-name">
                  {{ item.anchorId }}
                </div>
                <div
                  class="Information-gender"
                  :style="{
                    background: item.sex == 1 ? '#59D8DB' : '#F3876F',
                  }"
                >
                  {{ item.sex == 1 ? "男" : "女" }}
                </div>
                <div class="Information-Country">
                  {{ item.country }}
                </div>
              </div>
              <!-- 时间 -->
              <div class="time">
                PK时间（本地时间）:{{ TimestamptolocalTime(item.pkTime * 1000) }}
              </div>
              <!--PK信息 -->
              <div class="Information-PK">
                <img
                  class="goldimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                  alt=""
                />
                <div class="gold">金币：{{ item.coin }}K</div>
                <img
                  class="sessionimg"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                  alt=""
                />
                <div class="Session">场次：{{ item.pkNumber }}场</div>
              </div>
              <!-- 备注信息 -->
              <div class="Information-Remarks">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="myanchor-dialog-btn">
        <div class="myAnchorDialogReset" @click="myParticipates = false">取消</div>
        <div class="myAnchorDialogConfirm" @click="myParticipatesDialogConfirm()">
          确认
        </div>
      </div>
    </div>
  </el-dialog>

  <el-dialog v-model="reminder" center title="提示" width="400" align-center>
    <div class="reminder-content">
      <div class="reminder-text">
        <div>
          您确定要发送PK邀请消息吗？邀请成功后的pk不可修改，不可删除，请谨慎操作！
        </div>
      </div>
      <div class="myanchor-dialog-btn">
        <div class="remindermyAnchorDialogReset" @click="reminder = false">取消</div>
        <div class="remindermyAnchorDialogConfirm" @click="reminderDialogConfirm()">
          确认
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
  nextTick, // 确保DOM更新完成
  onBeforeUnmount, // 组件销毁前执行
} from "vue";
import {
  goEasyGetConversations,
  goEasyGetMessages,
  goEasySendMessage,
  goEasySendImageMessage,
  goEasySendPKMessage,
  goEasyMessageRead,
} from "@/utils/goeasy.js";
import { TimestamptolocalTime } from "@/utils/timeConversion.js";
import { IMloginStore } from "@/stores/notice.js";
import { goeasy } from "../../main";
import GoEasy from "goeasy";
import { getPromiseStorage } from "@/utils/storage.js";
import { timeDisplay } from "@/utils/timeDisplay.js";
import PictureMessage from "@/components/chatMessage/PictureMessage";
import PKMessage from "@/components/chatMessage/PKMessage";
import { getAnchorListById, createPkRecord } from "@/api/account";
import { ElMessage } from "element-plus";

var im = goeasy.im;
const counter = IMloginStore();
const textarea = ref(""); // 输入框内容
const chatList = ref([]); // 会话列表
const handleClickdata = ref(null); // 选中会话
const messageslist = ref([]); //消息列表
const user = ref(null); // 用户信息
const headerIcon = ref(null); // 用户头像
const chatlistContainer = ref(null); // 聊天列表容器引用
const isLoading = ref(false); // 防止重复加载
const PKInvitationdialog = ref(false); // PK邀请弹窗
const hostOtherSide = ref(null); // 邀请对方的主播
const hostmySide = ref(null); // 邀请自己的主播
const otherParticipates = ref(false); // 选择对方参与PK的主播弹窗
const myParticipates = ref(false); // 选择我方参与PK的主播弹窗
const getAnchorListdata = ref(null); // 对方已发布的未被邀请的主播列表
const getMyAnchorListdata = ref(null); // 我方已发布的未被邀请的主播列表
const hostOtherSidenotSure = ref(null); // 邀请对方的主播未确定
const hostmySidenotSure = ref(null); // 邀请自己的主播未确定
const reminder = ref(false); // 提示弹窗
const isPage = ref(false); // 是否在页面

//确认对方参与PK的主播
function otherParticipatesDialogConfirm() {
  if (hostOtherSidenotSure.value) {
    hostOtherSide.value = hostOtherSidenotSure.value;
    otherParticipates.value = false;
  } else {
    ElMessage.error("请选择对方参与PK的主播");
  }
}
//确认我方参与PK的主播
function myParticipatesDialogConfirm() {
  if (hostmySidenotSure.value) {
    hostmySide.value = hostmySidenotSure.value;
    myParticipates.value = false;
  } else {
    ElMessage.error("请选择我方参与PK的主播");
  }
}

// 选择对方主播
function selectOtherAnchor(item) {
  hostOtherSidenotSure.value = item;
}

// 选择自己的主播
function selectMyAnchor(item) {
  hostmySidenotSure.value = item;
}

//查询对方已发布的未被邀请的主播列表
function getAnchorList() {
  getAnchorListById({
    userId: handleClickdata.value.userId,
  }).then((res) => {
    getAnchorListdata.value = res;
  });
}
//查询我方已发布的未被邀请的主播列表
function getMyAnchorList() {
  getAnchorListById({
    userId: user.value.id,
  }).then((res) => {
    getMyAnchorListdata.value = res;
  });
}

//确认邀请
function reminderDialogConfirm() {
  createPkRecord({
    pkIdA: hostOtherSide.value.id,
    pkIdB: hostmySide.value.id,
    userIdA: handleClickdata.value.userId,
    userIdB: user.value.id,
    pkTime: hostOtherSide.value.pkTime,
    pkNumber: hostOtherSide.value.pkNumber,
    anchorIdA: hostOtherSide.value.anchorId,
    anchorIdB: hostmySide.value.anchorId,
    anchorIconA: hostOtherSide.value.anchorIcon,
    anchorIconB: hostmySide.value.anchorIcon,
    piIdA: hostOtherSide.value.id,
    piIdB: hostmySide.value.id,
  }).then((res) => {
    const data = {
      msgid: res.id,
      pkIdA: hostOtherSide.value.id,
      pkIdB: hostmySide.value.id,
      id: handleClickdata.value.userId,
      avatar: handleClickdata.value.data.avatar,
      nickname: handleClickdata.value.data.nickname,
    };
    goEasySendPKMessage(data).then((res) => {
      console.log(res);
      messageslist.value.push(res);
      reminder.value = false;
      reset();
      nextTick(() => {
        if (chatlistContainer.value) {
          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
        }
      });
    });
  });
}
// PK邀请弹窗
function PKInvitationdialogclick() {
  if (hostOtherSide.value && hostmySide.value) {
    reminder.value = true;
  } else {
    ElMessage.error("请选择对方和自己的主播");
    return;
  }
}
//取消PK邀请弹窗
function reset() {
  PKInvitationdialog.value = false;
  hostOtherSidenotSure.value = null;
  hostmySidenotSure.value = null;
  hostOtherSide.value = null;
  hostmySide.value = null;
}
// 邀请消息
const handleClickinvite = () => {
  getAnchorList();
  getMyAnchorList();
  PKInvitationdialog.value = true;
};

// 图片消息
const fileInput = ref(null);

const handleClickImg = () => {
  if (!fileInput.value) {
    fileInput.value = document.createElement("input");
    fileInput.value.type = "file";
    fileInput.value.accept = "image/*";
    fileInput.value.style.display = "none";
    fileInput.value.addEventListener("change", handleFileSelect);
    document.body.appendChild(fileInput.value);
  }
  fileInput.value.click();
};

const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (file) {
    goEasySendImageMessage({
      imagefile: file,
      id: handleClickdata.value.userId,
      avatar: handleClickdata.value.data.avatar,
      nickname: handleClickdata.value.data.nickname,
    }).then((res) => {
      messageslist.value.push(res);
      nextTick(() => {
        if (chatlistContainer.value) {
          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
        }
      });
    });
  }
};

// 发送消息
function sendMsg() {
  if (textarea.value.trim() === "") {
    return;
  }
  goEasySendMessage({
    text: textarea.value,
    id: handleClickdata.value.userId,
    avatar: handleClickdata.value.data.avatar,
    nickname: handleClickdata.value.data.nickname,
  }).then((res) => {
    messageslist.value.push(res);
    textarea.value = "";
    nextTick(() => {
    if (chatlistContainer.value) {
      chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
    }
  });
  });
}

// 加载更多消息
function loadMore() {
  if (isLoading.value) return;
  isLoading.value = true;
  // 这里添加加载更多消息逻辑/加载完后才改为false
  getMoreMessages();
}

// 滚动事件处理
function scrollHandler() {
  const container = chatlistContainer.value;
  if (container && container.scrollTop <= 0) {
    loadMore();
  }
}

//选中会话
function handleClick(item) {
  handleClickdata.value = item;
  isPage.value = true;
  goEasyGetMessages({
    id: item.userId,
    timestamp: null,
  }).then((res) => {
    console.log("消息列表", res);
    messageslist.value = res;
    nextTick(() => {
      if (chatlistContainer.value) {
        chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
      }
    });
    chatlistContainer.value.addEventListener("scroll", scrollHandler);
  });
  messageRead();
}
//已读消息
function messageRead() {
  goEasyMessageRead({
    id: handleClickdata.value.userId,
  }).then((res) => {});
}

//获取更多消息
function getMoreMessages() {
  if (messageslist.value.length == 0) {
    return;
  }
  // 记录当前第一条消息的ID和滚动位置
  const firstMessageId = messageslist.value[0].messageId;
  const currentScrollPosition = chatlistContainer.value.scrollTop;
  const container = chatlistContainer.value;
  const initialHeight = container.scrollHeight;

  isLoading.value = true;
  goEasyGetMessages({
    id: handleClickdata.value.userId,
    timestamp: messageslist.value[0].timestamp,
  })
    .then((res) => {
      isLoading.value = false;
      // 添加新消息到列表开头
      messageslist.value.unshift(...res);

      nextTick(() => {
        // 计算新增内容的高度
        const heightAdded = container.scrollHeight - initialHeight;
        // 设置新的滚动位置 = 原位置 + 新增高度
        container.scrollTop = currentScrollPosition + heightAdded;

        // 可选：滚动到之前的第一条消息
        const targetElement = document.getElementById(firstMessageId);
        if (targetElement) {
          targetElement.scrollIntoView();
        }
      });
    })
    .catch(() => {
      isLoading.value = false;
    });
}

//更新后的最新会话列表
function onConversationsUpdated(conversations) {
  chatList.value = conversations.conversations;
}
//私聊消息接收
function onPrivateMessageReceived(message) {
  messageslist.value.push(message);
  if (isPage.value) {
    messageRead();
  }

 nextTick(() => {
    if (chatlistContainer.value) {
      // 只有当用户已经滚动到底部或接近底部时才自动滚动
      const container = chatlistContainer.value;
      const threshold = 500; // 距离底部100px以内算作"接近底部"
      const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
      
      if (isNearBottom) {
        container.scrollTop = container.scrollHeight;
      }
    }
  });
  
}
//获取会话列表
function getChatList() {
  goEasyGetConversations().then((res) => {
    chatList.value = res.content.conversations;
  });
}
watch(counter, (newQuestion, oldQuestion) => {
  setTimeout(() => {
    getChatList();
  }, 300);
}),
  { deep: true };
onMounted(() => {
  getPromiseStorage("user")
    .then((res) => {
      user.value = res;
      headerIcon.value = user.value.headerIcon;
      console.log(user.value);
    })
    .catch((err) => {
      console.log(err);
    });

  if (counter.IMstate == true) {
    getChatList();
  }

  setTimeout(() => {
    im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated);
    im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onPrivateMessageReceived);
  }, 1000);
});
onUpdated(() => {
  // 组件更新后执行
});
onBeforeUnmount(() => {
  // 组件销毁前执行
  isPage.value = false;
  im.off(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onPrivateMessageReceived);
  im.off(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated);
});
onUnmounted(() => {
  // 移除滚动事件监听
  if (chatlistContainer.value) {
    chatlistContainer.value.removeEventListener("scroll", scrollHandler);
  }
});
</script>

<style scoped lang="less">
.message {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: #ffffff;
}
.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.chatList {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.chatItem {
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.chatItem:hover {
  background-color: #f5f5f5;
}
.Avatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-left: 10px;
  background-color: #f5f5f5;
}
.Avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.chatContent {
  margin-left: 30px;
  width: calc(100% - 100px);
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.PersonalInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.name {
  width: 50%;
  font-size: 14px;
  color: @font-color;
  font-weight: bold;
  white-space: nowrap; /* 单行显示 */
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}
.chatText {
  font-size: 10px;
  color: @font-color;
  width: 100%;
  white-space: nowrap; /* 单行显示 */
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}
.chatlist {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chatmessages {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.chatTime {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 20px;
  font-size: 16px;
  color: #999999;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.messageOtherSide {
  width: 100%;
  height: auto;
  display: flex;
  align-items: self-start;
}
.messageMySide {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: end;
  align-items: self-start;
}
.messageAvatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-right: 20px;
  margin-left: 20px;
  background-color: #f5f5f5;
}
.OtherTriangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #f5f5f5;
  border-bottom: 10px solid transparent;
  margin-top: 12px;
}
.MyTriangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid #7bbd0093;
  border-bottom: 10px solid transparent;
  margin-top: 12px;
}
.messageContent {
  max-width: 30%;
  height: auto;
  min-height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  font-size: 20px;
  word-break: break-all; /* 强制换行（适合中文） */
  overflow-wrap: break-word; /* 长单词换行（适合英文） */
  white-space: normal; /* 允许自动换行 */
}
.PKmessageMyContent {
  max-width: 100%;
  height: auto;
  min-height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  font-size: 20px;
  word-break: break-all; /* 强制换行（适合中文） */
  overflow-wrap: break-word; /* 长单词换行（适合英文） */
  white-space: normal; /* 允许自动换行 */
  margin-bottom: 20px;
  margin-top: 20px;
}
.messageMyContent {
  max-width: 30%;
  height: auto;
  min-height: 20px;
  background-color: #7bbd0093;
  border-radius: 10px;
  font-size: 20px;
  word-break: break-all; /* 强制换行（适合中文） */
  overflow-wrap: break-word; /* 长单词换行（适合英文） */
  white-space: normal; /* 允许自动换行 */
}
.inputBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Console {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Console-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #e4f9f9;
}
.chat-input-other {
  display: flex;
  align-items: center;
}
.chat-input-img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
  border: 1px solid #03aba800;
}
.chat-input-img:hover {
  background-color: #ffffff;
  border: 1px solid #03aba82f;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.chat-input-img:active{
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.chat-input-img-img {
  width: 30px;
  height: 30px;
}
.chat-input-Send {
  width: 10%;
  height: 80%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #03aba8;
  border-radius: 10px;
  margin-right: 6px;
  transition: all 0.4s ease;
}
.chat-input-Send:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  background-color: #03aba82d;
  // color: #ffffff;
}
.chat-input-Send:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.input {
  width: 98%;
  height: calc(100% - 70px);
}
.textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  overflow: hidden;
  background-color: #ffffff00;
  resize: none;
}
.PKcontent {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  background-image: linear-gradient(180deg, #e4ffff, #ffffff);
  border: 1px solid #03aba8;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.PKcontentbtn {
  margin-top: 50px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.myAnchorDialogReset {
  width: 300px;
  height: 50px;
  margin-top: 30px;
  text-align: center;
  line-height: 50px;
  background: linear-gradient(0deg, #e4ffff, #ffffff);
  color: #03aba8;
  font-size: 20px;
  transition: all 0.4s ease;
  border-radius: 100px;
  border: 1px solid #4fcacd;
}
.myAnchorDialogReset:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.myAnchorDialogReset:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.remindermyAnchorDialogReset {
  width: 150px;
  height: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #e4ffff, #ffffff);
  color: #03aba8;
  font-size: 18px;
  transition: all 0.4s ease;
  border-radius: 100px;
  border: 1px solid #4fcacd;
}
.remindermyAnchorDialogReset:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.remindermyAnchorDialogReset:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.myAnchorDialogConfirm {
  width: 300px;
  height: 50px;
  margin-top: 30px;
  text-align: center;
  line-height: 50px;
  background: linear-gradient(0deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-size: 20px;
  transition: all 0.4s ease;
  border-radius: 100px;
}

.myAnchorDialogConfirm:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.myAnchorDialogConfirm:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.remindermyAnchorDialogConfirm {
  width: 150px;
  height: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-size: 18px;
  transition: all 0.4s ease;
  border-radius: 100px;
}
.remindermyAnchorDialogConfirm:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.remindermyAnchorDialogConfirm:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
// ··················
.infinite-list-item {
  width: 100%;
  height: 170px;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infinite-card {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
  border-radius: 11px;
  background-image: url(../../assets/PKbackground.png);
  background-size: 100% 100%;
  transition: all 0.4s ease;
  border-radius: 10px;
}
.infinite-card:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  opacity: 0.8;
}
.infinite-card:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.Avatars {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ececec;
  margin-left: 30px;
}
.Information {
  width: calc(100% - 160px);
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.Information-Personal {
  display: flex;
  align-items: center;
}
.Information-name {
  width: auto;
  font-size: 20px;
  font-weight: bold;
  color: @font-color;
}
.Information-gender {
  width: 50px;
  height: 20px;
  background-color: #e9e7e7;
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  margin-left: 20px;
}
.Information-Country {
  width: auto;
  height: 20px;
  background-color: #e4f9f9;
  border-radius: 10px;
  color: #03aba8;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 20px;
}
.time {
  font-size: 12px;
  color: @Prompt-text-color;
}
.Information-PK {
  display: flex;
  align-items: center;
}
.goldimg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.gold {
  font-size: 16px;
  color: @font-color;
}
.sessionimg {
  width: 20px;
  height: 20px;
  margin-left: 50px;
  margin-right: 10px;
}
.Session {
  font-size: 16px;
  color: @font-color;
}
.Information-Remarks {
  font-size: 14px;
  color: @Prompt-text-color;
}
.nodata {
  width: 90%;
  height: 170px;
  text-align: center;
  font-size: 20px;
  color: #999999;
  line-height: 170px;
  background-image: url(../../assets/PKbackground.png);
  border-radius: 10px;
  background-size: 100% 100%;
  transition: all 0.4s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.nodata:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  opacity: 0.8;
}
.nodata:active {
  transition: all 0.05s ease;
  transform: scale(0.95) !important;
}
.myanchor-content {
  width: 100%;
  height: 600px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.myanchor-list {
  width: 100%;
  height: 500px;
  background-color: #e0f4f1;
  border-radius: 16px;
  border: 1px solid #4fcacd;
  overflow: auto;
}
.myanchor-dialog-btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.reminder-content {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reminder-text {
  width: 90%;
  height: 200px;
  font-size: 18px;
  color: #03aba8;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style>
.el-splitter-bar__disable:before {
  background-color: #ffffff00 !important;
}
</style>