im-backed/im-web/src/components/chat/ChatBox.vue

<template>
  <div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()">
    <el-container>
      <el-header height="50px">
        <span>{{ title }}</span>
        <span
          title="群聊信息"
          v-show="isGroup"
          class="btn-side el-icon-more"
          @click="showSide = !showSide"
        ></span>
        <span
          title="用户信息"
          v-show="isPrivate"
          class="btn-side el-icon-more"
          @click="showUserSide = !showUserSide"
        ></span>
      </el-header>
      <el-main style="padding: 0">
        <el-container>
          <el-container class="content-box">
            <el-main class="im-chat-main" id="chatScrollBox" @scroll="onScroll">
              <div class="im-chat-box">
                <div
                  v-for="(msgInfo, idx) in showMessages"
                  :key="showMinIdx + idx"
                >
                  <chat-message-item
                    @call="onCall(msgInfo.type)"
                    :mine="msgInfo.sendId == mine.id"
                    :headImage="headImage(msgInfo)"
                    :showName="showName(msgInfo)"
                    :msgInfo="msgInfo"
                    :groupMembers="groupMembers"
                    @resend="onResendMessage"
                    @delete="deleteMessage"
                    @recall="recallMessage"
                  >
                  </chat-message-item>
                </div>
              </div>
            </el-main>
            <div
              v-if="!isInBottom"
              class="scroll-to-bottom"
              @click="scrollToBottom"
            >
              {{
                newMessageSize > 0 ? newMessageSize + "条新消息" : "回到底部"
              }}
            </div>
            <el-footer height="220px" class="im-chat-footer">
              <div class="chat-tool-bar">
                <div
                  title="表情"
                  class="icon iconfont icon-emoji"
                  ref="emotion"
                  @click.stop="showEmotionBox()"
                ></div>
                <div title="发送图片">
                  <file-upload
                    :action="'/image/upload'"
                    :maxSize="5 * 1024 * 1024"
                    :fileTypes="[
                      'image/jpeg',
                      'image/png',
                      'image/jpg',
                      'image/webp',
                      'image/gif',
                    ]"
                    @before="onImageBefore"
                    @success="onImageSuccess"
                    @fail="onImageFail"
                  >
                    <i class="el-icon-picture-outline"></i>
                  </file-upload>
                </div>
                <div
                  title="快捷回复"
                  class="el-icon-s-comment"
                  @click.stop="openQuickReplyBox()"
                ></div>
                <div
                  title="回执消息"
                  v-show="isGroup && memberSize <= 500"
                  class="icon iconfont icon-receipt"
                  :class="isReceipt ? 'chat-tool-active' : ''"
                  @click="onSwitchReceipt"
                ></div>
                <div
                  title="聊天记录"
                  class="el-icon-chat-dot-round"
                  @click="showHistoryBox()"
                ></div>
                <div
                  title="转接客服"
                  class="el-icon-service"
                  @click="showChangeCustomerBox()"
                  v-if="isPrivate"
                ></div>
              </div>
              <div class="send-content-area">
                <ChatInput
                  :ownerId="group.ownerId"
                  ref="chatInputEditor"
                  :group-members="groupMembers"
                  @submit="sendMessage"
                />
                <div class="send-btn-area">
                  <el-button
                    type="primary"
                    icon="el-icon-s-promotion"
                    @click="notifySend()"
                    >发送</el-button
                  >
                </div>
              </div>
            </el-footer>
          </el-container>
          <el-aside class="side-box" width="320px" v-if="showSide">
            <chat-group-side
              :group="group"
              :groupMembers="groupMembers"
              @reload="loadGroup(group.id)"
            >
            </chat-group-side>
          </el-aside>
          <el-aside
            class="side-box user-info-side"
            width="320px"
            v-if="showUserSide"
          >
            <div class="user-info-container">
              <!-- <div class="user-info-header"> -->
              <!-- <img :src="userInfo.headImage || userInfo.headImageThumb" class="user-avatar-large" /> -->
              <!-- <h3 class="user-nickname">{{ userInfo.nickName }}</h3>
								<p class="user-username">@{{ userInfo.userName }}</p> -->
              <!-- </div> -->
              <div class="user-info-content">
                <div class="info-item">
                  <div class="info-label">用户IP</div>
                  <div class="info-value">
                    {{ formatIpDisplay(userInfo.lastLoginIp, ipLocation) }}
                  </div>
                </div>
                <div class="info-item">
                  <div class="info-label">来源地址</div>
                  <div class="info-value">{{ userInfo.platformName }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">标签</div>
                  <div class="info-value">
                    <el-select
                      v-model="selectedLabels"
                      size="small"
                      multiple
                      filterable
                      placeholder="请选择标签"
                      :loading="labelOptionsLoading"
                      @change="handleSelectLabels"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in availableLabelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="String(item.value)"
                        :disabled="selectedLabels.includes(String(item.value))"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="info-item">
                  <div class="info-label">分组</div>
                  <div class="info-value">
                    <el-select
                      v-model="selectedGroup"
                      size="small"
                      clearable
                      style="width: 120px"
                      @change="handleSelectUserGroup"
                    >
                      <el-option
                        v-for="item in groupOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </el-aside>
        </el-container>
      </el-main>

      <emotion ref="emoBox" @emotion="onEmotion"></emotion>
      <chat-record
        :visible="showRecord"
        @close="closeRecordBox"
        @send="onSendRecord"
      ></chat-record>
      <group-member-selector
        ref="rtcSel"
        :group="group"
        @complete="onInviteOk"
      ></group-member-selector>
      <rtc-group-join ref="rtcJoin" :groupId="group.id"></rtc-group-join>
      <chat-history
        :visible="showHistory"
        :chat="chat"
        :friend="friend"
        :group="group"
        :groupMembers="groupMembers"
        @close="closeHistoryBox"
      ></chat-history>
      <change-customer
        :visible="showChangeCustomer"
        :target-user-id="targetUserId"
        @close="closeChangeCustomerBox"
        @transfer-success="onTransferSuccess"
      ></change-customer>

      <!-- 快捷回复弹窗 -->
      <el-dialog
        title="快捷回复"
        :visible.sync="showQuickReplyBox"
        width="500px"
        append-to-body
        @close="closeQuickReplyBox"
      >
        <el-scrollbar height="300px">
          <div class="quick-reply-list">
            <div
              class="quick-item"
              v-for="item in quickReplyList"
              :key="item.id"
              @click="selectQuickReply(item)"
            >
              {{ item.replyName }}
            </div>
            <div
              class="quick-empty"
              v-if="quickReplyList.length === 0 && !quickLoading"
            >
              暂无快捷回复
            </div>
          </div>
        </el-scrollbar>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showQuickReplyBox = false">关闭</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import ChatGroupSide from "./ChatGroupSide.vue";
import ChatMessageItem from "./ChatMessageItem.vue";
import FileUpload from "../common/FileUpload.vue";
import Emotion from "../common/Emotion.vue";
import ChatRecord from "./ChatRecord.vue";
import ChatHistory from "./ChatHistory.vue";
import ChatAtBox from "./ChatAtBox.vue";
import GroupMemberSelector from "../group/GroupMemberSelector.vue";
import RtcGroupJoin from "../rtc/RtcGroupJoin.vue";
import ChatInput from "./ChatInput";
import ChangeCustomer from "./ChangeCustomer.vue";

export default {
  name: "chatPrivate",
  components: {
    ChatInput,
    ChatMessageItem,
    FileUpload,
    ChatGroupSide,
    Emotion,
    ChatRecord,
    ChatHistory,
    ChatAtBox,
    GroupMemberSelector,
    RtcGroupJoin,
    ChangeCustomer,
  },
  props: {
    chat: {
      type: Object,
    },
  },
  data() {
    return {
      userInfo: {},
      group: {},
      groupMembers: [],
      groupOptions: [],
      groupOptionsLoading: false,
      selectedGroup: "",
      labelOptions: [],
      labelOptionsLoading: false,
      selectedLabels: [],
      sendImageUrl: "",
      sendImageFile: "",
      placeholder: "",
      isReceipt: true,
      showRecord: false,
      showSide: false,
      showUserSide: true,
      showHistory: false,
      showChangeCustomer: false,
      showQuickReplyBox: false, // 快捷回复弹窗
      quickReplyList: [], // 快捷回复列表
      quickLoading: false, // 加载状态
      lockMessage: false,
      showMinIdx: 0,
      reqQueue: [],
      isSending: false,
      isInBottom: false,
      newMessageSize: 0,
      ipLocation: "",
      maxTmpId: 0,
    };
  },
  methods: {
    moveChatToTop() {
      let chatIdx = this.chatStore.findChatIdx(this.chat);
      this.chatStore.moveTop(chatIdx);
    },
    closeRefBox() {
      this.$refs.emoBox.close();
    },
    onCall(type) {
      if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
        this.showPrivateVideo("voice");
      } else if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VIDEO) {
        this.showPrivateVideo("video");
      }
    },
    onSwitchReceipt() {
      this.isReceipt = !this.isReceipt;
      this.refreshPlaceHolder();
    },
    onImageSuccess(data, file) {
      let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
      msgInfo.content = JSON.stringify(data);
      msgInfo.receipt = this.isReceipt;
      this.sendMessageRequest(msgInfo)
        .then((m) => {
          msgInfo.id = m.id;
          msgInfo.status = m.status;
          this.isReceipt = false;
          this.chatStore.updateMessage(msgInfo, file.chat);
        })
        .catch(() => {
          msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
          this.chatStore.updateMessage(msgInfo, file.chat);
        });
    },
    onImageFail(e, file) {
      let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
      msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
      this.chatStore.updateMessage(msgInfo, file.chat);
    },
    onImageBefore(file) {
      if (this.isBanned) {
        this.showBannedTip();
        return;
      }
      let url = URL.createObjectURL(file);
      let data = {
        originUrl: url,
        thumbUrl: url,
      };
      let msgInfo = {
        tmpId: this.generateId(),
        fileId: file.uid,
        sendId: this.mine.id,
        content: JSON.stringify(data),
        sendTime: new Date().getTime(),
        selfSend: true,
        type: this.$enums.MESSAGE_TYPE.IMAGE,
        readedCount: 0,
        status: this.$enums.MESSAGE_STATUS.SENDING,
      };
      this.fillTargetId(msgInfo, this.chat.targetId);
      this.chatStore.insertMessage(msgInfo, this.chat);
      this.moveChatToTop();
      file.msgInfo = msgInfo;
      file.chat = this.chat;
      let chat = this.chat;
      this.getImageSize(file).then((size) => {
        data.width = size.width;
        data.height = size.height;
        msgInfo.content = JSON.stringify(data);
        this.chatStore.updateMessage(msgInfo, chat);
        this.scrollToBottom();
      });
    },
    onFileSuccess(url, file) {
      let data = {
        name: file.name,
        size: file.size,
        url: url,
      };
      let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
      msgInfo.content = JSON.stringify(data);
      msgInfo.receipt = this.isReceipt;
      this.sendMessageRequest(msgInfo)
        .then((m) => {
          msgInfo.id = m.id;
          msgInfo.status = m.status;
          this.isReceipt = false;
          this.refreshPlaceHolder();
          this.chatStore.updateMessage(msgInfo, file.chat);
        })
        .catch(() => {
          msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
          this.chatStore.updateMessage(msgInfo, file.chat);
        });
    },
    onFileFail(e, file) {
      let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
      msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
      this.chatStore.updateMessage(msgInfo, file.chat);
    },
    onFileBefore(file) {
      if (this.isBanned) {
        this.showBannedTip();
        return;
      }
      let url = URL.createObjectURL(file);
      let data = {
        name: file.name,
        size: file.size,
        url: url,
      };
      let msgInfo = {
        tmpId: this.generateId(),
        sendId: this.mine.id,
        content: JSON.stringify(data),
        sendTime: new Date().getTime(),
        selfSend: true,
        type: this.$enums.MESSAGE_TYPE.FILE,
        readedCount: 0,
        status: this.$enums.MESSAGE_STATUS.SENDING,
      };
      this.fillTargetId(msgInfo, this.chat.targetId);
      this.chatStore.insertMessage(msgInfo, this.chat);
      this.moveChatToTop();
      file.msgInfo = msgInfo;
      file.chat = this.chat;
    },
    onCloseSide() {
      this.showSide = false;
      this.showUserSide = false;
    },
    onScrollToTop() {
      this.showMinIdx = this.showMinIdx > 10 ? this.showMinIdx - 10 : 0;
    },
    onScroll(e) {
      let scrollElement = e.target;
      let scrollTop = scrollElement.scrollTop;
      if (scrollTop < 30) {
        this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
        this.isInBottom = false;
      }
      if (
        scrollTop + scrollElement.clientHeight >=
        scrollElement.scrollHeight - 30
      ) {
        this.isInBottom = true;
        this.newMessageSize = 0;
      }
    },
    showEmotionBox() {
      let width = this.$refs.emotion.offsetWidth;
      let left = this.$elm.fixLeft(this.$refs.emotion);
      let top = this.$elm.fixTop(this.$refs.emotion);
      this.$refs.emoBox.open({
        x: left + width / 2,
        y: top,
      });
    },
    onEmotion(emoText) {
      this.$refs.chatInputEditor.insertEmoji(emoText);
    },
    showRecordBox() {
      this.showRecord = true;
    },
    closeRecordBox() {
      this.showRecord = false;
    },
    showPrivateVideo(mode) {
      if (this.isBanned) {
        this.showBannedTip();
        return;
      }
      let rtcInfo = {
        mode: mode,
        isHost: true,
        friend: this.friend,
      };
      this.$eventBus.$emit("openPrivateVideo", rtcInfo);
    },
    onGroupVideo() {
      if (this.isBanned) {
        this.showBannedTip();
        return;
      }
      let ids = [this.mine.id];
      let maxChannel = this.configStore.webrtc.maxChannel;
      this.$refs.rtcSel.open(maxChannel, ids, ids, []);
    },
    onInviteOk(members) {
      if (members.length < 2) {
        return;
      }
      let userInfos = [];
      members.forEach((m) => {
        userInfos.push({
          id: m.userId,
          nickName: m.showNickName,
          headImage: m.headImage,
          isCamera: false,
          isMicroPhone: true,
        });
      });
      let rtcInfo = {
        isHost: true,
        groupId: this.group.id,
        inviterId: this.mine.id,
        userInfos: userInfos,
      };
      this.$eventBus.$emit("openGroupVideo", rtcInfo);
    },
    showHistoryBox() {
      this.showHistory = true;
    },
    closeHistoryBox() {
      this.showHistory = false;
    },
    onSendRecord(data) {
      if (this.isBanned) {
        this.showBannedTip();
        return;
      }
      let msgInfo = {
        tmpId: this.generateId(),
        content: JSON.stringify(data),
        type: this.$enums.MESSAGE_TYPE.AUDIO,
        receipt: this.isReceipt,
      };
      this.fillTargetId(msgInfo, this.chat.targetId);
      const chat = this.chat;
      let tmpMessage = this.buildTmpMessage(msgInfo);
      this.chatStore.insertMessage(tmpMessage, chat);
      this.moveChatToTop();
      this.sendMessageRequest(msgInfo)
        .then((m) => {
          tmpMessage.id = m.id;
          tmpMessage.status = m.status;
          this.chatStore.updateMessage(tmpMessage, chat);
          this.moveChatToTop();
          this.$refs.chatInputEditor.focus();
          this.scrollToBottom();
          this.showRecord = false;
          this.isReceipt = false;
          this.refreshPlaceHolder();
        })
        .catch(() => {
          tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
          this.chatStore.updateMessage(tmpMessage, this.chat);
        });
    },
    fillTargetId(msgInfo, targetId) {
      if (this.chat.type == "GROUP") {
        msgInfo.groupId = targetId;
      } else {
        msgInfo.recvId = targetId;
      }
    },
    notifySend() {
      this.$refs.chatInputEditor.submit();
    },
    async sendMessage(fullList) {
      this.resetEditor();
      console.log(fullList);
      this.readedMessage();
      if (this.isBanned) {
        this.showBannedTip();
        return;
      }
      let sendText = this.isReceipt ? "【回执消息】" : "";
      fullList.forEach(async (msg) => {
        switch (msg.type) {
          case "text":
            await this.sendTextMessage(sendText + msg.content, msg.atUserIds);
            break;
          case "image":
            await this.sendImageMessage(msg.content.file);
            break;
          case "file":
            await this.sendFileMessage(msg.content.file);
            break;
        }
      });
    },
    sendImageMessage(file) {
      return new Promise((resolve, reject) => {
        this.onImageBefore(file);
        let formData = new FormData();
        formData.append("file", file);
        this.$http
          .post("/image/upload?isPermanent=false", formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((data) => {
            this.onImageSuccess(data, file);
            resolve();
          })
          .catch((res) => {
            this.onImageFail(res, file);
            reject();
          });
        this.$nextTick(() => this.$refs.chatInputEditor.focus());
        this.scrollToBottom();
      });
    },
    sendTextMessage(sendText, atUserIds) {
      return new Promise((resolve, reject) => {
        if (!sendText.trim()) {
          reject();
        }
        let msgInfo = {
          tmpId: this.generateId(),
          content: sendText,
          type: this.$enums.MESSAGE_TYPE.TEXT,
        };
        this.fillTargetId(msgInfo, this.chat.targetId);
        if (this.chat.type == "GROUP") {
          msgInfo.atUserIds = atUserIds;
          msgInfo.receipt = this.isReceipt;
        }
        this.lockMessage = true;
        const chat = this.chat;
        let tmpMessage = this.buildTmpMessage(msgInfo);
        this.chatStore.insertMessage(tmpMessage, chat);
        this.moveChatToTop();
        this.sendMessageRequest(msgInfo)
          .then((m) => {
            tmpMessage.id = m.id;
            tmpMessage.status = m.status;
            tmpMessage.content = m.content;
            this.chatStore.updateMessage(tmpMessage, chat);
          })
          .catch(() => {
            tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
            this.chatStore.updateMessage(tmpMessage, chat);
          })
          .finally(() => {
            this.isReceipt = false;
            resolve();
          });
      });
    },
    sendFileMessage(file) {
      return new Promise((resolve, reject) => {
        let check = this.$refs.fileUpload.beforeUpload(file);
        if (check) {
          this.$refs.fileUpload.onFileUpload({ file });
        }
      });
    },
    onResendMessage(msgInfo) {
      if (msgInfo.type != this.$enums.MESSAGE_TYPE.TEXT) {
        this.$message.error("该消息不支持自动重新发送，建议手动重新发送");
        return;
      }
      const chat = this.chat;
      this.chatStore.deleteMessage(msgInfo, chat);
      msgInfo.tmpId = this.generateId();
      let tmpMessage = this.buildTmpMessage(msgInfo);
      this.chatStore.insertMessage(tmpMessage, chat);
      this.moveChatToTop();
      this.sendMessageRequest(msgInfo)
        .then((m) => {
          tmpMessage.id = m.id;
          tmpMessage.status = m.status;
          tmpMessage.content = m.content;
          this.chatStore.updateMessage(tmpMessage, chat);
        })
        .catch(() => {
          tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
          this.chatStore.updateMessage(tmpMessage, chat);
        })
        .finally(() => {
          this.scrollToBottom();
        });
    },
    deleteMessage(msgInfo) {
      this.$confirm("确认删除消息?", "删除消息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.chatStore.deleteMessage(msgInfo, this.chat);
      });
    },
    recallMessage(msgInfo) {
      this.$confirm("确认撤回消息?", "撤回消息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = `/message/${this.chat.type.toLowerCase()}/recall/${
          msgInfo.id
        }`;
        this.$http({
          url: url,
          method: "delete",
        }).then((m) => {
          this.$message.success("消息已撤回");
          m.selfSend = true;
          this.chatStore.recallMessage(m, this.chat);
        });
      });
    },
    readedMessage() {
      if (this.chat.unreadCount > 0) {
        if (this.isGroup) {
          var url = `/message/group/readed?groupId=${this.chat.targetId}`;
        } else {
          url = `/message/private/readed?friendId=${this.chat.targetId}`;
        }
        this.$http({
          url: url,
          method: "put",
        }).then(() => {});
        this.chatStore.resetUnreadCount(this.chat);
      }
    },
    loadReaded(fId) {
      this.$http({
        url: `/message/private/maxReadedId?friendId=${fId}`,
        method: "get",
      }).then((id) => {
        this.chatStore.readedMessage({
          friendId: fId,
          maxId: id,
        });
      });
    },
    loadGroup(groupId) {
      this.$http({
        url: `/group/find/${groupId}`,
        method: "get",
      }).then((group) => {
        this.group = group;
        this.chatStore.updateChatFromGroup(group);
        this.groupStore.updateGroup(group);
      });

      this.$http({
        url: `/group/members/${groupId}`,
        method: "get",
      }).then((groupMembers) => {
        this.groupMembers = groupMembers;
      });
    },
    updateFriendInfo() {
      if (this.isFriend) {
        let friend = JSON.parse(JSON.stringify(this.friend));
        friend.headImage = this.userInfo.headImageThumb;
        friend.nickName = this.userInfo.nickName;
        friend.showNickName = friend.remarkNickName
          ? friend.remarkNickName
          : friend.nickName;
        this.chatStore.updateChatFromFriend(friend);
        this.friendStore.updateFriend(friend);
      } else {
        this.chatStore.updateChatFromUser(this.userInfo);
      }
    },
    async loadFriend(friendId) {
      try {
        this.labelOptionsLoading = true;
        const userInfo = await this.$http({
          url: `/user/find/${friendId}`,
          method: "GET",
        });
        this.userInfo = userInfo;
        if (userInfo.lastLoginIp) {
          const location = await this.getIpLocation(userInfo.lastLoginIp);
          this.ipLocation = location;
        }
        this.updateFriendInfo();
        await this.loadLabelOptions(friendId);
        this.selectedLabels = [];
        if (userInfo.labelIds) {
          this.selectedLabels = userInfo.labelIds
            .split(",")
            .map((id) => String(id.trim()))
            .filter((id) => id);
        }
        await this.loadAllGroupOptions(friendId);
        this.$nextTick(() => {
          if (this.userInfo.groupIds) {
            this.selectedGroup = String(this.userInfo.groupIds);
          } else if (
            this.userInfo.groupNames &&
            this.userInfo.groupNames.length > 0
          ) {
            const currentGroupName = this.userInfo.groupNames[0];
            const matchedGroup = this.groupOptions.find(
              (item) => item.label === currentGroupName
            );
            if (matchedGroup) {
              this.selectedGroup = matchedGroup.value;
            }
          }
        });
      } catch (error) {
        console.error("加载用户信息失败:", error);
      } finally {
        this.labelOptionsLoading = false;
      }
    },
    showName(msgInfo) {
      if (!msgInfo) {
        return "";
      }
      if (this.isGroup) {
        let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
        return member ? member.showNickName : msgInfo.sendNickName || "";
      } else {
        return msgInfo.selfSend ? this.mine.nickName : this.chat.showName;
      }
    },
    headImage(msgInfo) {
      if (this.isGroup) {
        let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
        return member ? member.headImage : "";
      } else {
        return msgInfo.sendId == this.mine.id
          ? this.mine.headImageThumb
          : this.chat.headImage;
      }
    },
    resetEditor() {
      this.$nextTick(() => {
        this.$refs.chatInputEditor.clear();
        this.$refs.chatInputEditor.focus();
      });
    },
    scrollToBottom() {
      this.$nextTick(() => {
        let div = document.getElementById("chatScrollBox");
        div.scrollTop = div.scrollHeight;
      });
    },
    refreshPlaceHolder() {
      if (this.isReceipt) {
        this.placeholder = "【回执消息】";
      } else if (this.$refs.editBox && this.$refs.editBox.innerHTML) {
        this.placeholder = "";
      } else {
        this.placeholder = "聊点什么吧~";
      }
    },
    sendMessageRequest(msgInfo) {
      return new Promise((resolve, reject) => {
        this.reqQueue.push({ msgInfo, resolve, reject });
        this.processReqQueue();
      });
    },
    processReqQueue() {
      if (this.reqQueue.length && !this.isSending) {
        this.isSending = true;
        const reqData = this.reqQueue.shift();
        this.$http({
          url: this.messageAction,
          method: "post",
          data: reqData.msgInfo,
        })
          .then((res) => {
            reqData.resolve(res);
          })
          .catch((e) => {
            reqData.reject(e);
          })
          .finally(() => {
            this.isSending = false;
            this.processReqQueue();
          });
      }
    },
    showBannedTip() {
      let msgInfo = {
        tmpId: this.generateId(),
        sendId: this.mine.id,
        sendTime: new Date().getTime(),
        type: this.$enums.MESSAGE_TYPE.TIP_TEXT,
      };
      if (this.chat.type == "PRIVATE") {
        msgInfo.recvId = this.mine.id;
        msgInfo.content = "该用户已被管理员封禁,原因:" + this.userInfo.reason;
      } else {
        msgInfo.groupId = this.group.id;
        msgInfo.content = "本群聊已被管理员封禁,原因:" + this.group.reason;
      }
      this.chatStore.insertMessage(msgInfo, this.chat);
    },
    buildTmpMessage(msgInfo) {
      let message = JSON.parse(JSON.stringify(msgInfo));
      message.sendId = this.mine.id;
      message.sendTime = new Date().getTime();
      message.status = this.$enums.MESSAGE_STATUS.SENDING;
      message.selfSend = true;
      if (this.isGroup) {
        message.readedCount = 0;
      }
      return message;
    },
    getImageSize(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function (event) {
          const img = new Image();
          img.onload = function () {
            resolve({ width: img.width, height: img.height });
          };
          img.onerror = function () {
            reject(new Error("无法加载图片"));
          };
          img.src = event.target.result;
        };
        reader.onerror = function () {
          reject(new Error("无法读取文件"));
        };
        reader.readAsDataURL(file);
      });
    },
    generateId() {
      const id =
        String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
      if (this.maxTmpId > id) {
        return this.generateId();
      }
      this.maxTmpId = id;
      return id;
    },
    showChangeCustomerBox() {
      this.showChangeCustomer = true;
    },
    closeChangeCustomerBox() {
      this.showChangeCustomer = false;
    },
    onTransferSuccess() {
      this.$message.success("已成功转接客服");
    },
    async getIpLocation(ip) {
      if (!ip) return "";
      try {
        const response = await fetch(`http://ip-api.com/json/${ip}?lang=zh-CN`);
        const data = await response.json();
        if (data && data.status === "success") {
          let location = [];
          if (data.country) location.push(data.country);
          if (data.regionName) location.push(data.regionName);
          if (data.city) location.push(data.city);
          return location.join(" ");
        }
        return "";
      } catch (error) {
        console.error("获取IP地理位置失败:", error);
        try {
          const backupResponse = await fetch(
            `https://whois.pconline.com.cn/ipJson.jsp?ip=${ip}&json=true`
          );
          const text = await backupResponse.text();
          const data = JSON.parse(text);
          if (data) {
            let location = [];
            if (data.pro) location.push(data.pro);
            if (data.city) location.push(data.city);
            if (data.addr) location.push(data.addr);
            return location.join(" ");
          }
        } catch (backupError) {
          console.error("备用API也失败了:", backupError);
        }
        return "";
      }
    },
    formatIpDisplay(ip, location) {
      if (!ip) return "";
      return location ? `${ip}（${location}）` : ip;
    },
    handleAddUserGroup() {
      this.$prompt("请输入分组名称", "添加分组", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (!value || !value.trim()) {
            this.$message.warning("分组名称不能为空");
            return;
          }
        })
        .catch(() => {});
    },
    loadAllGroupOptions(friendId) {
      return this.$http
        .get(`/user/group/${friendId}`)
        .then((res) => {
          console.log("分组数据:", res);
          if (res.groupList && Array.isArray(res.groupList)) {
            this.groupOptions = res.groupList.map((item) => ({
              value: item.id,
              label: item.groupName,
            }));
          } else {
            this.groupOptions = [];
          }
          return res;
        })
        .catch((error) => {
          console.error("加载分组选项失败:", error);
          this.groupOptions = [];
        });
    },
    handleSelectUserGroup(groupId) {
      if (groupId === "__CREATE_NEW__") {
        this.$prompt("请输入新分组名称", "创建分组", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (!value.trim()) return;
          this.createNewGroup(value.trim());
        });
      } else if (groupId === "" || groupId === null || groupId === undefined) {
        // 清空分组
        this.doSaveGroup("");
      } else {
        this.doSaveGroup(groupId);
      }
    },
    doSaveGroup(groupId) {
      // 如果 groupId 为空字符串，表示移除分组
      const saveGroupId = groupId || "";
      this.$http
        .post("/user/group/save", {
          userId: this.userInfo.id,
          groupIds: String(saveGroupId),
        })
        .then(() => {
          console.log("res", saveGroupId);
          this.$message.success(saveGroupId ? "分组设置成功" : "已移除分组");
          this.loadFriend(this.chat.targetId);
        });
    },
    loadLabelOptions(userId) {
      this.labelOptionsLoading = true;
      return this.$http
        .get(`/user/label/${userId}`)
        .then((res) => {
          console.log("标签选项数据:", res);
          if (res && Array.isArray(res.labelList)) {
            this.labelOptions = res.labelList.map((item) => ({
              value: item.id,
              label: item.labelName || item.name,
            }));
          } else {
            this.labelOptions = [];
          }
          return res;
        })
        .catch((error) => {
          console.error("加载标签选项失败:", error);
          this.labelOptions = [];
        })
        .finally(() => {
          this.labelOptionsLoading = false;
        });
    },
    getLabelName(labelId) {
      const label = this.labelOptions.find((item) => item.value == labelId);
      return label ? label.label : "";
    },
    removeLabel(labelId) {
      const index = this.selectedLabels.indexOf(labelId);
      if (index > -1) {
        this.selectedLabels.splice(index, 1);
        this.saveLabels();
      }
    },
    handleSelectLabels(labelIds) {
      const ids = Array.isArray(labelIds) ? labelIds : [labelIds];
      this.selectedLabels = [...new Set(ids.map((id) => String(id)))];
      this.saveLabels();
    },
    saveLabels() {
      const uniqueLabels = [...new Set(this.selectedLabels)];
      this.$http
        .post("/user/label/save", {
          userId: this.userInfo.id,
          labelIds: uniqueLabels.join(","),
        })
        .then(() => {
          this.$message.success("标签设置成功");
          this.loadFriend(this.chat.targetId);
        })
        .catch(() => {
          this.$message.error("标签设置失败");
        });
    },
    // 打开快捷回复并加载列表
    openQuickReplyBox() {
      this.showQuickReplyBox = true;
      this.loadQuickReplyList();
    },
    // 关闭
    closeQuickReplyBox() {
      this.showQuickReplyBox = false;
    },
    loadQuickReplyList() {
      this.quickLoading = true;
      // 传当前登录用户的 ID 给后端
      this.$http
        .get("/quick/reply/list")
        .then((res) => {
          if (res && Array.isArray(res)) {
            console.log("快捷回复数据:", res);
            this.quickReplyList = res;
          } else {
            this.quickReplyList = [];
          }
        })
        .catch(() => {
          this.quickReplyList = [];
        })
        .finally(() => {
          this.quickLoading = false;
        });
    },
    // 选择快捷语，插入输入框并发送
    selectQuickReply(item) {
      if (!item || !item.replyContent) return;

      // 关闭弹窗
      this.showQuickReplyBox = false;

      this.$nextTick(() => {
        // 根据 replyType 判断消息类型
        if (item.replyType === 0) {
          // 文本消息
          this.sendQuickTextMessage(item.replyContent);
        } else if (item.replyType === 1) {
          // 图片消息（URL格式）
          this.sendQuickImageMessage(item.replyContent);
        } else {
          // 默认当作文本处理
          this.sendQuickTextMessage(item.replyContent);
        }
      });
    },

    // 发送快捷文本消息
    sendQuickTextMessage(content) {
      let sendText = this.isReceipt ? "【回执消息】" : "";
      let msgInfo = {
        tmpId: this.generateId(),
        content: sendText + content,
        type: this.$enums.MESSAGE_TYPE.TEXT,
      };

      this.fillTargetId(msgInfo, this.chat.targetId);

      if (this.chat.type == "GROUP") {
        msgInfo.atUserIds = [];
        msgInfo.receipt = this.isReceipt;
      }

      const chat = this.chat;
      let tmpMessage = this.buildTmpMessage(msgInfo);
      this.chatStore.insertMessage(tmpMessage, chat);
      this.moveChatToTop();

      this.sendMessageRequest(msgInfo)
        .then((m) => {
          tmpMessage.id = m.id;
          tmpMessage.status = m.status;
          tmpMessage.content = m.content;
          this.chatStore.updateMessage(tmpMessage, chat);
          this.scrollToBottom();
          this.$refs.chatInputEditor.clear();
        })
        .catch(() => {
          tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
          this.chatStore.updateMessage(tmpMessage, chat);
        })
        .finally(() => {
          this.isReceipt = false;
          this.refreshPlaceHolder();
        });
    },

    // 发送快捷图片消息（URL格式）
    sendQuickImageMessage(imageUrl) {
      // 构造图片消息数据
      let imageData = {
        originUrl: imageUrl,
        thumbUrl: imageUrl, // 缩略图使用相同URL，或者后端会生成缩略图
        width: 0,
        height: 0,
      };

      let msgInfo = {
        tmpId: this.generateId(),
        sendId: this.mine.id,
        content: JSON.stringify(imageData),
        sendTime: new Date().getTime(),
        selfSend: true,
        type: this.$enums.MESSAGE_TYPE.IMAGE,
        readedCount: 0,
        status: this.$enums.MESSAGE_STATUS.SENDING,
        receipt: this.isReceipt,
      };

      this.fillTargetId(msgInfo, this.chat.targetId);

      const chat = this.chat;

      // 先插入临时消息显示
      this.chatStore.insertMessage(msgInfo, chat);
      this.moveChatToTop();
      this.scrollToBottom();

      // 发送消息
      this.sendMessageRequest(msgInfo)
        .then((m) => {
          msgInfo.id = m.id;
          msgInfo.status = m.status;
          this.isReceipt = false;
          this.chatStore.updateMessage(msgInfo, chat);
          this.$refs.chatInputEditor.clear();
          this.refreshPlaceHolder();
        })
        .catch(() => {
          msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
          this.chatStore.updateMessage(msgInfo, chat);
        });
    },
    //获取翻译文本
    async getTranslateText(text) {
      const res = await this.$http({
        url: "/getTranslate",
        method: "post",
        data: { str: text },
      });
      return res;
    },
  },
  computed: {
    mine() {
      return this.userStore.userInfo;
    },
    isFriend() {
      return this.friendStore.isFriend(this.userInfo.id);
    },
    friend() {
      return this.friendStore.findFriend(this.userInfo.id);
    },
    title() {
      let title = this.chat.showName;
      if (this.chat.type == "GROUP") {
        let size = this.groupMembers.filter((m) => !m.quit).length;
        title += `(${size})`;
      }
      return title;
    },
    messageAction() {
      return `/message/${this.chat.type.toLowerCase()}/send`;
    },
    unreadCount() {
      return this.chat.unreadCount;
    },
    showMessages() {
      return this.chat.messages.slice(this.showMinIdx);
    },
    messageSize() {
      if (!this.chat || !this.chat.messages) {
        return 0;
      }
      return this.chat.messages.length;
    },
    isBanned() {
      return (
        (this.chat.type == "PRIVATE" && this.userInfo.isBanned) ||
        (this.chat.type == "GROUP" && this.group.isBanned)
      );
    },
    memberSize() {
      return this.groupMembers.filter((m) => !m.quit).length;
    },
    isGroup() {
      return this.chat.type == "GROUP";
    },
    isPrivate() {
      return this.chat.type == "PRIVATE";
    },
    loading() {
      return this.chatStore.loading;
    },
    targetUserId() {
      if (this.chat.type === "PRIVATE") {
        return this.chat.targetId;
      } else if (this.chat.type === "GROUP") {
        return this.group.id;
      }
      return 0;
    },
    availableLabelOptions() {
      return this.labelOptions.filter(
        (item) => !this.selectedLabels.includes(String(item.value))
      );
    },
  },
  watch: {
    chat: {
      handler(newChat, oldChat) {
        if (
          newChat.targetId > 0 &&
          (!oldChat ||
            newChat.type != oldChat.type ||
            newChat.targetId != oldChat.targetId)
        ) {
          this.userInfo = {};
          this.group = {};
          this.groupMembers = [];
          if (this.chat.type == "GROUP") {
            this.loadGroup(this.chat.targetId);
          } else {
            this.loadFriend(this.chat.targetId);
            this.loadReaded(this.chat.targetId);
          }
          this.scrollToBottom();
          this.showSide = false;
          this.readedMessage();
          let size = this.chat.messages.length;
          this.showMinIdx = size > 30 ? size - 30 : 0;
          this.resetEditor();
          this.isReceipt = false;
          this.maxTmpId = 0;
          this.refreshPlaceHolder();
        }
      },
      immediate: true,
    },
    messageSize: {
      handler(newSize, oldSize) {
        if (newSize > oldSize) {
          let lastMessage = this.chat.messages[newSize - 1];
          if (lastMessage && this.$msgType.isNormal(lastMessage.type)) {
            if (this.isInBottom || lastMessage.selfSend) {
              this.scrollToBottom();
            } else {
              this.newMessageSize++;
            }
          }
        }
      },
    },
    loading: {
      handler(newLoading, oldLoading) {
        if (!newLoading && this.isPrivate) {
          this.loadReaded(this.chat.targetId);
        }
      },
    },
  },
  mounted() {
    let div = document.getElementById("chatScrollBox");
    div.addEventListener("scroll", this.onScroll);
    this.getTranslateText("apple");
  },
};
</script>

<style lang="scss" scoped>
.chat-box {
  position: relative;
  width: 100%;
  background: #fff;

  .el-header {
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    line-height: 50px;
    font-size: var(--im-font-size-larger);
    border-bottom: var(--im-border);
    .btn-side {
      position: absolute;
      right: 20px;
      line-height: 50px;
      font-size: 20px;
      cursor: pointer;
      color: var(--im-text-color-light);
    }
  }

  .content-box {
    position: relative;
    .im-chat-main {
      padding: 0;
      background-color: #f4f5f6;
      .im-chat-box {
        > ul {
          padding: 0 20px;
          li {
            list-style-type: none;
          }
        }
      }
    }
    .scroll-to-bottom {
      text-align: right;
      position: absolute;
      right: 20px;
      bottom: 230px;
      color: var(--im-color-primary);
      font-size: var(--im-font-size);
      font-weight: 600;
      background: #eee;
      padding: 5px 15px;
      border-radius: 15px;
      cursor: pointer;
      z-index: 99;
      box-shadow: var(--im-box-shadow-light);
    }
    .im-chat-footer {
      display: flex;
      flex-direction: column;
      padding: 0;
      .chat-tool-bar {
        display: flex;
        position: relative;
        width: 100%;
        height: 36px;
        text-align: left;
        box-sizing: border-box;
        border-top: var(--im-border);
        padding: 4px 2px 2px 8px;
        > div {
          font-size: 22px;
          cursor: pointer;
          line-height: 30px;
          width: 30px;
          height: 30px;
          text-align: center;
          border-radius: 2px;
          margin-right: 8px;
          color: #999;
          transition: 0.3s;
          &.chat-tool-active {
            font-weight: 600;
            color: var(--im-color-primary);
            background-color: #ddd;
          }
        }
        > div:hover {
          color: #333;
        }
      }
      .send-content-area {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: white !important;
        .send-btn-area {
          padding: 10px;
          position: absolute;
          bottom: 4px;
          right: 6px;
        }
      }
    }
  }
  .side-box {
    border-left: var(--im-border);
  }
  .user-info-side {
    .user-info-container {
      padding: 20px;
      height: 100%;
      overflow-y: auto;
      .user-info-header {
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
        .user-avatar-large {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          object-fit: cover;
          margin-bottom: 15px;
        }
        .user-nickname {
          font-size: 18px;
          font-weight: 600;
          margin: 10px 0 5px;
          color: #333;
        }
        .user-username {
          font-size: 14px;
          color: #999;
          margin: 0;
        }
      }
      .user-info-content {
        padding: 20px 0;
        .info-item {
          display: flex;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid #f0f0f0;
          .info-label {
            width: 70px;
            font-size: 14px;
            color: #999;
            flex-shrink: 0;
          }
          .info-value {
            flex: 1;
            font-size: 14px;
            color: #333;
            word-break: break-all;
            ::v-deep .el-select {
              .el-tag {
                background-color: #bdbaba !important;
                color: #fff !important;
                border-color: #1d1b1b !important;
                .el-tag__close {
                  color: #fff !important;
                  &:hover {
                    background-color: #333 !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// 快捷回复样式
.quick-reply-list {
  padding: 10px;
  .quick-item {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f7f8fa;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    &:hover {
      background: #e6f7ff;
      border-color: #91caff;
    }
  }
  .quick-empty {
    text-align: center;
    padding: 30px 0;
    color: #999;
  }
}
</style>