admin_home/src/layout/components/Chat/ChatPanel.vue

<!-- src/components/ChatPanel.vue -->
<template>
    <div class="chat-panel">

      <div class="chat-header">
        <img class="chat-icon" :src=avatar alt="在线会话" />
        <span @click="clickShowMessage">{{ this.$store.state.user.name }}</span>
        <span class="chat-status online"></span>
        <span class="chat-close" @click="$emit('close')">×</span>
      </div>

      <div class="chat-tabs">
        <span
          v-for="(tab, idx) in tabList"
          :key="tab.key"
          class="tab"
          :class="{ active: activeTab === idx }"
          @click="activeTab = idx"
        >
          <img :src="activeTab === idx ? tab.active : tab.icon" class="tab-icon" />
        </span>
      </div>
      
      <div class="chat-groups">
        <template v-if="activeTab === 0">
          <div class="hallLeft">
          <!--加载中 start------------------------------------------>
          <div class="hallLeftLoading" v-if="hallLeftLoading">
            <div class="hallLeftLoadingIcon">
              <div class="hallLeftLoadingIconItem"><i class="el-icon-loading"></i></div>
              <div class="hallLeftLoadingText">恒星管理平台</div>
            </div>
          </div>
          <!--加载中 end------------------------------------------>
          <!--添加好友 start------------------------------------------>
          <hallTitle name="聊天列表" @addUser="creatGroup" />
          <!--添加好友 end------------------------------------------>
          <!--搜索 start------------------------------------------>
          <div class="searchBoxMain">
            <div class="searchBox">
              <el-input
                placeholder="请输入账号/群聊全称"
                prefix-icon="el-icon-search"
                v-model="searchConversation"
                @keyup.enter.native="searchUserConversation"
              >
              </el-input>
            </div>
           
          </div>
          <!--搜索 end------------------------------------------>
          <div class="userListBox list001">
            <!--会话列表 start------------------------------------------>
            <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="item in conversationList" :key="item.receiver_id">
              <div class="flexItemBox" v-if="item.is_group==0" @click="selectConversation(item)">
                <!--单聊-->
                <div class="userAvatar">
                  <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="userInfo">
                  <div class="userName">
                    <div class="userNameText">{{item.user_name}}</div>
                    <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
                  </div>
                </div>
              </div>
              <!--群聊-->
              <div class="flexItemBox" v-else @click="selectGroup(item)">
                <div class="userAvatar">
                  <img src="@/assets/chat/user/group.jpg">
                </div>
                <div class="userInfo">
                  <div class="userName">
                    <div class="userNameText">{{item.group_name}}</div>
                    <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
                  </div>
                </div>
              </div>
            </div>
            <!--会话列表 end------------------------------------------>
          </div>
        </div>
        </template>
        <template v-else>
          <div class="hallLeft">
          <!--添加好友 start------------------------------------------>
          <contactsTitle :name="tableTitleName" @addUser="addUser" @closeAddUser="closeAddUser" />
          <!--添加好友 end------------------------------------------>
          <!--搜索 start------------------------------------------>
          <div class="searchBox">
            <el-input
              placeholder="请输入用户账号"
              prefix-icon="el-icon-search"
              v-model="searchUserName"
              @keyup.enter.native="searchFriend"
              v-if="pagestatus == 4"
            >
            </el-input>
            <el-input
              placeholder="请输入好友账号"
              prefix-icon="el-icon-search"
              v-model="searchUserListName"
              @keyup.enter.native="searchOrdFriend"
              v-if="pagestatus==1||pagestatus==2||pagestatus==3"
            >
            </el-input>
          </div>
          <!--搜索 end------------------------------------------>
          <!-- <div class="newFriendBox">新的朋友</div> -->
          <div class="newFriendImgBox" v-if="pagestatus==4">
            <div class="newFriendImg">
              <img src="@/assets/chat/newcontacts.png" width="20px" height="20px">
            </div>
            <div class="newFriendText" @click="searchFriend">
              搜索：{{searchUserName}}
            </div>
            <div class="searchFriendBox" v-if="searchWindowStatus==true">
              <div class="searchFriendItem">
                <div class="searchFriendAvatar">
                  <img :src="searchFriendList.avatar" v-if="searchFriendList.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="searchFriendInfo">
                  <div class="searchFriendName">
                    <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
                    <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
                    
                  </div>
                  <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
                </div>
              </div>
      
              <div class="searchFriendButton">
                <el-button type="primary" v-if="searchFriendList.showBtn==false&&searchFriendList.id!=this.$store.state.user.userid" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
                <el-button type="danger" v-else-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
                <el-button type="primary" disabled v-else>添加到通讯录</el-button>
              </div>
          
            </div>
          </div>
          <div :class="['newFriendImgBox', pagestatus === 2 ? 'newFriendIActive' : '']" @click="tabPage(2)" v-else>
            <div class="newFriendImg">
              <img src="@/assets/chat/newcontacts.png">
            </div>
            <div class="newFriendText" v-if="pagestatus==4">
              搜索：{{searchUserName}}
            </div>
            <div class="newFriendText" v-else>
              新的朋友
              <span v-if="userApplyList.length>0">{{userApplyList.length}}</span>
            </div>
          </div>
          <!--用户列表 start------------------------------------------>
          <div class="userListBox list002" v-if="pagestatus==1||pagestatus==2||pagestatus==3">
            <!-- <div class="userListTitle">A</div> -->
            <div class="userItem" @click="changeUserItem(item.friend_id)" v-for="(item,index) in userFriendList" :key="index" :class="['userItem', { active: item.status == 1 }]">
              <div class="userAvatar">
                <img :src="item.avatar" v-if="item.avatar!=''">
                <img src="@/assets/chat/user/admin.png" v-else>
              </div>
              <div class="userInfo">
                <div class="userName">
                  <div class="userNameText" v-if="item.remark!=null">{{item.user_name}}<span v-if="item.remark!=''">({{item.remark}})</span></div>
                  <div class="userNameText" v-else>{{item.user_name}}</div>
                </div>
              </div>
            </div>
          </div>
          <!--用户列表 end------------------------------------------>
        </div>
        </template>
  </div>
  <el-dialog
    :visible.sync="showDialog"
    width="80%"
    heigth="80%"
    class="chat-dialog"
    top="2vh"
  >
    <!--右侧菜单 start------------------------------------------------------------>
        <div class="hallRight">
          <!--加载中 start-->
          <div class="hallRightLoading" v-if="hallRightLoading">
            <div class="hallRightLoadingIcon">
              <div class="hallRightLoadingIconItem"><i class="el-icon-loading"></i></div>
              <div class="hallRightLoadingText">恒星管理平台</div>
            </div>
          </div>
          <!--加载中 end-->
          <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
            <div class="userName">{{ messageTitle }}</div>
            <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
            <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
            <div v-if="groupId==''">
              <div class="shareCardIcon" @click="openShareCard">
                <i class="el-icon-postcard"></i>
              </div>
            </div>
          </div>
          <div class="rightPositionBox">
            <div class="rightUserMessageBox" ref="rightUserMessageBox">
              <!-- <div class="timeBox">
                <span>12:40:22</span>
              </div> -->
              <div v-for="item in chatrecords" :key="item.id">
                <!--文字消息类型 对方-->
                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==1">
                  <div class="otherUserIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="otherUserMessageText">
                    {{item.content}}
                  </div>
                </div>
                <!--文字消息类型 我-->
                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==1">
                  <div class="meUserMessageText">
                    {{item.content}}
                  </div>
                  <div class="meUserIcon">
                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                </div>
                <!-- 图片类型 对方-->
                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==2">
                  <div class="otherUserIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="otherUserMessageText">
                    <div class="messageTypeImage">
                      <img :src="item.content" @click="imgZoom(item.content)">
                    </div>
                  </div>
                </div>
                <!-- 图片类型 我-->
                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==2">
                  <div class="meUserMessageText">
                    <div class="messageTypeImage">
                      <img :src="item.content" @click="imgZoom(item.content)">
                    </div>
                  </div>
                  <div class="meUserIcon">
                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                </div>
                <!--文件类型 对方-->
                <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==3">
                  <div class="otherUserIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="otherUserMessageText" @click="downloadFile(item)">
                    <div class="messageTypeFile">
                      <div class="messageTypeFileTop">
                        <div class="messageTypeFileInfo">
                          <div class="messageTypeFileTitle">
                            {{ JSON.parse(item.content).oldFileName }}
                          </div>
                          <div class="messageTypeFileIcon">
                            <img src="@/assets/chat/file.png"/>
                          </div>
                        </div>
                        <!-- <div class="messageTypeFileSize">20kb</div> -->
                      </div>
                      <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
                    </div>
                  </div>
                </div>
                <!--文件类型 我-->
                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==3">
                  <div class="meUserMessageText" @click="downloadFile(item)">
                    <div class="messageTypeFile">
                      <div class="messageTypeFileTop">
                        <div class="messageTypeFileInfo">
                          <div class="messageTypeFileTitle">
                            {{ JSON.parse(item.content).oldFileName }}
                          </div>
                          <div class="messageTypeFileIcon">
                            <img src="@/assets/chat/file.png"/>
                          </div>
                        </div>
                        <!-- <div class="messageTypeFileSize">20kb</div> -->
                      </div>
                      <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
                    </div>
                  </div>
                  <div class="meUserIcon">
                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                </div>
                <!--名片 我-->
                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==4">
                  <div class="meUserMessageText" @click="addFriendShow(item.content.split(',')[2])">
                    <div class="messageTypeCard">
                      <div class="messageTypeCardTop">
                        <div class="messageTypeCardIcon">
                          <!-- <img :src="item.content.split(',')[0]"> -->
                          <img src="@/assets/chat/user/user.png">
                        </div>
                        <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
                      </div>
                      <div class="messageTypeCardText">
                        分享个人名片
                      </div>
                    </div>
                  </div>
                  <div class="meUserIcon">
                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                </div>
                <!--名片 对方-->
                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==4">
                  <div class="otherUserIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="otherUserMessageText" @click="addFriend(item.content.split(',')[2])">
                    <div class="messageTypeCard">
                      <div class="messageTypeCardTop">
                        <div class="messageTypeCardIcon">
                          <!-- <img :src="item.content.split(',')[0]"> -->
                          <img src="@/assets/chat/user/user.png">
                        </div>
                        <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
                      </div>
                      <div class="messageTypeCardText">
                        分享个人名片
                      </div>
                    </div>
                  </div>
                </div>
                <!--邀请加群 我-->
                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==6">
                  <div class="meUserMessageText">
                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
                      <div class="messageGroupInviteTop">
                        <div class="messageGroupInviteIcon">
                          <img src="@/assets/chat/user/group.jpg">
                        </div>
                        <div class="messageGroupInfoText">
                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
                        </div>
                      </div>
                      <div class="messageGroupInviteText">
                        点击加入
                      </div>
                    </div>
                  </div>
                  <div class="meUserIcon">
                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                </div>
                <!--邀请加群 对方-->
                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==6">
                  <div class="otherUserIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="otherUserMessageText">
                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
                      <div class="messageGroupInviteTop">
                        <div class="messageGroupInviteIcon">
                          <img src="@/assets/chat/user/group.jpg">
                        </div>
                        <div class="messageGroupInfoText">
                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
                        </div>
                      </div>
                      <div class="messageGroupInviteText">
                        点击加入
                      </div>
                    </div>
                  </div>
                </div>
  
              </div>
            </div>
            <div class="sendMessageBox">
              <div class="sendMessageTools">
                <!--上传文件 start-->
                <div class="toolsBigBox">
                  <div class="toolsBox">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeImgUpload">
                      <img src="@/assets/chat/send_img.png">
                    </el-upload>
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeFileUpload">
                      <img src="@/assets/chat/send_file.png">
                    </el-upload>
                    <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
                  </div>
                </div>
                <div class="fileBox" v-if="sendMessage.img.imgUrl!=''">
                  <img :src="sendMessage.img.imgUrl">
                  <div class="fileBoxText">{{ sendMessage.img.oldFileName }}</div>
                  <div @click="deFileUpload"><i class="el-icon-close"></i></div>
                </div>
                <div class="fileBox" v-if="sendMessage.file.fileUrl!=''">
                  <img src="@/assets/chat/file.png">
                  <div class="fileBoxText">{{ sendMessage.file.oldFileName }}</div>
                  <div @click="deFileUpload"><i class="el-icon-close"></i></div>
                </div>
                <!--上传文件 end-->
              </div>
              <div class="sendMessageInput">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="userMessage"
                  :rows="4"
                  resize="none"
                  maxlength="200"
                  @keyup.enter.native="sendUserMessageToFriend"
                >
                </el-input>
              </div>
              <div class="sendMessageButton">
                <el-button v-if="sendMessage.img.imgUrl!=''||sendMessage.file.fileUrl!=''" type="primary" size="medium" @click="sendUserMessageToFile">发送文件 <i class="el-icon-position"></i></el-button>
                <el-button v-else type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
              </div>
            </div>
            <!--右侧菜单 start------------------------------------------------------------>
            <div class="rightSlideBox" v-if="rightSlideBoxShow">
              <!--关闭按钮-->
              <div class="rightSlideBoxClose">
                <div class="rightSlideBoxCloseTitle">群设置</div>
                <div @click="openGroupSystem" class="rightSlideBoxCloseIcon">
                  <i class="el-icon-close"></i>
                </div>
              </div>
  
              <!--2216-->
              <div class="rightSlideSearch">
                <div class="searchBox">
                  <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="searchUser"
                    @keyup.enter.native="rightSearchUser"
                  >
                  </el-input>
                </div>
                <!--弹出框-->
                <div class="searchFriendBox" v-if="groupRightSearchWindow">
                  <div class="searchFriendClose">
                    <div @click="closeRightSearchUser" class="rightSlideBoxCloseIcon">
                      <i class="el-icon-close"></i>
                    </div>
                  </div>
                  <div class="searchFriendItem">
                    <div class="searchFriendAvatar">
                      <img :src="groupRightUserInfo.avatar" v-if="groupRightUserInfo.avatar!=null&&groupRightUserInfo.avatar!=''">
                      <img src="@/assets/chat/user/admin.png" v-else>
                    </div>
                    <div class="searchFriendInfo">
                      <div class="searchFriendName">
                        <div class="searchFriendNameText">{{groupRightUserInfo.user_name}}</div>
                      </div>
                      <div class="searchFriendPhone">账号：{{groupRightUserInfo.user_name}}</div>
                    </div>
                  </div>
                  <div class="searchFriendButton">
                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==true" @click="searchConversationIfCreate(groupRightUserInfo.user_id)">发送消息</el-button>
                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)!=Number(myUserId)" @click="addFriend(groupRightUserInfo.user_id)">添加好友</el-button>
                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)==Number(myUserId)" disabled>添加好友</el-button>
                  </div>
                </div>
              </div>
  
              <div class="rightSlideUserBox">
                <div class="rightSlideUserItem rightEditUserItem" @click="editGroupMember">
                  <div class="rightSlideUserItemIcon">
                    <div class="addUserIcon">
                      <i class="el-icon-user-solid"></i>
                    </div>
                  </div>
                  <div class="rightSlideUserItemName">
                    编辑成员
                  </div>
                </div>
                <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
                  <div class="rightSlideUserItemIcon">
                    <span class="el-dropdown-link">
                      <!-- {{ creatorId }} {{ item.user_id }} -->
                      <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
                      <div>
                        <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                        <img src="@/assets/chat/user/admin.png" v-else>
                      </div>
                    </span>
                  </div>
                  <div class="rightSlideUserItemName">
                    <span v-if="item.user_name!=null">{{item.user_name}}</span>
                    <span v-else>未知用户</span>
                  </div>
                </div>
              </div>
              <div class="rightLineBorder"></div>
              <!--聊天记录 start------------------------------------------------------------>
              <div class="rightSlideFunction">
                <div class="rightSlideFunctionItem" @click="fileWindowStatus=true">
                  <div class="rightSlideFunctionItemText">聊天记录</div>
                  <div class="rightSlideFunctionItemIcon">
                    <img src="@/assets/chat/arrow_right.png" alt="">
                  </div>
                </div>
              </div>
              <!--聊天记录 end------------------------------------------------------------>
              <!--群聊设置 start------------------------------------------------------------>
              <div class="rightSlideFunction">
                <div class="groupSystem">
                  <div class="groupChatSystem">
                    <div class="groupChatTitle">群聊名称</div>
                    <div class="groupChatText">
                      <div class="groupChatTextContent">{{this.messageTitle}}</div>
                      <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
                    </div>
                  </div>
                  <div class="groupChatSystem">
                    <div class="groupChatTitle">群公告</div>
                    <div class="groupChatText" v-if="this.groupProfile!=''">
                      <div class="groupChatTextContent">{{this.groupProfile}}</div>
                      <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
                    </div>
                    <div class="groupChatText" v-else>
                      暂无群公告
                      <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
                    </div>
                  </div>
                </div>
              </div>
              <!--群聊设置 end------------------------------------------------------------>
              <div class="rightSlideFooterBox">
                <div @click="openShareMyGroup">分享群</div>
                <div @click="delGroup" v-if="creatorId==myUserId">解散群</div>
                <div @click="closeGroup" v-else>退出群</div>
                <div @click="openGroupSystem">关闭</div>
              </div>
            </div>
          </div>
          <!--右侧菜单 end------------------------------------------>
        </div>
    </el-dialog>      
    <el-dialog
      :visible.sync="showfrindDialog"
      width="40%"
      class="chat-friend-dialog"
      top="15vh"
      :modal="false"
    >
        <div class="hallBox">
          <div class="hallRight" v-if="pagestatus==1||pagestatus==4">
            <div class="ifHallRigthNoMessage">恒星管理平台</div>
          </div>
          <div class="hallRight newFriendBox" v-if="pagestatus==2">
            <div class="UserNameBox">
              <div class="userName">新的朋友</div>
            </div>
            <div class="rightNewFriendBox"   v-for="(item,index) in userApplyList" :key="index">
              <div class="rightNewFriendItem">
                <div class="rightNewFriendAvatar">
                  <img :src="item.avatar" v-if="item.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="rightNewFriendInfo">
                  <div class="rightNewFriendName">{{item.remark}}</div>
                  <div class="rightNewFriendPhone">{{item.user_name}}</div>
                </div>
              </div>
              <div class="rightNewFriendStatus">
                <div class="rightNewFriendStatus2">
                  <el-button type="primary" @click="openWindow(item)">接受</el-button>
                </div>
              </div>
            </div>
            <div class="nodata" v-if="userApplyList.length==0">暂无数据</div>
            
          </div>
          <div class="hallRight" v-if="pagestatus==3">
            <div class="userInfoMainBox">
              <div class="userInfoMainItem">
                <div class="userInfoMainAvatar">
                  <img :src="friendInfo.avatar" v-if="friendInfo.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="userInfoMainInfo">
                  <div class="userInfoMainName">
                    <div class="userInfoMainNameText" v-if="friendInfo.nickname!=null&&friendInfo.nickname!=''">{{friendInfo.nickname}}</div>
                    <div class="userInfoMainNameText" v-else>{{friendInfo.user_name}}</div>
                  </div>
                  <div class="userInfoMainPhone">账号：{{friendInfo.user_name}}</div>
                </div>
              </div>
              <div class="userInfoMainLineBox">
                <div class="userInfoMainLineTitle">备注</div>
                <div class="userInfoMainLineContent">
                  <div class="userInfoMainLineContentItem" @click="openEditWindow">
                    <div v-if="friendInfo.remark!=null&&friendInfo.remark!=''">{{friendInfo.remark}}</div>
                    <div v-else>暂无备注</div>
                    <div><i class="el-icon-edit"></i></div>
                  </div>
                </div>
              </div>
              <div class="userInfoMainButton">
                <el-button type="primary" icon="el-icon-s-promotion" @click="sendMessageToFriend(friendInfo)">发送消息</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="deleteFriend(friendInfo.friend_id)">删除好友</el-button>
              </div>
            </div>
          </div>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="groupWindowStatus" :close-on-click-modal="false" width="1028px">
      <div class="searchWindow">
        <div class="searchWindowLeft">
          <div class="searchUserWindowBox">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="searchFriendGroup"
              @keyup.enter.native="searchFriendGroupUser"
            >
            </el-input>
            <!--搜索用户弹出框 start------------------------------------------------------------>
            <div class="searchFriendBox" v-if="groupFriendsWindowStatus">
              <div class="searchFriendClose">
                <div @click="closeSearchFriendWindow" class="rightSlideBoxCloseIcon">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <div class="searchFriendItem">
                <div class="searchFriendAvatar">
                  <img :src="groupFriendSearchUser.avatar" v-if="groupFriendSearchUser.avatar!=null&&groupFriendSearchUser.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="searchFriendInfo">
                  <div class="searchFriendName">
                    <div class="searchFriendNameText">{{groupFriendSearchUser.user_name}}</div>
                  </div>
                  <div class="searchFriendPhone">账号：{{groupFriendSearchUser.user_name}}</div>
                </div>
              </div>
              <div class="searchFriendButton">
                <el-button v-if="groupFriendSearchUser.status==false" type="primary" @click="addSearchFriendWindow">添加</el-button>
                <el-button v-else type="warning" @click="addSearchFriendWindow">移除</el-button>
              </div>
            </div>
            <!--搜索用户弹出框 end------------------------------------------------------------>
          </div>
          
          <!--搜索用户 start------------------------------------------------------------>
          <div class="searchUserBox">
            <!-- <div class="searchNameEnglish">A</div> -->
            <div class="searchUserItem" v-for="item in friendsList" :key="item.id">
              <el-checkbox v-model="item.status" 
                            @change="changeSelectFriends(item)" 
                            :disabled="Number(item.friend_id) == Number(creatorId) || groupUserList.includes(item.friend_id)"></el-checkbox>
              <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
              <img src="@/assets/chat/user/admin.png" v-else>
              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
              <div class="searchUserName" v-else>{{item.user_name}}</div>
            </div>
          </div>
          <!--搜索用户 end------------------------------------------------------------>
        </div>
        <div class="searchWindowRight">
          <div class="searchWindowRightTop">
            <div class="searchWindowRightTitle">创建群聊</div>
            <div class="searchWindowRightNum">已选择{{friendsList.filter(item=>item.status).length}}个联系人</div>
          </div>
          <div class="searchWindowUserList">
            <div class="searchWindowUserItem" v-for="item in friendsList" :key="item.id" v-if="item.status==true">
              <div class="searchWindowUserIcon">
                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                <img src="@/assets/chat/user/admin.png" v-else>
                <div class="searchWindowDeleteUser" @click="cancelSelectFriends(item.id)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
              <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
            </div>
          </div>
          <!--分享名片 start------------------------------------------------------------>
          <!-- <div class="shareCardBox">
            <div class="shareCardTitle">[名片]用户名称</div>
            <div class="shareCardInput">
              <el-input v-model="userCardMessage" placeholder="给用户留言"></el-input>
            </div>
          </div> -->
          <!--分享名片 end------------------------------------------------------------>
          <div class="searchWindowFooter">
            <el-button type="info" @click="clearCreatGroupWindow">取消</el-button>
            <el-button type="primary" @click="createForGroup" :disabled="friendsList.filter(item=>item.status).length<2">完成</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--分享群聊 start------------------------------------------------------------>
      <el-dialog :visible.sync="shareGroupWindowStatus" title="分享群聊" :close-on-click-modal="false" width="420px">
        <div>
          <div class="shareCardWindowBox">
            <el-tabs v-model="shareGroupActive" type="card" @tab-click="handleClickShareGroupCard">
              <el-tab-pane label="分享给朋友" name="friend">
                <div class="shareCardWindowBoxMain">
                  <div v-for="item in friendsList" :key="item.id" class="shareCardRadioBox" >
                    <el-radio :label="item.friend_id" v-model="shareGroupId">
                      <input type="hidden" :value="item.friend_id">
                    </el-radio>
                    <div class="shareCardItem">
                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                      <img src="@/assets/chat/user/admin.png" v-else>
                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                      <div class="shareCardName" v-else>{{item.user_name}}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="分享到群聊" name="group">
                <div class="shareCardWindowBoxMain">
                  <div v-for="item in groupConversationList" :key="item.receiver_id" class="shareCardRadioBox" >
                    <el-radio :label="item.receiver_id" v-model="shareGroupId">
                      <input type="hidden" :value="item.receiver_id">
                    </el-radio>
                    <div class="shareCardItem">
                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                      <img src="@/assets/chat/user/group.jpg" v-else>
                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                      <div class="shareCardName" v-else>{{item.name}}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="shareGroupWindowStatus=false">取消</el-button>
            <el-button type="primary" @click="shareMyGroup">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--分享群聊 end------------------------------------------------------------>
  
      <!--放大图片 start------------------------------------------------------------>
      <el-dialog :visible.sync="imgZoomStatus" title="图片详情" :close-on-click-modal="false" max-width="600px">
        <div>
          <div class="imgZoomBox">
            <img :src="imgZoomUrl">
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="imgZoomStatus=false">关闭</el-button>
          </div>
        </div>
      </el-dialog>
            <!--聊天记录弹出框 start------------------------------------------------------------>
            <el-dialog :visible.sync="fileWindowStatus" title="聊天记录" :close-on-click-modal="false" width="757px">
        <div class="fileWindow">
          <div class="fileWindowHeader">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="searchChatRecords"
              @keyup.enter.native="searchChatRecordsUser"
              :disabled="activeName !== 'all'"
            >
            </el-input>
          </div>
          <!--聊天记录选项卡 start------------------------------------------------------------>
          <el-tabs v-model="activeName">
            <el-tab-pane label="全部" name="all">
              <!-- <div class="fileWindowMessageTime">2024-11-10</div> -->
              <div class="fileWindowMessageScrollBox" ref="fileWindowMessageScrollBox">
                <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
                  <!--文字消息 start-->
                  <div v-if="Number(item.msg_type)==1" class="historicalMessageBox">
                    <div class="fileWindowMessageItemIcon">
                      <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                      <img src="@/assets/chat/user/admin.png" v-else>
                    </div>
                    <div class="fileWindowMessageItem">
                      <div class="fileWindowMessageItemInfo">
                        <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
                        <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                      </div>
                      <div class="fileWindowMessageItemText">{{item.content}}</div>
                    </div>
                  </div>
                  <!--文字消息 end-->
                  <!--图片消息 start-->
                  <div v-if="Number(item.msg_type)==2" class="historicalMessageBox">
                    <div class="fileWindowMessageItemIcon">
                      <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                      <img src="@/assets/chat/user/admin.png" v-else>
                    </div>
                    <div class="fileWindowMessageItem">
                      <div class="fileWindowMessageItemInfo">
                        <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
                        <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                      </div>
                      <div class="fileWindowMessageItemText">
                        <img :src="item.content" class="fileWindowMessageItemImage">
                      </div>
                    </div>
                  </div>
                  <!--图片消息 end-->
                  <!--文件消息 start-->
                  <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
                    <div class="fileWindowMessageItemIcon">
                      <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                      <img src="@/assets/chat/user/admin.png" v-else>
                    </div>
                    <div class="fileWindowMessageItem">
                      <div class="fileWindowMessageItemInfo">
                        <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
                        <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                      </div>
                      <div class="fileWindowMessageItemText">
                        <div class="messageTypeFile">
                          <div class="messageTypeFileTop">
                            <div class="messageTypeFileInfo">
                              <div class="messageTypeFileTitle">
                                {{ JSON.parse(item.content).oldFileName }}
                              </div>
                              <div class="messageTypeFileIcon">
                                <img src="@/assets/chat/file.png"/>
                              </div>
                            </div>
                            <!-- <div class="messageTypeFileSize">20kb</div> -->
                          </div>
                          <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--文件消息 end-->
                </div>
              </div>
              
            </el-tab-pane>
            <el-tab-pane label="文件" name="file">
              <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
                <!--文件消息 start-->
                <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
                  <div class="fileWindowMessageItemIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="fileWindowMessageItem">
                    <div class="fileWindowMessageItemInfo">
                      <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                    </div>
                    <div class="fileWindowMessageItemText">
                      <div class="messageTypeFile">
                        <div class="messageTypeFileTop">
                          <div class="messageTypeFileInfo">
                            <div class="messageTypeFileTitle">
                              {{ JSON.parse(item.content).oldFileName }}
                            </div>
                            <div class="messageTypeFileIcon">
                              <img src="@/assets/chat/file.png"/>
                            </div>
                          </div>
                          <!-- <div class="messageTypeFileSize">20kb</div> -->
                        </div>
                        <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--文件消息 end-->
              </div>
              <!--图片消息 end-->
              <div v-if="!chatrecords.some(item => Number(item.msg_type) === 3)" class="fileWindowNoMessage">暂无文件</div>
            </el-tab-pane>
            
            <el-tab-pane label="图片" name="img">
              <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
                <!--图片消息 start-->
                <div v-if="Number(item.msg_type)==2" class="historicalMessageBox">
                  <div class="fileWindowMessageItemIcon">
                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="fileWindowMessageItem">
                    <div class="fileWindowMessageItemInfo">
                      <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                    </div>
                    <div class="fileWindowMessageItemText">
                      <img :src="item.content" class="fileWindowMessageItemImage">
                    </div>
                  </div>
                </div>
              </div>
              <!--图片消息 end-->
              <div v-if="!chatrecords.some(item => Number(item.msg_type) === 2)" class="fileWindowNoMessage">暂无图片</div>
            </el-tab-pane>
            <!-- <el-tab-pane label="日期" name="date">
              <div class="fileWindowDateBox">
                <el-date-picker
                  v-model="time"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
                <el-button type="primary" class="fileWindowDateButton">搜索</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="群成员" name="groupUser">
              <div class="fileWindowGroupMain">
                <div class="fileWindowGroupUserLeft">
                  <div class="fileWindowMessageTime">2024-11-10</div>
                  <div class="fileWindowMessageItemBox">
                    <div class="fileWindowMessageItemIcon">
                      <img src="@/assets/chat/user/user.png" alt="">
                    </div>
                    <div class="fileWindowMessageItem">
                      <div class="fileWindowMessageItemInfo">
                        <div class="fileWindowMessageItemName">用户名称</div>
                        <div class="fileWindowMessageItemTime">12:40</div>
                      </div>
                      <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
                    </div>
                  </div>
                </div>
                <div class="fileWindowGroupUserRight">
                  <div class="fileWindowGroupUserBox">
                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
                    <div class="searchUserBox">
                      <div class="searchNameEnglish">A</div>
                      <div class="searchUserItem">
                        <img src="@/assets/chat/user/user.png">
                        <div class="searchUserName">A农贸站群长</div>
                      </div>
                      <div class="searchNameEnglish">B</div>
                      <div class="searchUserItem">
                        <img src="@/assets/chat/user/user.png">
                        <div class="searchUserName">B农贸站群长</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane> -->
          </el-tabs>
          <!--聊天记录选项卡 end------------------------------------------------------------>
        </div>
      </el-dialog>
      <!--聊天记录弹出框 end------------------------------------------------------------>
            <!--编辑群成员弹出框 start------------------------------------------------------------>
      <!--编辑时 左侧显示的是好友列表 右侧显示的是群成员-->
      <el-dialog :visible.sync="groupEditWindowStatus" :close-on-click-modal="false" width="1028px" @closed="cancelEditGroupMember">
        <div class="searchWindow">
          <div class="searchWindowLeft">
            <div class="searchUserWindowBox">
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchGroup"
                @keyup.enter.native="searchGroupUser">
              </el-input>
              <!--搜索用户弹出框 start------------------------------------------------------------>
              <div class="searchFriendBox" v-if="groupEditMainWindowStatus">
                <div class="searchFriendClose">
                  <div @click="closeAddGroupUserWindow" class="rightSlideBoxCloseIcon">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
                <div class="searchFriendItem">
                  <div class="searchFriendAvatar">
                    <img :src="groupSearchUser.avatar" v-if="groupSearchUser.avatar!=null&&groupSearchUser.avatar!=''">
                    <img src="@/assets/chat/user/admin.png" v-else>
                  </div>
                  <div class="searchFriendInfo">
                    <div class="searchFriendName">
                      <div class="searchFriendNameText">{{groupSearchUser.nickname}}</div>
                    </div>
                    <div class="searchFriendPhone">账号：{{groupSearchUser.nickname}}</div>
                  </div>
                </div>
                <div class="searchFriendButton">
                  <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
                  <el-button v-else-if="Number(creatorId)==Number(myUserId)" type="warning" @click="addGroupUser(groupSearchUser)" >移除</el-button>
                  <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)" disabled>移除</el-button>
                </div>
              </div>
              <!--搜索用户弹出框 end------------------------------------------------------------>
            </div>
            <!--通讯录列表 start------------------------------------------------------------>
            <div class="searchUserBox">
              <!-- <div class="searchNameEnglish">A</div> -->
              <!--群主-->
              <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)==Number(myUserId)">
                <!-- {{ item.friend_id }}
                {{ creatorId }} -->
                <!-- <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox> -->
                <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId)"></el-checkbox>
                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                <img src="@/assets/chat/user/admin.png" v-else>
                <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                <div class="searchUserName" v-else>
                  {{item.user_name}}
                </div>
              </div>
              <!--非群主-->
              <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)!=Number(myUserId)">
                <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId) || isGroupUser(item.friend_id)"></el-checkbox>
                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                <img src="@/assets/chat/user/admin.png" v-else>
                <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                <div class="searchUserName" v-else>
                  {{item.user_name}}
                </div>
              </div>
            </div>
            <!--通讯录列表 end------------------------------------------------------------>
          </div>
          <div class="searchWindowRight">
            <div class="searchWindowRightTop">
              <div class="searchWindowRightTitle">编辑群聊</div>
              <div class="searchWindowRightNum">已选择{{groupUserList.length}}个联系人</div>
            </div>
            <div class="searchWindowUserList">
              <div class="searchWindowUserItem" v-for="(item,index) in groupUserList" :key="index" v-if="item.status==true">
                <div class="searchWindowUserIcon">
                  <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                  <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
                  <div class="searchWindowDeleteUser" @click="editRemoveGroupUser(item.user_id)" v-if="Number(creatorId)==Number(myUserId)&&item.user_id!=myUserId">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
                <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                <div class="searchWindowUserName" v-else-if="item.user_name!=null&&item.user_name!=''">{{item.user_name}}</div>
                <div class="searchWindowUserName" v-else>未知用户</div>
              </div>
            </div>
            <div class="searchWindowFooter">
              <el-button type="info" @click="cancelEditGroupMember">取消</el-button>
              <el-button type="primary" @click="saveEditGroupMember" :disabled="groupUserList.filter(item=>item.status).length<=2">完成</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
      <!--编辑群成员弹出框 end------------------------------------------------------------>
      <!--群名称弹出框 start------------------------------------------------------------>
      <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
        <div>
          <div>
            <el-input type="textarea" resize="none" v-model="editMessageTitle" placeholder="请输入" maxlength="20"></el-input>
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="editGroupNameWindow=false">取消</el-button>
            <el-button type="primary" @click="editGroupName">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--群名称弹出框 end------------------------------------------------------------>
            <!--群公告弹出框 start------------------------------------------------------------>
            <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :close-on-click-modal="false" width="420px">
        <div>
          <div>
            <el-input type="textarea" resize="none" v-model="editGroupProfile" placeholder="请输入" rows="10" maxlength="500"></el-input>
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="editGroupNoticeWindow=false">取消</el-button>
            <el-button type="primary" @click="editGroupNotice">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--群公告弹出框 end------------------------------------------------------------>
  
      <!--查看群公告 start------------------------------------------------------------>
      <el-dialog :visible.sync="groupProfileWindow" title="群公告详情" :close-on-click-modal="false" width="420px">
        <div>
          <div class="groupProfileBox">
            {{groupProfile}}
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="groupProfileWindow=false">关闭</el-button>
          </div>
        </div>
      </el-dialog>
      <!--查看群公告 end------------------------------------------------------------>
            <!--分享名片 start------------------------------------------------------------>
            <el-dialog :visible.sync="userCardWindowStatus" title="分享名片" :close-on-click-modal="false" width="420px">
        <div>
          <div class="shareCardWindowBox">
            <el-tabs v-model="shareTableActive" type="card" @tab-click="handleClickShareCard">
              <el-tab-pane label="分享给朋友" name="friend">
                <div class="shareCardWindowBoxMain">
                  <div v-for="item in friendsList" :key="item.id" class="shareCardRadioBox" >
                    <el-radio :label="item.friend_id" v-model="useShareUserId">
                      <input type="hidden" :value="item.friend_id">
                    </el-radio>
                    <div class="shareCardItem">
                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                      <img src="@/assets/chat/user/admin.png" v-else>
                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                      <div class="shareCardName" v-else>{{item.user_name}}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="分享到群聊" name="group">
                <div class="shareCardWindowBoxMain">
                  <div v-for="item in groupConversationList" :key="item.receiver_id" class="shareCardRadioBox" >
                    <el-radio :label="item.receiver_id" v-model="shareGroupId">
                      <input type="hidden" :value="item.receiver_id">
                    </el-radio>
                    <div class="shareCardItem">
                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                      <img src="@/assets/chat/user/group.jpg" v-else>
                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                      <div class="shareCardName" v-else>{{item.name}}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="userCardWindowStatus=false">取消</el-button>
            <el-button type="primary" @click="shareCard">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--分享名片 end------------------------------------------------------------>
        
      <!--发送好友申请弹出框 start------------------------------------------------------------>
      <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
        <div>
          <div>
            <el-form :model="form" ref="form" autocomplete="off" label-position="left">
              <div class="formDiv">
                <el-form-item label="验证消息：" :label-width="formLabelWidth" class="custom-align-right">
                  <el-input v-model="addform.remark" autocomplete="off"  placeholder="请输入"></el-input>
                </el-form-item>
              </div> 
            </el-form>
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="addFriendWindowStatus=false">取消</el-button>
            <el-button type="primary" @click="addMyFriend">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--发送好友申请弹出框 end------------------------------------------------------------>

      <!--加入群聊弹出框 start------------------------------------------------------------>
      <el-dialog :visible.sync="addGroupWindow" title="加入群聊" :close-on-click-modal="false" width="420px">
        <div class="addGroupWindow">
          <div class="addGroupWindowImg">
            <img src="@/assets/chat/user/group.jpg" alt="">
          </div>
          <div class="addGroupWindowTitle">{{groupInviteInfo.group_name}}</div>
          <div class="addGroupWindowText">加入"{{groupInviteInfo.group_name}}"群聊，点击可查看该群消息</div>
          <div class="footerButtonBox">
            <el-button type="info" @click="addGroupWindow = false">取消</el-button>
            <el-button type="primary" @click="joinGroup">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--加入群聊弹出框 end------------------------------------------------------------>
      <el-dialog
          :visible.sync="searchConversationStatus" 
          title=" "
          :close-on-click-modal="false"
          width="420px"
        >
        <div class="searchFriendBox" >
              <div class="searchFriendItem">
                <div class="searchFriendAvatar" v-if="selectConversationItem.group_name==null">
                  <img :src="selectConversationItem.avatar" v-if="selectConversationItem.avatar!=null&&selectConversationItem.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="searchFriendAvatar" v-else>
                  <img src="@/assets/chat/user/group.jpg">
                </div>
                <div class="searchFriendInfo">
                  <div class="searchFriendName">
                    <div class="searchFriendNameText" v-if="selectConversationItem.group_name==null">{{selectConversationItem.user_name}}</div>
                    <div class="searchFriendNameText" v-else>{{selectConversationItem.group_name}}</div>
                  </div>
                  <div class="searchFriendPhone" v-if="selectConversationItem.group_name==null">账号：{{selectConversationItem.user_name}}</div>
                  <div class="searchFriendPhone" v-else>多人群组</div>
                </div>
              </div>
              <div class="searchFriendButton">
                <el-button type="primary" @click="selectConversation(selectConversationItem)">发送消息</el-button>
              </div>
            </div>
      </el-dialog>
      <!--请求验证弹出框 start------------------------------------------------------------>
      <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
        <div>
          <div class="friendWindowText">
            <!--此处修改备注是没用的，修改备注需要friendId，但是此时你们还不是好友，改不了备注-->
            <!-- <el-form :model="form" ref="form" autocomplete="off" label-position="left">
              <div class="formDiv">
                <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
                  <el-input v-model="form.remark" autocomplete="off" placeholder="请输入备注名.."></el-input>
                </el-form-item>
              </div> 
            </el-form> -->
            确定要添加<span>{{friendInfo.user_name}}</span>为好友吗？
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="friendWindowStatus=false">取消</el-button>
            <el-button type="primary" @click="addFriend">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--请求验证弹出框 end------------------------------------------------------------>
      <!--修改备注弹出框 start------------------------------------------------------------>
      <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
        <div>
          <div>
            <el-form :model="form" ref="form" autocomplete="off" label-position="left">
              <div class="formDiv">
                <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
                  <el-input v-model="remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
                </el-form-item>
              </div> 
            </el-form>
          </div>
          <div class="footerButtonBox">
            <el-button type="info" @click="editWindowStatus=false">取消</el-button>
            <el-button type="primary" @click="editFriend">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!--修改备注弹出框 end------------------------------------------------------------>
      <el-dialog :visible.sync="searchWindowStatus" title="聊天记录" :close-on-click-modal="false" width="420px" :modal="false">
        <div class="searchFriendBox">
              <div class="searchFriendItem">
                <div class="searchFriendAvatar">
                  <img :src="searchFriendList.avatar" v-if="searchFriendList.avatar!=''">
                  <img src="@/assets/chat/user/admin.png" v-else>
                </div>
                <div class="searchFriendInfo">
                  <div class="searchFriendName">
                    <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
                    <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
                  </div>
                  <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
                </div>
              </div>
              <div class="searchFriendButton">
                <el-button type="primary" v-if="searchFriendList.showBtn==false&&searchFriendList.id!=this.$store.state.user.userid" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
                <el-button type="danger" v-else-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
                <el-button type="primary" disabled v-else>添加到通讯录</el-button>
              </div>
            </div>
      </el-dialog>
    </div>
   
  </template>
  
<script>
  //引入组件
  import hallTitle from './components/hallTitle.vue';
  import contactsTitle from './components/contactsTitle.vue';
  import baseUrl from '@/utils/baseUrl';
  export default {
    components: {
      hallTitle,
      contactsTitle
    },
    name: "ChatPanel",
    data() {
      return {
        ones:0,
        messageContent:{},
        avatar:this.$store.state.user.avatar,
        showfrindDialog:false,
        activeTab: 0,
        groupList: [],
        contactList: [],
        showDialog:false,
         //1.全局配置 start---------------------------------------->
         myUserId:'',//我的用户id
        tableTitleName:'聊天列表',//左侧菜单标题
        messageTitle:'',//当前的聊天名称
        editMessageTitle:'',//正在编辑的聊天名称  
        groupProfile:'',//当前的群公告
        editGroupProfile:'',//正在编辑的群公告
        groupProfileWindow:false,//群公告弹出框
        listTimeOut:null,//定时器
        addFriendWindowStatus:false,//添加好友弹出框
        addform:{
          friend_id:'',//好友id
          remark:'',//备注名
        },
        formLabelWidth:'100px',
        imgZoomStatus:false,//图片放大框
        imgZoomUrl:'',//图片放大框的图片地址
        //1.全局配置 end---------------------------------------->
  
        //2.会话列表 start---------------------------------------->
        hallLeftLoading:false,//左侧加载中
        hallRightLoading:false,//右侧加载中
        conversationList:[],//会话列表
        groupConversationList:[],//群聊会话列表
        selectConversationItem:{},//选择会话
        searchConversationStatus:false,//搜索会话状态
        chatrecords:[],//聊天记录
        ifTop:false,//是否为置顶
        searchConversation:'',//搜索会话
        //2.会话列表 end---------------------------------------->
  
        //3.聊天记录 start---------------------------------------->
        receiverId:'',//接收消息的id
        receiverType:'',//接收消息的类型 1单聊 2群聊
        ifNoMessage:true,//如果没有选择任何聊天记录
        searchChatRecords:"",//搜索聊天记录
        userMessage:'',//用户发送的消息
        fileWindowStatus:false,//聊天记录弹出框是否显示
        activeName: 'all',//聊天记录选项卡
        time:'',//按照时间搜索
        //3.聊天记录 end---------------------------------------->
  
        //4.群聊 start---------------------------------------->
        //4.1 创建群聊
        groupWindowStatus:false,//添加聊天群组出框是否显示
        groupFriendsWindowStatus:false,//创建群聊时搜索框
        friendsList:[],//左侧好友列表
        searchFriendGroup:'',//搜索群聊的输入框绑定值
        groupFriendSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
        //4.2 加入群聊
        addGroupWindow:false,//加入群聊弹出框
        //4.2 编辑群聊
        groupId:'',//当前编辑的群聊的id
        creatorId:'',//群主id
        groupUserList:[],//群成员列表
        groupInfo:{},//群设置信息
        groupSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
        rightSlideBoxShow:false,//右侧菜单是否显示
        searchGroup:'',//搜索群聊的输入框绑定值
        editGroupNoticeWindow:false,//编辑群公告弹出框
        editGroupNameWindow:false,//编辑群名称弹出框
        groupEditWindowStatus:false,//编辑群成员弹出框
        groupEditMainWindowStatus:false,//编辑弹框中搜索人员
        searchUser:"",//右侧菜单的搜索框
        groupRightUserInfo:{},//直接从右侧群组菜单中搜索成员
        groupRightSearchWindow:false,//右侧群组详情弹出框
        //shareGroupMessage:"",//分享群聊的消息
        shareGroupWindowStatus:false,//分享群聊弹出框
        shareGroupActive:'friend',//分享名片选项卡
        shareGroupId:'',//要分享给谁
        useShareGroupInfo:{},//分享名片时选中的群组信息
        groupInviteInfo:{},//群邀请信息
        //4.群聊 end---------------------------------------->
  
        //6.名片 start---------------------------------------->
        //userCardMessage:'',//用户留言
        userCardWindowStatus:false,//用户名片弹出框
        shareTableActive:'friend',//分享名片选项卡
        useShareUserId:'',//分享名片时选中的用户id
        useShareUserInfo:{},//分享名片时选中的用户信息
        //6.名片 end---------------------------------------->
  
        //7.加好友 start---------------------------------------->
        addUserWindowStatus:false,//添加用户弹出框是否显示
        form:{
          //好友申请
          addUserForm:{
            notes:"",//备注
            nickname:"",//修改昵称
          }
        },
        //7.加好友 end---------------------------------------->
  
        //8.发消息 start---------------------------------------->
        sendMessage:{
          img:{
            imgUrl:'',//图片地址
            oldFileName:"",//文件名
          },
          file:{
            fileUrl:'',
            oldFileName:"",//文件名
          }
        },


        //1.全局配置 start------------------------------------------------------------>
        tableTitleName:'通讯录',
        pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
        formLabelWidth:"100px",//表单label宽度
        searchUserName:"",//搜索新添加用户
        searchUserListName:"",//搜索好友列表
        friendId:"",//要添加的好友id
        friendWindowStatus:false,//通过朋友申请弹出框
        searchWindowStatus:false,//搜索窗口左侧弹出框
        searchUserWindowStatus:false,//搜索好友列表弹出框
        editWindowStatus:false,//修改备注弹出框
        addFriendWindowStatus:false,//发送好友申请弹出框
        editFriendId:"",//要编辑的好友
        getFriendApplyListStatus:null,//获取好友申请列表状态
        //1.全局配置 end------------------------------------------------------------>
        //2.好友列表 start------------------------------------------------------------>
        userFriendList:[],//好友列表
        userApplyList:[],//好友申请列表
        searchFriendList:"",//搜索好友列表
        //2.好友列表 end------------------------------------------------------------>
        //3.通过好友申请 start------------------------------------------------------------>
        form:{
          //好友的用户id
          id:"",
          //好友id
          friend_id:"",
          //好友申请
          remark:"",
          //状态
          status:2,
          //申请id
          apply_id:""
        },
        //3.通过好友申请 end------------------------------------------------------------>
        //4.编辑好友 start------------------------------------------------------------>
        friendInfo:{},//好友信息
        remark:"",//修改的用户备注
        //4.编辑好友 end------------------------------------------------------------>
        //5.发送好友申请 start------------------------------------------------------------>
        addform:{
          //好友id
          friend_id:"",
          //好友申请
          remark:"",
        },
      };
    },
    computed: {
      tabList() {
        return [

          { key: "user-solid", icon: require('@/assets/chat/huihua.png'), active: require('@/assets/chat/huihua_select.png') },
          { key: "user", icon: require('@/assets/chat/tongxl.png'), active: require('@/assets/chat/tongxl_select.png') },
        ];
      }
    },
    methods: {
      clickShowMessage() {
        // 先关闭所有旧消息
        this.$message.closeAll();

        this.$message({
          dangerouslyUseHTMLString: true,
          message: `
            <div
              class="my-custom-message"
              style="display:flex;align-items:center;background:#fff !important;color:#000 !important;padding:8px 16px;border-radius:4px;cursor:pointer;border:none !important;box-shadow:none !important;">
              <img src="http://img.bjzxtw.org.cn/master/image/webp/chatinfo.png" style="width:24px;height:24px;margin-right:10px;" alt="info"/>
              <span>收到新消息</span>
            </div>
          `,
          duration: 3000,
        });

        setTimeout(() => {
          const el = document.querySelector('.my-custom-message');
          if (el) {
            el.onclick = () => {
              this.onCustomMessageClick();
            };
          }
        }, 50);
      },
      onCustomMessageClick() {
        if(this.messageContent.receiver_id && this.messageContent.receiver_id.length==18){
          this.selectGroup(this.messageContent);
        }else{
          this.selectConversation(this.messageContent);
        }
        console.log('自定义消息弹窗被点击了');
      },
      //1.会话列表 start---------------------------------------->
      //1.1获取会话列表
      getConversationList(){
        this.$store.dispatch('chat/getConversation',{}).then(res=> {
          console.log(res)
          let data = res.data;
          for(let item of data){
            item.status = 0; //默认未选中
          }
          this.conversationList = data;
          
          this.hallLeftLoading = false;
        }).catch(() => {
          this.$message.error('获取会话列表失败!')
        })
      },
      //1.2选择会话
      selectConversation(item){
        this.showDialog = true;
        console.log("发送消息消息体2：",item)
        //选择会话的时候开启loading框
        this.hallRightLoading = true;
        //关闭右侧详情框
        this.closeRightDetailWindow();
        //使用receiverId判断当前是哪个会话
        this.receiverId = item.receiver_id;
        //会话类型 = 1 单聊
        this.receiverType = 1;
        //分享名片时需要使用用户的头像和名称
        this.useShareUserInfo = item;
        //关闭搜索会话搜索框
        this.closeSearchConversation();
        //清理单聊状态
        this.conversationList.forEach(conversation => {
          conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
          if(conversation.receiver_id === item.receiver_id){
            //当前的聊天名称
            this.messageTitle = item.user_name;
          }
        });
        //console.log(this.conversationList)
        this.getchatrecords(item.receiver_id);
        //关闭没有选择任何聊天的界面
        this.ifNoMessage = false;
        //选择单聊的时候把群聊的id清空
        this.groupId = '';
      },
      //1.3获取聊天记录
      getchatrecords(user_id){
        //此处增加一个show_id 用于后端判断如何积累未读消息 注意，选择group的方法在下面
        this.$store.dispatch('chat/getChatRecords',{friend_id:user_id}).then(res=> {
          console.log(res)
          this.chatrecords = res.data.data;
          //滚动条滚动到底部
          this.scorllBottom();
          console.log(this.chatrecords)
          //选择会话后关闭loading框
          this.hallRightLoading = false;
        }).catch(() => {
          this.$message.error('获取聊天记录失败!')
          //选择会话后关闭loading框
          this.hallRightLoading = false;
        })
      },
      //1.4搜索会话
      searchUserConversation(){
        this.selectConversationItem = {};
        let flag = false; //是否找到会话
        //当group_name等于搜索内容的时候，选择会话
        for(let item of this.conversationList){
          if(item.group_name==this.searchConversation||item.user_name==this.searchConversation){
            this.selectConversationItem = item;
            flag = true;
          }
        }
        //如果没有找到会话 就提示没有找到
        if(!flag){
          this.$message.error('没有找到该会话!')
        }else{
          this.searchConversationStatus = true;
        }
      },
      //1.5关闭搜索会话
      closeSearchConversation(){
        this.selectConversationItem = {};
        this.searchConversationStatus = false;
      },
      //1.6 搜索并定位聊天记录
      searchChatRecordsUser() {
        // 获取输入的内容
        const searchTerm = this.searchChatRecords.toLowerCase();
        // 查找匹配的消息
        const matchingItem = this.chatrecords.find(item => {
          return item.content.toLowerCase().includes(searchTerm);
        });
  
        // 如果找到匹配的消息，滚动到该消息
        if (matchingItem) {
          const index = this.chatrecords.indexOf(matchingItem);
          this.$nextTick(() => {
            const messageElements = this.$refs.fileWindowMessageScrollBox.children;
            if (messageElements[index]) {
              messageElements[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
          });
        } else {
          this.$message.error('聊天信息不存在！'); // 提示用户
        }
      },
      //1.7 从通讯录进入会话大厅
      retrieveSession(){
        console.log("开始执行retrieveSession方法！")
        //1.获取会话列表
        this.$store.dispatch('chat/getConversation',{}).then(res=> {
          //2.查询当前会话中是否已经存在该好友的会话
          let data = res.data;
          let SeleteItem = {};
          let flag = false;//对话是否已经存在
          for(let item of data){
            //3.如果会话中含有该好友的会话，则选中该会话
            if(item.receiver_id == this.$route.query.friend_id){
              item.status = 1;
              SeleteItem = item;
              flag = true;
            }else{
              item.status = 0;
            }
          }
          //4.更新会话列表
          this.conversationList = data;
          //5.判断对话是否已经在会话列表中存在
          if(flag==true){
            console.log("会话存在！选中会话！")
            //6.如果存在，则选中该会话
            this.selectConversation(SeleteItem)
          }else{
            console.log("会话不存在！创建单聊！")
            //7.如果不存在，则创建单聊
            this.createSession();
          }
          //8.循环更新会话列表
          this.forSearchConversationList();
        }).catch(() => {
          this.$message.error('获取会话列表失败!')
        })
      },
      //1.8 创建单聊
      createSession(){
        //console.log(this.$route.query.friend_id)
        const currentDateTime = new Date();
        const formattedDateTime = currentDateTime.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
        console.log("当前时间（北京时间）:", formattedDateTime);
        const message = { 
          talk_type:1,//当前的会话类型
          //receiver_id:this.$route.query.friend_id,//当前的会话id
          receiver_id:this.createMessageId,//当前的会话id
          content:"我于" + formattedDateTime + "创建了一个会话",//用户发发送的消息
          msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
        };
        //console.log(message)
        //发送消息
        let that = this;
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          //打开左侧loading防止重复点击
          this.hallLeftLoading = true;
          this.ws.send(JSON.stringify(message));
  
          //bug
          //如果双方不是好友，此处可以弹出错误
  
          //2秒后搜索会话列表 防止创建失败
          setTimeout(() => {
            that.$store.dispatch('chat/getConversation',{}).then(res=> {
              //查询当前会话中是否已经存在该好友的会话
              let data = res.data;
              let SeleteItem = {};
              let flag = false;//对话是否已经存在
              for(let item of data){
                //如果会话中含有该好友的会话，则选中该会话
                if(item.receiver_id == this.createMessageId){
                  item.status = 1;
                  SeleteItem = item;
                  flag = true;
                }else{
                  item.status = 0;
                }
              }
              //更新会话列表
              that.conversationList = data;
              //关闭loading层
              that.hallLeftLoading = false;
              //判断对话是否已经在会话列表中存在
              if(flag==true){
                //如果存在，则选中该会话
                that.selectConversation(SeleteItem)
              }else{
                that.$message.error('创建会话失败，请重新从通讯录发起会话！')
              }
              
            }).catch(() => {
              that.$message.error('获取会话列表失败!')
            })
          }, 2000);
  
        }else{
          this.$message.error('WebSocket连接失败!创建会话失败！')
        }
      },
      //1.9 循环更新会话列表
      forSearchConversationList(){
        let that = this;
        this.listTimeOut = setInterval(() => {
          //刷新时先判断是否有选中的会话
          if(that.receiverId!=''){
            //如果不为空,说明用户选择了某一个会话，此时需要修改会话列表中该会话的状态
            this.$store.dispatch('chat/getConversation',{}).then(res=> {
              console.log(res)
              let data = res.data;
              for(let item of data){
                if(item.receiver_id==that.receiverId){
                  item.status = 1;
                }else{
                  item.status = 0;
                }
              }
              this.conversationList = data;
              console.log("开始获取会话列表，将于8秒后再次获取！")
            }).catch(() => {
              this.$message.error('获取会话列表失败!')
            })
  
          }else{
            //如果为空，说明用户没有选择任何会话，此时可以直接请求列表
            that.getConversationList();
          }
        }, 7000);
      },
      //1.10 查询会话列表中是否存在会话，不存在就创建
      searchConversationIfCreate(user_id){
        //从会话列表中找到receiver_id于user_id相同的会话
        let flag = false;
        for(let item of this.conversationList){
          if(item.receiver_id==user_id){
            flag = true;
          }
        }
        //第一种情况：两人是好友，且会话已经创建了
        if(flag){
          //给与右侧展示列表的id
          this.groupRightUserInfo.receiver_id = String(user_id);
          this.groupRightUserInfo.user_id = String(user_id);
          this.selectConversation(this.groupRightUserInfo)
          this.rightSlideBoxShow = false;
          this.groupRightSearchWindow = false;
        }else{
          //第二种情况：两人是好友但是不存在对话
          //console.log("不存在这个会话，创建单聊")
          this.createMessageId = user_id;
          this.createSession();
        }
      },
      //1.会话列表 end---------------------------------------->
  
      //2.群聊 start---------------------------------------->
      //2.1 创建群聊
      //2.1.1 打开群聊创建窗口
      creatGroup(){
        this.groupWindowStatus = true;
        //获得好友列表
        this.getFriendsList();
      },
      //2.1.2 左侧菜单获取好友列表
      getFriendsList(){
        this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
          console.log(res)
          for(let item of res.data){
            item.status = false; //默认未选中
          }
          this.friendsList = res.data;
        }).catch(() => {
          this.$message.error('获取好友列表失败!')
        })
      },
      //2.1.3 左侧菜单取消选择好友
      cancelSelectFriends(id){
        this.friendsList.forEach(item => {
          if(item.id == id){
            item.status = false;
          }
        });
      },
      //2.1.4 清空并关闭创建群弹出框
      clearCreatGroupWindow(){
        this.friendsList.forEach(item => {
          item.status = false;
        });
        this.groupWindowStatus = false;
      },
      //2.1.5 创建群
      createForGroup(){
        let data = {
          group_name:"",//群聊名称
          group_desc:"仅群主可以修改",//群聊公告
          group_avatar:"",//群聊头像
          group_member:""//群成员
        }
        //从friendsList找出用户选择的联系人，然后创建群组
        //先把我自己放进去
        data.group_member = this.myUserId + ",";
        //然后循环添加其他用户
        this.friendsList.forEach(item => {
          if(item.status){
            data.group_member += item.friend_id + ",";
          }
          data.group_name = this.friendsList
            .filter(item => item.status)
            .slice(0, 3) // 只取前三个
            .map(item => item.remark !== null ? item.remark : item.user_name)
            .join(", ") // 使用逗号和空格分隔
        });
        data.group_member = data.group_member.slice(0,-1);//掉最后一个字符
  
        //console.log(data)
        this.$store.dispatch('chat/addGroup',data).then(res=> {
          this.$message.success('创建群聊成功!')
          //完成后关闭弹出框
          this.clearCreatGroupWindow();
          //重新获取会话列表
          this.getConversationList();
        }).catch(() => {
          this.$message.error('创建群聊失败!')
        })
      },
      //2.1.6 建群时搜索群成员
      searchFriendGroupUser(){
        this.groupFriendSearchUser = {};
        let flag = false; //是否找到成员
        for(let item of this.friendsList){
          if(item.user_name==this.searchFriendGroup||item.remark==this.searchFriendGroup){
            this.groupFriendSearchUser = item;
            flag = true;
          }
        }
        console.log(this.searchGroup)
        console.log(this.friendsList)
        console.log(flag)
  
        console.log(this.groupFriendSearchUser)
        //this.searchGroup 搜索的内容
        //this.groupEditWindowStatus 弹出框状态
        //this.groupSearchUser 搜索出来的成员
        if(!flag){
          this.$message.error('没有找到该成员!')
        }else{
          this.groupFriendsWindowStatus = true;
        }
      },
      //2.1.7 把用户添加到选择框里面
      addSearchFriendWindow(){
        this.groupFriendSearchUser.status=!this.groupFriendSearchUser.status;
        this.closeSearchFriendWindow();
      },
      //2.1.7 关闭搜索弹出框
      closeSearchFriendWindow(){
        this.groupFriendsWindowStatus = false;
      },
  
      //2.2 选择群聊
      //2.1.1 在会话列表中选择一个群聊
      selectGroup(item){
        this.$fixModalZIndex();
        this.showDialog = true;
        //选择会话的时候开启loading框
        this.hallRightLoading = true;
        //关闭右侧详情框
        this.closeRightDetailWindow();
        //使用receiverId判断当前是哪个会话
        this.receiverId = item.receiver_id;
        //会话类型 = 2 群聊
        this.receiverType = 2;
        //分享群聊时需要使用群名称和群id
        this.useShareGroupInfo = item;
        console.log("选择群聊")
        //清理单聊状态
        this.conversationList.forEach(conversation => {
          conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
        });
        console.log(item)
        //记录准备加入群聊的id
        this.groupId = item.receiver_id;
        //当前的聊天名称
        this.messageTitle = item.group_name;
        //关闭没有选择任何聊天的界面
        this.ifNoMessage = false;
        //获取群聊天信息
        this.getGroupChatRecords(item.receiver_id);
        //获取群设置信息
        this.getGroupSystem(item.receiver_id);
        //获取群成员
        this.getGroupMember(item.receiver_id);
      },
      //2.1.2 获取群聊消息
      getGroupChatRecords(group_id){
        this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
          console.log(res)
          this.chatrecords = res.data.data;
          //滚动条滚动到底部
          this.scorllBottom();
          //选择会话的时候开启loading框
          this.hallRightLoading = false;
  
        }).catch(() => {
          this.$message.error('获取群设置信息失败!');
          //选择会话的时候开启loading框
          this.hallRightLoading = false;
        })
      },
  
      //2.3 编辑群聊
      //2.3.1 打开右侧菜单设置窗口
      openGroupSystem(){
        this.rightSlideBoxShow = !this.rightSlideBoxShow;
      },
      //2.3.2 获取群设置群成员
      getGroupMember(group_id){
        this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
          for(let item of res.data){
            item.status = true; //默认选中
          }
          this.groupUserList = res.data;
        }).catch(() => {
          this.$message.error('获取群成员信息失败!')
        })
      },
      //2.3.3 获取群设置信息
      getGroupSystem(group_id){
        this.$store.dispatch('chat/getGroupInfo',{group_id:group_id}).then(res=> {
          console.log(res)
          this.groupInfo = res.data;
          this.creatorId = res.data.creator_id;
          this.messageTitle = res.data.group_name;
          this.editMessageTitle = res.data.group_name;
          if(res.data.profile==null){
            this.groupProfile = "暂无群公告"
          }else{
            this.groupProfile = res.data.profile;
            this.editGroupProfile = res.data.profile;
          }
          
        }).catch(() => {
          this.$message.error('获取群设置信息失败!')
        })
      },
      //2.3.4 右侧菜单退出群聊
      closeGroup(){
        this.$confirm('将要退出该群聊，确定吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning' 
        }).then(() => {
          //this.groupId
          this.$store.dispatch('chat/quitGroup',{group_id:this.groupId}).then(res=> {
            this.$message.success('退出群聊成功!')
            //关闭右侧菜单
            this.rightSlideBoxShow = false;
            //关闭右侧聊天界面
            this.ifNoMessage = true;
            //重新请求会话列表
            this.getConversationList();
  
          }).catch(() => {
            this.$message.error('群聊退出失败!')
          })
        }).catch(() => {
          this.$message.warning('已取消退出')
        });
      },
      //2.3.5 右侧菜单删除群聊
      delGroup(){
        this.$confirm('将要解散该群聊，确定吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          zIndex: 11000 // 新增，确保弹窗在最上层
        }).then(() => {
          //this.groupId
          this.$store.dispatch('chat/delGroup',{group_id:this.groupId}).then(res=> {
            this.$message.success('已解散群聊!')
            //关闭右侧菜单
            this.rightSlideBoxShow = false;
            //关闭右侧聊天界面
            this.ifNoMessage = true;
            //重新请求会话列表
            this.getConversationList();
  
          }).catch(() => {
            this.$message.error('解散群聊失败!')
          })
        }).catch(() => {
          this.$message.warning('已取消解散')
        });
      },
      //2.3.6 右侧菜单编辑群名称
      editGroupName(){
        let data = {
          group_id:this.groupId,
          group_name:this.editMessageTitle//群名称
        }
        this.$store.dispatch('chat/updateGroup',data).then(res=> {
          this.$message.success('成功修改群聊名称！');
          //重新获取群详情
          this.getGroupSystem(this.groupId);
          //重新获取会话列表
          this.getConversationList();
          this.editGroupNameWindow = false;
        }).catch(() => {
          this.$message.error('修改群聊名称失败!')
        })
      },
      //2.3.7 右侧菜单编辑群公告
      editGroupNotice(){
        let data = {
          group_id:this.groupId,
          profile:this.editGroupProfile//群公告
        }
        this.$store.dispatch('chat/updateGroup',data).then(res=> {
          this.editGroupNoticeWindow = false;
          this.$message.success('成功添加群公告')
          //重新获取群详情
          this.getGroupSystem(this.groupId)
          
        }).catch(() => {
          this.$message.error('编辑群公告失败!')
        })
      },
      //2.3.8 群弹出框回显群内成员
      editGroupMember(){
        //1.打开编辑窗口
        this.groupEditWindowStatus = true;
        //2.获得好友列表
        this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
          //3.设置成未选中
          for(let item of res.data){
            item.status = false; //默认未选中
          }
          this.friendsList = res.data;
          console.log(this.friendsList)
          console.log(this.groupUserList)
          //4.判断一下groupUserList是否包含friendsList中的成员，如果包含，就把friendsList中的成员status设置为true
          this.friendsList.forEach(item => {
            console.log(item.user_id)
            if(this.groupUserList.find(groupItem => groupItem.user_id == item.friend_id)){
              item.status = true;
            }
          });
          console.log(this.friendsList)
        }).catch(() => {
          this.$message.error('获取好友列表失败!')
        })
      },
      //2.3.9 群弹出框编辑群成员
      changeSelectFriends(item) {
        // 检查 groupUserList 是否包含 item
        const index = this.groupUserList.findIndex(i => i.user_id == item.friend_id);
        // 如果包含，就删除这个 item；否则，添加到 groupUserList
        // 注意不能直接把friend_id放进去,因为最后编辑保存的时候取的是user_id,这里要传一下值
        if (index !== -1) {
          this.groupUserList.splice(index, 1);
        } else {
          item.user_id = item.friend_id;
          this.groupUserList.push(item);
        }
      },
      //2.3.19 群弹出框取消编辑群成员
      cancelEditGroupMember(){
        this.groupEditWindowStatus = false;
        this.getGroupMember(this.groupId);
      },
      //2.3.20 群弹出框保存编辑群成员
      saveEditGroupMember(){
        let groupUser = []
        
        // console.log(this.myUserId)
        // console.log(this.groupUserList)
        //取出所有选择的user_id且不能与自己的id相同
        for(let item of this.groupUserList){
          if(Number(item.user_id) != Number(this.myUserId)){
            groupUser.push(item.user_id);
          }
        }
        groupUser = groupUser.join(',');
        //console.log(groupUser)
        let data = {
          group_id:this.groupId,
          group_member:groupUser
        }
        this.$store.dispatch('chat/updateGroupMembers',data).then(res=> {
          this.$message.success('群成员保存成功!')
          this.groupEditWindowStatus = false;
          this.getGroupMember(this.groupId);
        }).catch(() => {
          this.$message.error('群成员保存失败!')
          this.groupEditWindowStatus = false;
          this.getGroupMember(this.groupId);
        })
      },
      //2.3.21 群弹出框搜索群成员
      searchGroupUser(){
        this.groupSearchUser = {};
        let flag = false; //是否找到成员
        for(let item of this.friendsList){
          if(item.user_name==this.searchGroup||item.remark==this.searchGroup){
            this.groupSearchUser = item;
            flag = true;
          }
        }
        console.log(this.searchGroup)
        console.log(this.friendsList)
        console.log(flag)
        //this.searchGroup 搜索的内容
        //this.groupEditWindowStatus 弹出框状态
        //this.groupSearchUser 搜索出来的成员
        if(!flag){
          this.$message.error('没有找到该成员!')
        }else{
          this.groupEditMainWindowStatus = true;
        }
  
      },
      //2.3.22 群弹出框添加群成员
      addGroupUser(item){
        item.user_id = item.friend_id;
        console.log(item)
        //找到friendsList中的该成员，把status设置为相反的值
        for(let item of this.friendsList){
          if(item.user_id==this.groupSearchUser.user_id){
            item.status = !item.status;
          }
        }
        // 找到groupUserList中是否存在该成员，如果存在就删除，没有不存在就添加
        const index = this.groupUserList.findIndex(member => member.user_id === item.user_id);
        if (index !== -1) {
          // 如果存在，删除该成员
          this.groupUserList.splice(index, 1);
        } else {
          // 如果不存在，添加该成员
          this.groupUserList.push(item);
        }
        //完成后关闭弹出框
        this.closeAddGroupUserWindow();
      },
      //2.3.23 群弹出框关闭弹出框
      closeAddGroupUserWindow(){
        this.searchGroup = "";
        this.groupSearchUser = {};
        this.groupEditMainWindowStatus = false;
      },
      //2.3.24 群弹出框移除群成员
      editRemoveGroupUser(id){
        console.log(id)
        //移除this.groupUserList中user_id与id一致的
        const index = this.groupUserList.findIndex(member => member.user_id === id);
        if (index !== -1) {
          this.groupUserList.splice(index, 1);
        }
        //找到friendsList中user_id与id一致的，把status设置为false
        for(let item of this.friendsList){
          if(item.friend_id==id){
            item.status = false;
          }
        }
      },
      //2.3.25 右侧菜单编辑成员
      rightSearchUser(){
        this.groupRightUserInfo = {};
        let flag = false; //是否找到成员
        for(let item of this.groupUserList){
          if(item.user_name==this.searchUser||item.remark==this.searchUser){
            this.groupRightUserInfo = item;
            flag = true;
          }
        }
        console.log(this.searchUser)
        console.log(this.groupUserList)
        console.log(flag)
        //this.searchGroup 搜索的内容
        //this.groupEditWindowStatus 弹出框状态
        //this.groupSearchUser 搜索出来的成员
        if(!flag){
          this.$message.error('没有找到该成员!')
        }else{
          //找到这个成员以后，需要先验证一下他俩是不是好友
          this.$store.dispatch('chat/isFriend',{friend_id:this.groupRightUserInfo.user_id}).then(res=> {
            console.log(res.data)//true false
            this.groupRightUserInfo.isFriend = res.data;
            //打开弹出框
            this.groupRightSearchWindow = true;
          }).catch(() => {
            this.$message.error('获取成员身份信息失败!')
          })
        }
      },
      //2.3.26 关闭弹出框
      closeRightSearchUser(){
        this.searchUser = "";
        this.groupRightUserInfo = {};
        this.groupRightSearchWindow = false;
      },
  
      //2.4 加入群聊
      //2.4.1 打开群聊邀请窗口
      openGroupInviteWindow(info){
        this.addGroupWindow = true;
        //info.content.split(',')[0] 群名称
        //info.content.split(',')[1] 群id
        //获得要加入的群聊详情
        console.log(info.content)
        this.groupInviteInfo.group_name = info.content.split(',')[0];
        this.groupInviteInfo.group_id = info.content.split(',')[1];
      },
      //2.4.2 加入群聊
      joinGroup(){
        this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
          if(res.code=='200'){
            this.$message.success('加入群聊成功!')
            this.addGroupWindow = false;
          }else{
            this.$message.error(res.message)
          }
        }).catch(() => {
          this.$message.error('加入群聊失败!')
        })
      },
      //2.4.3 打开分享群聊弹出框
      openShareMyGroup(){
        //群组聊天数据初始化
        this.groupConversationList = [];
        //打开名片弹出框
        this.shareGroupWindowStatus = true;
        // shareGroupWindowStatus:false,//分享群聊弹出框
        // shareGroupActive:'friend',//分享名片选项卡
        // shareGroupId:'',//要分享的群聊id
        // useShareGroupInfo:{},//分享名片时选中的群组信息
        //默认获取一下好友列表
        this.getFriendsList();
        //把群聊提出来单独放到一个数组
        for(let item of this.conversationList){
          if(item.is_group==1){
            this.groupConversationList.push(item);
          }
        }
      },
      //2.4.4 分享群聊
      shareMyGroup(){
        console.log(this.shareGroupId)
        if(this.shareGroupId!=''){
          let message = {};
          console.log(this.useShareGroupInfo)
          let userInfo = [this.useShareGroupInfo.group_name,this.useShareGroupInfo.receiver_id];
          let userInfoString = userInfo.join(',');
          
          if(this.shareGroupActive=='friend'){
            //单聊
            message = { 
              talk_type:1,
              receiver_id:this.shareGroupId,
              msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
            };
            message.content = userInfoString;
          }else if(this.shareGroupActive=='group'){
            //群聊
            message = { 
              talk_type:2,
              receiver_id:this.shareGroupId,
              content:userInfo,
              msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
            };
            message.content = userInfoString;
          }
  
          console.log(message)
          //发送消息
          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message));
          }
          //关闭分享弹出框
          this.shareGroupWindowStatus = false;
          this.$message.success('分享名片成功!')
        }else{
          this.$message.error('请选择分享对象!')
        }
      },
      handleClickShareGroupCard(tab, event) {
        const tabName = tab.name;
        console.log("当前选中的tab name:", tabName);
        this.shareGroupActive = tabName;
      },
      //2.4.5 判断该成员是否在群聊中
      isGroupUser(id){
        let flag = false;
        for(let item of this.groupUserList){
          if(item.user_id==id){
            flag = true;
          }
        }
        return flag;
      },
      //2.群聊 end---------------------------------------->
  
      //3.全局应用 start---------------------------------------->
      //3.1 滚动条滚动到底部
      scorllBottom(){
        //滚动条滚动到底部
        this.$nextTick(() => {
          const rightUserMessageBox = this.$refs.rightUserMessageBox;
          if (rightUserMessageBox) {
            rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
          }
        });
      },
      //3.2 添加好友
      addFriendShow(id){
        console.log("添加好友:",id)
        this.addFriendWindowStatus = true;
        this.addform.friend_id = id;
      },
      addMyFriend(){
        this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
          if(res.code=='200'){
            this.$message.success("好友申请发送成功！")
            this.addFriendWindowStatus = false;
          }else{
            //this.$message.error(res.data)
            this.$message.error(res.message)
          }
        })
      },
      //3.3 关闭右侧详情框
      closeRightDetailWindow(){
        this.rightSlideBoxShow = false;
        this.groupRightSearchWindow = false;
        this.searchUser = "";
      },
      //3.全局应用 end---------------------------------------->
      
      //4.会话框 start---------------------------------------->
      //4.1上传
      //4.1.1上传图片
      beforeImgUpload(file) {
        //先清理一下上传的缩略窗口
        this.deFileUpload()
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG && !isPNG) {
          this.$message.error('发送的图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('发送的图片大小不能超过 2MB!');
          return false;
        }
  
        const formData = new FormData();
        formData.append('file', file);
  
        this.$store.dispatch('pool/uploadFile',formData).then(res=> {
          this.sendMessage.img.imgUrl = res.data.imgUrl;//获取上传的图片地址
          this.sendMessage.img.oldFileName = res.data.oldFileName;
          console.log(res.data.imgUrl)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '网络错误，请重试！'
          });
        })
  
        // 阻止默认的上传行为
        return false;
      },
      //4.1.2上传文件
      beforeFileUpload(file) {
        //先清理一下上传的缩略窗口
        this.deFileUpload()
        console.log(file)
        //允许的文件类型
        const isDoc = file.type === 'application/msword';
        const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        const isXls = file.type === 'application/vnd.ms-excel';
        const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        const isPptx = file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
        const isRar = file.type === 'application/x-rar-compressed';
        const isZip = file.type === 'application/x-zip-compressed';
        const isTxt = file.type === 'text/plain';
        const isPdf = file.type === 'application/pdf';
        //文件大小不能超过2M
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip && !isPdf) {
          this.$message.error('该文件类型不允许上传!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('发送的文件大小不能超过2M！');
          return false;
        }
  
        const formData = new FormData();
        formData.append('file', file);
  
        this.$store.dispatch('pool/uploadFile',formData).then(res=> {
          this.sendMessage.file.fileUrl = res.data.imgUrl;
          this.sendMessage.file.oldFileName = res.data.oldFileName;
          console.log(res.data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '网络错误，请重试！'
          });
        })
  
        // 阻止默认的上传行为
        return false;
      },
      //4.1.3 删除上传的文件
      deFileUpload(){
        this.sendMessage.img.imgUrl = "";
        this.sendMessage.img.oldFileName = "";
        this.sendMessage.file.fileUrl = "";
        this.sendMessage.file.oldFileName = "";
      },
      //4.会话框 end---------------------------------------->
      
      //5.websocket会话 start---------------------------------------->
      //5.1 接受消息
      handleIncomingMessage(event) {
        const message = JSON.parse(event.data);
        this.clickShowMessage();
        console.log("监听消息1：",message)
        if(this.ones==0){
          this.ones = 1
          this.getConversationList();          
        }
        console.log(message.receiver_id)
        this.conversationList.forEach(item => {
          if(item.receiver_id==message.receiver_id){
            console.log("当前消息属于当前的聊天窗口！")
            this.messageContent = message;
          }
        });
        // console.log(message.receiver_id.length == 18)
        //第一步：先判断是否为群消息
        if (message.receiver_id && message.receiver_id.length == 18) {
          //第二步：判断当前接收的消息是否显示到聊天框中
          if(Number(this.receiverId)==Number(message.receiver_id)){
            console.log("当前消息为群消息，并且可以显示到当前的会话框中！")
            //18位就是群聊
            if(Number(this.myUserId) == Number(message.user_id)){
              //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
              let receiveMessage = {
                action:"said",//自己说的
                user_avatar:message.user_avatar,//头像
                content:message.content,//内容
                msg_type:message.msg_type,//消息类型
              }
              console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
              console.log(message)
              //消息添加到聊天记录
              this.chatrecords.push(receiveMessage);
              // 确保 Vue 能够检测到数组的变化
              //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
              console.log(this.chatrecords)
              //滚动条滚动到底部
              this.scorllBottom();
            }else{
              let receiveMessage = {
                action:"recieved",//对方说的
                receiver_avatar:message.user_avatar,//头像
                content:message.content,//内容
                msg_type:message.msg_type,//消息类型
              }
              //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
              //消息添加到聊天记录
              console.log("来自单聊消息:"+this.receiverId,message.user_id)
              this.chatrecords.push(receiveMessage);
              console.log(message)
              //滚动条滚动到底部
              this.scorllBottom();
            }
          }else{
            console.log("当前消息为群消息，但是用户未开启此聊天窗口！")
          }
        }else{
          //当前的单聊消息是自己发的，回显到聊天框中
          if(Number(this.receiverId)==Number(message.receiver_id)){
            //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
            let receiveMessage = {
              action:"said",//自己说的
              user_avatar:message.user_avatar,//头像
              content:message.content,//内容
              msg_type:message.msg_type,//消息类型
            }
            console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
            console.log(message)
            //消息添加到聊天记录
            this.chatrecords.push(receiveMessage);
            // 确保 Vue 能够检测到数组的变化
            //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
            console.log(this.chatrecords)
            //滚动条滚动到底部
            this.scorllBottom();
          }else{
            //判断要回显的内容是不是在群聊
            if(message.receiver_id && Number(message.receiver_id.length) == 18){
              console.log("当前是单聊消息，你选择的是单聊框，可以回显！")
              let receiveMessage = {
                action:"recieved",//对方说的
                receiver_avatar:message.user_avatar,//头像
                content:message.content,//内容
                msg_type:message.msg_type,//消息类型
              }
              console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
              console.log(message)
              //消息添加到聊天记录
              this.chatrecords.push(receiveMessage);
              // 确保 Vue 能够检测到数组的变化
              //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
              console.log(this.chatrecords)
              //滚动条滚动到底部
              this.scorllBottom();
            }else{
              // console.log(this.receiverId)
              // console.log(message.receiver_id,message.user_id)
              // console.log("当前是单聊消息，但是你选择的是群聊框，该条消息不能回显！")
              if(this.receiverId!=message.receiver_id&&this.receiverId!=message.user_id){
                //收到单聊消息，但是单聊消息不属于当前的聊天窗口
                console.log("当前单聊消息不属于当前的聊天窗口，不回显！")
              }else{
                if(this.receiverId==message.user_id){
                  console.log("当前单聊消息属于当前的聊天窗口，回显！")
                  let receiveMessage = {
                    action:"recieved",//对方说的
                    receiver_avatar:message.user_avatar,//头像
                    content:message.content,//内容
                    msg_type:message.msg_type,//消息类型
                  }
                  console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
                  console.log(message)
                  //消息添加到聊天记录
                  this.chatrecords.push(receiveMessage);
                  // 确保 Vue 能够检测到数组的变化
                  //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
                  console.log(this.chatrecords)
                  //滚动条滚动到底部
                  this.scorllBottom();
                }
              }
            } 
  
  
            
          }
        }
      },
      // 5.2 发送消息
      sendUserMessage() {
        if (this.userMessage.trim() !== '') {
          const message = { 
            talk_type:this.receiverType,//当前的会话类型
            receiver_id:this.receiverId,//当前的会话id
            content:this.userMessage,//用户发发送的消息
            msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
          };
          //发送消息
          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message));
          }
          this.userMessage = '';
        }else{
          this.$message.error('消息不能为空！')
        }
      },
      // 5.3 发送图片或者文字
      sendUserMessageToFile() {

        if(this.sendMessage.img.imgUrl!=''){
          const message = { 
            talk_type:this.receiverType,//当前的会话类型
            receiver_id:this.receiverId,//当前的会话id
            content:this.sendMessage.img.imgUrl,//用户发发送的消息
            msg_type:2,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
          };
          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message));
            //发送完毕清除选择的图片
            this.sendMessage.img.imgUrl='';
          }
          //如果文本框不为空，把文本框内的消息也提交过去
          if(this.userMessage.trim()!=''){
            this.sendUserMessage();
          }
        }
        if(this.sendMessage.file.fileUrl!=''){
          //把名称和地址打包成一个对象
          const fileInfo = {
            file_url:this.sendMessage.file.fileUrl,
            oldFileName:this.sendMessage.file.oldFileName
          }
          const fileInfoString = JSON.stringify(fileInfo);
          //发送消息
          const message = { 
            talk_type:this.receiverType,//当前的会话类型
            receiver_id:this.receiverId,//当前的会话id
            content:fileInfoString,//用户发发送的消息
            msg_type:3,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
          };
          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message));
            //发送完毕清除选择的文件
            this.sendMessage.file.fileUrl='';
          }
          //如果文本框不为空，把文本框内的消息也提交过去
          if(this.userMessage.trim()!=''){
            this.sendUserMessage();
          }
        }
      },
      //5.4 打开名片弹出框
      openShareCard(){
        //群组聊天数据初始化
        this.groupConversationList = [];
        //打开名片弹出框
        this.userCardWindowStatus = true;
        //默认获取一下好友列表
        this.getFriendsList();
        //好友列表
        //this.friendsList 
        //会话列表
        //this.conversationList
        //把群聊提出来单独放到一个数组
        //this.groupConversationList
        for(let item of this.conversationList){
          if(item.is_group==1){
            this.groupConversationList.push(item);
          }
        }
      },
      //5.5 分享名片
      shareCard(){
        console.log(this.useShareUserId)
        if(this.useShareUserId!=''){
          let message = {};
          // let userInfo = {
          //   avatar:this.useShareUserInfo.avatar,
          //   user_name:this.useShareUserInfo.user_name,
          //   friend_id:this.receiverId
          // }
          let userInfo = [this.useShareUserInfo.avatar,this.useShareUserInfo.user_name,this.receiverId];
          let userInfoString = userInfo.join(',');
          
          if(this.shareTableActive=='friend'){
            //单聊
            message = { 
              talk_type:1,
              receiver_id:this.useShareUserId,
              msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
            };
            message.content = userInfoString;
          }else if(this.shareTableActive=='group'){
            //群聊
            message = { 
              talk_type:2,
              receiver_id:this.useShareUserId,
              content:userInfo,
              msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
            };
            message.content = userInfoString;
          }
  
          console.log(message)
          //发送消息
          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(message));
          }
          //关闭分享弹出框
          this.userCardWindowStatus = false;
          this.$message.success('分享名片成功!')
        }else{
          this.$message.error('请选择分享对象!')
        }
      },
      //5.6 切换分享名片
      handleClickShareCard(tab, event) {
        const tabName = tab.name;
        console.log("当前选中的tab name:", tabName);
        this.shareTableActive = tabName;
      },
      //5.7 下载文件
      downloadFile(item){
        let downloadData = JSON.parse(item.content);
        console.log(downloadData.file_url)
        if(downloadData.file_url!=''){
          const link = document.createElement('a');
          link.href = downloadData.file_url;
          link.setAttribute('download', 'downloaded_file'); // You can set a default file name here
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }else{
          this.$message.error('文件下载失败！')
        }
      },
      //5.8 图片放大
      imgZoom(url){
        this.imgZoomUrl = url;
        this.imgZoomStatus = true;
      },
      //5.9 创建链接 防止websocket意外中断
      getWebsocket(){
        //判断当前的route是否为/hall，否则不触发这个方法
        if(this.$route.path=="/hall"){
          this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
            confirmButtonText: '重新连接',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //强制刷新页面
            window.location.reload();
          }).catch(() => {
            //取消刷新
            this.$message.error("您的连接已中断！")
          });
        }else{
          console.log("前往其他页面，关闭ws！")
        }
      },
      //5.websocket会话 end---------------------------------------->

            //0.全局操作 start------------------------------------------------------------>
      //0.1切换页面状态
      tabPage(status){
        this.showfrindDialog = true;
        this.pagestatus = status;
        if(status==2){
          //如果是2 好友列表状态还原
          for(let item of this.userFriendList){
            item.status = 0;
          }
        }
        this.getFriendApplyList();
      },
      //0.全局操作 end------------------------------------------------------------>
      //1.好友列表 start------------------------------------------------------------>
      addUser(){
        this.pagestatus = 4;
      },
      closeAddUser(){
        this.pagestatus = 2;
        this.searchWindowStatus = false;
        this.searchUserName = "";
      },
      //1.1获取联系人列表
      getUserFriendList(){
        console.log("获取联系人列表##")
        //获取用户身份id
        //const userId = this.$store.state.user.userid;
        this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
          let data = res.data;
          console.log("=====:",data)
          for(let item of data){
            item.status = 0; //默认未选中
          }
          this.userFriendList = data;
        }).catch(() => {
          this.$message.error('获取好友列表失败!')
        })
      },
      //1.2选择联系人
      changeUserItem(id){
        for(let item of this.userFriendList){
          if(item.friend_id == id){
            item.status = 1;
          }else{
            item.status = 0;
          }
        }
        //切换页面到用户列表
        this.pagestatus = 3;
        this.showfrindDialog = true;
        //把要编辑的好友的id存起来
        this.editFriendId = id;
  
        // console.log(id)
        // console.log(this.userFriendList)
        //获取好友身份信息详情
        this.$store.dispatch('chat/getFriendInfo',{friend_id:this.editFriendId}).then(res=> {
          console.log(res)
          //保存好友信息
          this.friendInfo = res.data;
          this.remark = res.data.remark;
        }).catch(() => {
          this.$message.error('获得好友身份详情失败!')
        })
  
      },
      //1.3搜索联系人
      searchFriend(){
        //搜索联系人
        this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
          //获取到好友
          this.searchWindowStatus = false;
          console.log(res);
          if(res.code==200){
            if(res.data.length>0){
              this.searchWindowStatus = true;
              this.searchFriendList = res.data[0];
              //搜出来以后查询两人是否为好友
              this.searchIsFriend(this.searchFriendList)
  
            }else{
              this.$message.error('没有找到该联系人!')
            }
          }else{
            this.$message.error('搜索关键字不能为空!')
          }
        })
      },
      //1.3搜索好友列表中的好友
      searchOrdFriend(){
        if(this.searchUserListName==""){
          this.$message.error('搜索关键字不能为空!')
          return;
        }else{
          let isFriend = false;
          for(let item of this.userFriendList){
            if(item.user_name == this.searchUserListName){
              isFriend = true;
              this.searchFriendList = item;
            }
          }
          if(isFriend){
            this.changeUserItem(this.searchFriendList.friend_id)
            //console.log(this.searchFriendList);
          }else{
            this.$message.error('没有找到该联系人!')
          }
        }
      },
      //1.好友列表 end------------------------------------------------------------>
  
      //2.获得好友申请列表 start------------------------------------------------------------>
      //2.1 好友申请列表
      getFriendApplyList(){
        console.log("获取好友申请列表");
        const userId = this.$store.state.user.userid;
        this.$store.dispatch('chat/getFriendsApplyList',{user_id:userId}).then(res=> {
          this.userApplyList = res.data;
        }).catch(() => {
          this.$message.error('获取好友申请列表失败!')
        })
      },
      
      //2.2 接受好友申请
      addFriend(){
        //通过用户申请
        console.log(this.form);
        this.$store.dispatch('chat/applyFriend',this.form).then(res=> {
          if(res.code==200){
            this.showfrindDialog = false;
            this.$message.success('成功添加好友!')
            this.friendWindowStatus = false;
            //重新加载用户列表
            this.getUserFriendList();
            //清空右侧
            this.friendInfo = {};
            //this.pagestatus = 1;
            this.getFriendApplyListStatus();
          }
        })
      },
      
      //2.3 删除好友
      deleteFriend(id){
        console.log(id);
        if(id){
          this.editFriendId = String(id);
        }
        console.log(id)
        this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          zIndex: 11000, // 新增，确保弹窗在最上层
          modal: false // 移除蒙层
        }).then(() => {
          console.log(this.editFriendId);
          this.$store.dispatch('chat/delFriend',{friend_id:this.editFriendId}).then(res=> {
            this.$message.success('删除成功!')
            //关闭用户详情显示
            this.pagestatus = 1;
            //重新装在用户列表
            this.getUserFriendList();
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });
        });
      },
      //2.4 编辑好友
      editFriend(){
        let data = {
          friend_id:this.editFriendId,
          remark:this.remark
        }
        //this.editFriendId
        this.$store.dispatch('chat/updateFriend',data).then(res=> {
          if(res.code==200){
            this.showfrindDialog = false;
            this.$message.success('修改备注名成功!')
            this.pagestatus = 1;
            this.editWindowStatus = false;
            this.getUserFriendList();
            this.remark = "";
          }else{
            this.$message.error(res.message)
          }
        }).catch(() => {
          this.$message.error('修改备注名失败!')
        })
      },
      //2.5 发送好友申请
      addMyFriend(){
        console.log(this.addform);
        this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
          this.$message.success("已成功发送好友申请！")
          this.addFriendWindowStatus = false;
          this.searchWindowStatus = false;
          this.addform.remark = "";
        })
      },
      //2.6 查询是否是好友
      searchIsFriend(item){
        let data = {
          friend_id:item.isfriend
        }
        console.log(data);
        this.$store.dispatch('chat/isFriend',data).then(res=>{
          console.log(res);
          if(res.code==0&&res.message=="不是好友"){
            this.searchFriendList.showBtn = false;
          }else{
            this.searchFriendList.showBtn = true;
          }
          this.$forceUpdate();
        })
      },
      //2.7 定时查询好友申请状态
      setTimeFriendApplyList(){
        console.log("定时查询好友申请状态");
        let that = this;
        this.getFriendApplyListStatus = setInterval(()=>{
          that.getFriendApplyList();
        },5000)
      },
      //2.获得好友申请列表 end------------------------------------------------------------>
  
      //3.操作弹出框 start------------------------------------------------------------>
      //用户菜单操作
      openWindow(item){
        this.form.id = item.id;
        this.form.friend_id = item.friend_id;
        this.friendInfo = item;
        //打开弹出框
        this.friendWindowStatus = true;
      },
      openEditWindow(id){
        //打开修改备注弹出框
        this.editWindowStatus = true;
      },
      openAddWindow(id){
        console.log(id);
        this.addform.friend_id = String(id);
        this.addFriendWindowStatus = true;
      },
      //发送消息===
      sendMessageToFriend(item){
        this.showfrindDialog = false;
        this.showDialog = true;
        console.log("发送消息消息体1：",item)
        //选择会话的时候开启loading框
        this.hallRightLoading = true;
        //关闭右侧详情框
        this.closeRightDetailWindow();
        //使用receiverId判断当前是哪个会话
        this.receiverId = item.friend_id;
        //会话类型 = 1 单聊
        this.receiverType = 1;
        //分享名片时需要使用用户的头像和名称
        this.useShareUserInfo = item;
        //关闭搜索会话搜索框
        this.closeSearchConversation();
        //清理单聊状态
        // this.conversationList.forEach(conversation => {
        //   conversation.status = (conversation.receiver_id === item.friend_id) ? 1 : 0;
        //   if(conversation.receiver_id === item.friend_id){
        //     //当前的聊天名称
        //     this.messageTitle = item.user_name;
        //   }
        // });
        this.messageTitle = item.user_name;
        //console.log(this.conversationList)
        this.getchatrecords(item.friend_id);
        //关闭没有选择任何聊天的界面
        this.ifNoMessage = false;
        //选择单聊的时候把群聊的id清空
        this.groupId = '';
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          setTimeout(() => {
            const modals = document.querySelectorAll('.v-modal');
            modals.forEach(modal => {
              // 10999 比弹窗低，确保弹窗在上面
              if (parseInt(modal.style.zIndex, 10) > 10999) {
                modal.style.zIndex = 10999;
              }
            });
          }, 50); // 动画结束后再修正一次
        });
      },
      initDrag() {
        const panel = this.$el;
        const header = panel.querySelector('.chat-header');
        if (!header) return;
        let isDragging = false;
        let startX, startY, startLeft, startTop;

        header.style.cursor = 'move';

        header.addEventListener('mousedown', (e) => {
          // 只允许鼠标左键拖动
          if (e.button !== 0) return;
          isDragging = true;
          startX = e.clientX;
          startY = e.clientY;
          const rect = panel.getBoundingClientRect();
          startLeft = rect.left;
          startTop = rect.top;
          // 防止选中文字
          document.body.style.userSelect = 'none';

          const onMouseMove = (moveEvent) => {
            if (!isDragging) return;
            const dx = moveEvent.clientX - startX;
            const dy = moveEvent.clientY - startY;
            let newLeft = startLeft + dx;
            let newTop = startTop + dy;

            // 限制不拖出屏幕
            const maxLeft = window.innerWidth - panel.offsetWidth;
            const maxTop = window.innerHeight - panel.offsetHeight;
            newLeft = Math.max(0, Math.min(newLeft, maxLeft));
            newTop = Math.max(0, Math.min(newTop, maxTop));

            panel.style.left = newLeft + 'px';
            panel.style.top = newTop + 'px';
            panel.style.right = '';
            panel.style.bottom = '';
          };

          const onMouseUp = () => {
            isDragging = false;
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            document.body.style.userSelect = '';
          };

          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', onMouseUp);
        });
      },
    },
    mounted() {
      console.log("=====fuck")
      //开启websocket连接 start---------------------------------------->
      //1.获取admin-token
      const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
      console.log("Admin-Token:", adminToken);
  
      //2.连接websocket 
      let websocketNewUrl = baseUrl.WebsocketUrl +"?token=" + adminToken;
      //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
      this.ws = new WebSocket(websocketNewUrl);
      this.ws.addEventListener('message', this.handleIncomingMessage);
  
      //3.当连接中断时提供一个方法重新连接
      let that = this;
  
      //当连接关闭的时候关闭websocket
      this.ws.addEventListener('close', function (event) {
        // 连接关闭时执行的操作
        console.log("关闭链接",event);
        // 弹窗询问用户是否手动刷新
        // that.getWebsocket();
      });
      
      //开启websocket连接 end---------------------------------------->
  
      //从通讯录创建单聊 start---------------------------------------->
      //当ws创建成功以后再执行，防止数据未加载
      this.ws.onopen = () => {
        console.log("ws创建成功!");
        console.log(this.$route.query.friend_id)
        //判断当前路由是否携带friend_id
        if(this.$route.query.friend_id){
          console.log("从通讯录进入，开始创建会话！")
          //1.从通讯录进入会话大厅
          this.retrieveSession();
          //2.获取我的用户id
          this.myUserId = this.$store.state.user.userid;
          //把这个id存一下
          this.createMessageId = this.$route.query.friend_id;
          
        }else{
          console.log("直接进入，无需创建会话！")
          //直接进入会话大厅
          //1.获取会话列表
          this.getConversationList();
          this.getUserFriendList();
          this.getFriendApplyList();
          //2.获取我的用户id
          this.myUserId = this.$store.state.user.userid;
          //3.循环获取会话列表
          //开启loading
          this.hallLeftLoading = true;
          this.forSearchConversationList();
        }
      };
      //从通讯录创建单聊 end---------------------------------------->

      // if (!document.getElementById('custom-message-style')) {
      //   const style = document.createElement('style');
      //   style.id = 'custom-message-style';
      //   style.innerHTML = `
      //     .el-message {
      //       min-width: auto !important;
      //       padding: 0 !important;
      //       background: transparent !important;
      //       border: none !important;
      //       box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
      //       border-radius:100px !important;
      //     }
      //     .el-message .el-message__icon {
      //       display: none !important;
      //     }
      //     .el-message .my-custom-message {
      //       background: #fff !important;
      //       color: #000 !important;
      //       border-radius: 4px !important;
      //       box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
      //       border: none !important;
      //       padding: 8px 16px !important;
      //       display: flex;
      //       align-items: center;
      //     }
      //   `;
      //   document.head.appendChild(style);
      // }
      this.initDrag();
    },
    beforeDestroy() {
      //页面销毁的时候清除定时器获取列表
      clearInterval(this.listTimeOut);
      //页面销毁的时候关闭websocket
      if (this.ws) {
        this.ws.removeEventListener('message', this.handleIncomingMessage);
        this.ws.close();
      }
      clearInterval(this.getFriendApplyListStatus);
    }
  };
  </script>
  
  <style scoped lang="less">
  .chat-panel {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 270px;
    height: 520px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-header {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  .chat-header .chat-status {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    margin-left: 8px;
  }
  .chat-header .chat-close {
    position: absolute;
    right: 16px;
    cursor: pointer;
    font-size: 20px;
  }
  .chat-header .chat-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%;
  }
  .chat-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid #eee;
    height: 44px;
  }
  .tab {
    flex: 1;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    color: #888;
    padding: 12px 0;
    transition: color 0.2s, border-bottom 0.2s;
    border-bottom: 2px solid transparent;
  }
  .tab.active {
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
  }
  .chat-groups {
     

    padding: 0 6px;
     
  }
  .group {
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
  }
  .chat-footer {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #eee;
    background: #fafafa;
  }
  .footer-icon {
    font-size: 22px;
    cursor: pointer;
  }
  .contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
  }
  .status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .status.online {
    background: #4caf50;
  }
  .status.offline {
    background: #ccc;
  }
    //左侧
    .hallLeft {
        // width: 420px;
        background: #fff;
        border-radius: 20px;
         margin-top: 11px;
        position: relative;
        .newFriendBox {
          padding: 10px 25px 0 25px;
          font-size: 18px;
          color: #999;
        }
        .newFriendImgBox {
          padding: 8px 21px 8px 25px;
          height: 62px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          cursor: pointer;
          border-bottom: 1px solid #E9EDF7;
          position: relative;
          box-sizing: border-box;
          border-right: 4px solid #fff;
          margin-top:10px;
          .newFriendImg {
            border-radius: 4px;
            background: #5570F1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            width: 20px;
            height: 20px;
            img{
              width: 100%;
            }
          }
          .newFriendText {  
            color: #333;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            span {
              background: #5570F1;
              color: #fff;
              line-height: 24px;
              font-size: 12px;
              width: 24px;
              height: 24px;
              text-align: center;
              border-radius: 50%;
              display: block;
              margin-right: 20px;
            }
          }
        }
        .newFriendIActive {
          border-right: 4px solid #5570F1 !important;
          background: #F5F7FD
        }
        .searchFriendBox {
          position: absolute;
          width: 280px;
          border-radius: 8px;
          top: 0;
          right: -300px;
          background: #fff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          z-index: 100;
          box-sizing: border-box;
          padding: 30px 0;
          .searchFriendItem {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-bottom: 1px solid #E9EDF7;
            padding: 0 20px 30px 20px;
            .searchFriendAvatar {
              img {
                width: 66px;
                height: 66px;
                border-radius: 50%;
              }
              margin-right: 15px;
            }
            .searchFriendInfo {
              flex: 1;
              .searchFriendName {
                display: flex;
                align-items: center;
                .gender {
                  img {
                    width: 12px;
                    height: 12px;
                  }
                }
                img {
                  width: 18px;
                  height: 18px;
                  cursor: pointer;
                }
                .searchFriendNameText {
                  font-size: 18px;
                  width: 120px;
                  height: 28px;
                  line-height: 28px;
                  white-space: nowrap; 
                  overflow: hidden; 
                  text-overflow: ellipsis;
                }
              }
              .searchFriendPhone {
                font-size: 14px;
                color: #999;
                margin-top: 10px;
              }
            }
          }
          .searchFriendLineBox {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            border-bottom: 1px solid #E9EDF7;
            .searchFriendLineTitle{
              font-size: 16px;
              color: #999999;
              width: 90px;
            }
            .searchFriendLineContent{
              font-size: 16px;
              color: #333;
              flex: 1;
              .searchFriendLineContentItem{
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
            }
          }
          .searchFriendButton {
            padding:40px 0 10px 0;
            text-align: center;
            .searchFriendButtonItem {
              font-size: 14px;
              color: #5570F1;
              img {
                width: 30px;
                height: 30px;
                margin-bottom: 5px;
              }
            }
          }
        }
        .userListTitle {
          padding: 15px 25px;
          font-size: 18px;
          color: #999;
        }
        .searchBox {
          padding-left: 25px;
          padding-right: 25px;
          padding-bottom: 0px;
        }
        .userListBox {
          padding: 15px 0;
          overflow-y: auto;
          // height: 300px;
          .active {
            background: #F5F7FD;
            box-sizing: border-box;
            border-right: 4px solid #5570F1 !important;
          }
          .userItem {
            padding: 8 21px 8 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 52px;
            box-sizing: border-box;
            border-right: 4px solid #fff;
            cursor: pointer;
            .userAvatar {
              width: 38px;
              height: 38px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .userInfo {
              flex: 1;
              box-sizing: border-box;
              padding-left: 5px;
              .userName {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userNameText {
                  font-size: 14px;
                  font-weight: bold;
                  // width: 240px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color: #333;
                }
                .userMessageNum {
                  font-size: 12px;
                  color: #333;
                  width: 64px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  border-radius: 50%;
                  background: #FFCC91;
                  font-weight: bold;
                }
              }
              .userMessage {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userMessageText {
                  display: block;
                  width: 240px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 14px;
                  color: #999999;
                }
                .userMessageTime {
                  font-size: 14px;
                  color: #999999;
                }
              }
            }
          }
        }
        .hallLeftLoading{
          position: absolute;
          top: 0;
          left: 0;
          width: 420px;
          height: 740px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.5);
          z-index: 100;
          .hallLeftLoadingIcon {
            .hallLeftLoadingIconItem {
              color: #CCCCCC;
              text-align: center;
              margin-bottom: 20px;
              font-size: 60px;
            }
            .hallLeftLoadingText {
              color: #CCCCCC;
              font-size: 32px;
              font-weight: bold;
            }
          }
        }
        .searchBoxMain {
          position: relative;
          .searchFriendClose {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            padding-bottom: 10px;
            .rightSlideBoxCloseIcon {
              cursor: pointer;
              width: 28px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              background: #EFEFEF;
              border-radius: 8px;
            }
          }
          .searchBox {
            padding-left: 25px;
            padding-right: 25px;
            padding-bottom: 0px;
          }
          .searchFriendBox {
            position: absolute;
            width: 280px;
            border-radius: 8px;
            top: 0;
            right: -300px;
            background: #fff;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            z-index: 100;
            box-sizing: border-box;
            padding: 20px 0 30px 0;
            .searchFriendItem {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              border-bottom: 1px solid #E9EDF7;
              padding: 0 20px 30px 20px;
              .searchFriendAvatar {
                img {
                  width: 66px;
                  height: 66px;
                  border-radius: 50%;
                }
                margin-right: 15px;
              }
              .searchFriendInfo {
                flex: 1;
                .searchFriendName {
                  display: flex;
                  align-items: center;
                  .gender {
                    img {
                      width: 12px;
                      height: 12px;
                    }
                  }
                  img {
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                  }
                  .searchFriendNameText {
                    font-size: 18px;
                    width: 120px;
                    height: 28px;
                    line-height: 28px;
                    white-space: nowrap; 
                    overflow: hidden; 
                    text-overflow: ellipsis;
                  }
                }
                .searchFriendPhone {
                  font-size: 14px;
                  color: #999;
                  margin-top: 10px;
                }
              }
            }
            .searchFriendLineBox {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              padding: 20px;
              border-bottom: 1px solid #E9EDF7;
              .searchFriendLineTitle{
                font-size: 16px;
                color: #999999;
                width: 90px;
              }
              .searchFriendLineContent{
                font-size: 16px;
                color: #333;
                flex: 1;
                .searchFriendLineContentItem{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                }
              }
            }
            .searchFriendButton {
              padding:40px 0 10px 0;
              text-align: center;
              .searchFriendButtonItem {
                font-size: 14px;
                color: #5570F1;
                img {
                  width: 30px;
                  height: 30px;
                  margin-bottom: 5px;
                }
              }
            }
          }
        }
        
        .userListBox {
           
          .active {
            background: #F5F7FD;
            box-sizing: border-box;
            border-right: 4px solid #5570F1 !important;
          }
          .userItem {
            padding: 8px 21px 8px 25px;
            height: 62px;
            box-sizing: border-box;
            border-right: 4px solid #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            .flexItemBox{
              width: 100%;
              .userAvatar {
                  width: 38px;
                  height: 38px;
                  float:left;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .userInfo {
                 float:left;
                 width:131px;
                 margin-top:17px;
                box-sizing: border-box;
                padding-left: 15px;
                .userName {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  //padding-bottom: 10px;
                  .userNameText {
                    font-size: 14px;
                    font-weight: bold;
                    width:260px;
                  }
                  .userMessageNum {
                    font-size: 12px;
                    color: #333; 
                    width: 64px;
                    height: 24px;
                    line-height: 24px;
                    text-align: center;
                    border-radius: 50%;
                    background: #FFCC91;
                    font-weight: bold;
                  }
                }
                .userMessage {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .userMessageText {
                    display: block;
                    width: 240px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 14px;
                    color: #999999;
                  }
                  .userMessageTime {
                    font-size: 14px;
                    color: #999999;
                  }
                }
              }
            }
          }
        }
      }
              //右侧菜单
              .rightSlideBox {
          width: 420px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #fff;
          box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
          .rightSlideBoxClose {
            padding: 20px 20px 0 20px;
            height: 50px;
            overflow: hidden;
            display: flex;  
            align-items: center;
            justify-content: space-between;
            .rightSlideBoxCloseTitle {
              font-size: 18px;
              color: #333;
            }
            .rightSlideBoxCloseIcon {
              cursor: pointer;
              width: 28px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              background: #EFEFEF;
              border-radius: 8px;
            }
          }
          .rightSlideSearch {
            padding: 30px 25px 0 25px;
            height: 66px;
            //overflow: hidden;
            position: relative;
            .searchFriendBox {
              position: absolute;
              width: 280px;
              border-radius: 8px;
              top: 65px;
              left: -260px;
              background: #fff;
              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
              border-radius: 8px;
              z-index: 100;
              box-sizing: border-box;
              padding: 20px 0 30px 0;
              .searchFriendClose {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 10px;
                padding-bottom: 10px;
                .rightSlideBoxCloseIcon {
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  line-height: 28px;
                  text-align: center;
                  background: #EFEFEF;
                  border-radius: 8px;
                }
              }
              .searchFriendItem {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                border-bottom: 1px solid #E9EDF7;
                padding: 0 20px 30px 20px;
                .searchFriendAvatar {
                  img {
                    width: 66px;
                    height: 66px;
                    border-radius: 50%;
                  }
                  margin-right: 15px;
                }
                .searchFriendInfo {
                  flex: 1;
                  .searchFriendName {
                    display: flex;
                    align-items: center;
                    .gender {
                      img {
                        width: 12px;
                        height: 12px;
                      }
                    }
                    img {
                      width: 18px;
                      height: 18px;
                      cursor: pointer;
                    }
                    .searchFriendNameText {
                      font-size: 18px;
                      width: 120px;
                      height: 28px;
                      line-height: 28px;
                      white-space: nowrap; 
                      overflow: hidden; 
                      text-overflow: ellipsis;
                    }
                  }
                  .searchFriendPhone {
                    font-size: 14px;
                    color: #999;
                    margin-top: 10px;
                  }
                }
              }
              .searchFriendLineBox {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 20px;
                border-bottom: 1px solid #E9EDF7;
                .searchFriendLineTitle{
                  font-size: 16px;
                  color: #999999;
                  width: 90px;
                }
                .searchFriendLineContent{
                  font-size: 16px;
                  color: #333;
                  flex: 1;
                  .searchFriendLineContentItem{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  }
                }
              }
              .searchFriendButton {
                padding:40px 0 10px 0;
                text-align: center;
                .searchFriendButtonItem {
                  font-size: 14px;
                  color: #5570F1;
                  img {
                    width: 30px;
                    height: 30px;
                    margin-bottom: 5px;
                  }
                }
              }
            }
          }
          .rightSlideUserBox {
            box-sizing: border-box;
            padding: 40px 40px 10px 40px;
            height: 180px;
            overflow-y: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            //border-bottom: 1px solid #E9EDF7;
            .rightEditUserItem {
              cursor: pointer;
              // color: #333;
              // .rightSlideUserItemIcon {
              //   .addUserIcon {
              //     transition: all 0.5s ease;
              //   }
              //   .addUserIcon:hover {
              //     background: #5570F1;
              //     color: #fff;
              //   }
              // }
              
            }
            .rightSlideUserItem {
              margin-bottom: 20px;
              width: 25%;
              position: relative;
              //cursor: pointer;
              //用户菜单
              .rightSlideUserItemMore {
                position: absolute;
                background: #fff;
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
                bottom: -220px;
                left: -240px;
                width: 280px;
                height: 270px;
                .rightSlideUserItemMoreMain {
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  padding:0 20px;
                  .rightSlideUserItemMoreMainIcon {
                    img {
                      width: 66px;
                      height: 66px;
                      border-radius: 50%;
                    }
                  }
                  .rightSlideUserItemMoreMainInfo { 
                    padding: 30px 0 30px 20px;
                    border-bottom: 1px solid #E9EDF7;
                    flex: 1;
                    .rightSlideUserItemMoreMainInfoTop {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      .rightSlideUserItemMoreUserName {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        .rightSlideUserItemMoreUserMore {
                          margin-left: 10px;
                          img {
                            width: 12px;
                            height: 12px;
                          }
                        }
                      }
                      .rightSlideUserItemMoreUserMoreIcon {
                        img {
                          width: 18px;
                          height: 18px;
                        }
                      }
                    }
                  }
                  .rightSlideUserItemMoreNumber {
                    font-size: 14px;
                    color: #999;
                    margin-top: 10px;
                  }
                }
                .rightSlideUserItemMoreLine {
                  .rightSlideUserItemMoreLineItem {
                    padding: 20px;
                    border-bottom: 1px solid #E9EDF7;
                    display: flex;
                    .rightSlideUserItemMoreTitle {
                      font-size: 16px;
                      color: #999;
                      width: 80px;
                    }
                    .rightSlideUserItemMoreText {
                      font-size: 16px;
                      color: #333;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      flex:1;
                    }
                  }
                  .rightSlideUserItemMoreLineButton {
                    padding-top: 25px;
                    text-align: center;
                    font-size: 14px;
                    color:#5570F1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                      width: 25px;
                      height: 25px;
                      margin-bottom: 8px;
                    }
                    .rightSlideUserItemMoreLineGroup {
                      width: 33.33%;
                    }
                  }
                }
              }
              .rightSlideUserItemIcon {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                  width: 58px;
                  height: 58px;
                  border-radius: 50%;
                }
                .el-dropdown-link {
                  width: 58px;
                  height: 58px;
                  position: relative;
                  .rightSlideUserGroupLeader{
                    font-size: 12px;
                    color: #FEAF50;
                    background: #FFEAD1;
                    width: 36px;
                    height: 20px;
                    border-radius: 4px;
                    position: absolute;
                    bottom: 0;
                    right: -10px;
                    text-align: center;
                    line-height: 20px;
                  }
                }
                .addUserIcon {
                  width: 58px;
                  height: 58px;
                  line-height: 58px;
                  background: #F0F0F0;
                  border-radius: 50%;
                  text-align: center;
                  color:#fff;
                  font-size: 32px;
                }
              }
              .rightSlideUserItemName {
                //width: 80px;
                padding: 0 5px;
                font-size: 16px;
                color: #333;
                margin-top: 10px;
                text-align: center;
                white-space: nowrap; /* 强制不换行 */
                overflow: hidden; /* 超出宽度隐藏 */
                text-overflow: ellipsis; /* 显示省略号 */
              }
            }
          }
          .rightLineBorder {
            width: 100%;
            border-bottom: 1px solid #E9EDF7;
          }
          .rightSlideMore {
            padding: 30px 40px;
            font-size: 18px;
            color: #999;
            text-align: center
          }
          //聊天记录
          .rightSlideFunction {
            .rightSlideFunctionItem {
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 20px 40px;
              border-bottom: 1px solid #E9EDF7;
              cursor: pointer;
              .rightSlideFunctionItemText {
                font-size: 18px;
                color: #333;
              }
              .rightSlideFunctionItemIcon {
                img {
                  width: 18px;
                  height: 18px;
                }
              }
            }
          }
          //群聊设置
          .groupSystem {
            border-bottom: 1px solid #E9EDF7;
            padding-bottom: 30px;
            .groupChatSystem {
              padding: 30px 40px 0 40px;
              height: 80px;
              overflow: hidden; 
              .groupChatTitle {
                font-size: 18px;
                color: #333;
                margin-bottom: 10px;
              }
              .groupChatText {
                width: 100%;
                height: 20px;
                overflow: hidden;
                font-size: 18px;
                color: #999;
                display: flex;
                align-items: center;
                justify-content: space-between;
                img {
                  cursor: pointer;
                }
                .groupChatTextContent {
                  width: 300px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
          .rightSlideFooterBox {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            div{
              width: 33%;
              text-align: center;
              font-size: 16px;
              color: #666;
              cursor: pointer;
              margin-top: 30px;
              box-sizing: border-box;
              border-right: 1px solid #E9EDF7;
            }
          }
          .rightSlideFooter {
            font-size: 18px;
            color: #666;
            padding: 30px 40px;
            text-align: center;
            cursor: pointer;
            border-bottom: 1px solid #E9EDF7;
          }
          .isLast {
            border-bottom: 0;
            color: #999;
          }
        }
        .newFriendBox{
          height: 400px;
        }
      //右侧
      .hallRight {
        flex: 1;
        background: #fff;
        border-radius: 20px;
        position: relative;
        // min-height: 500px;
        display: flex;
        flex-direction: column;
        position: relative;
        // height: 400px;
        overflow:auto;
        .hallRightLoading {
          position: absolute;
          top: 0;
          left: 0;
          height: 740px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.5);
          z-index: 100;
          .hallRightLoadingIcon {
            .hallRightLoadingIconItem {
              color: #CCCCCC;
              text-align: center;
              margin-bottom: 20px;
              font-size: 60px;
            }
            .hallRightLoadingText {
              color: #CCCCCC;
              font-size: 32px;
              font-weight: bold;
            }
          }
        }
        .ifHallRigthNoMessage {
          color: #CCCCCC;
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          height: 740px;
          line-height: 740px;
        }
        .userName {
          font-size: 20px;
          color: #333;
          font-weight: bold;
        }
        .ifNotice {
          padding-bottom: 50px !important;  
        }
        .UserNameBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0px 30px 0px 0px;
          border-bottom: 1px solid #E7E7E7;
          position: relative;
          .moreIcon {
            cursor: pointer;
          }
          .groupNotice {
            position: absolute;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            background:url('../../../assets/chat/notice.png') no-repeat 10px center #F6F8FE;
            // left: 30px;
            box-sizing: border-box;
            padding-left: 40px;
            bottom: 10px;
            color: #999999;
            border-radius: 10px;
            padding-right: 10px;
            width: 400px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
          }
          .shareCardIcon {
            font-size: 24px;
            cursor: pointer;
            color: #666;
          }
        }
        .rightPositionBox { 
          flex: 1;
          position: relative;
          
          .rightUserMessageBox {
            padding: 40px;
            height: 375px;
            box-sizing: border-box;
            overflow-y: auto;
            .timeBox {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding:0 0 30px 0; 
              span {
                border-radius: 8px;
                display: block;
                width: 80px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                text-align: center;
                display: block;
                background: #F4F5FA;
                color: #999999;
              }
            }
            .newUserStatus {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding:0 0 30px 0;
              .newUserStatusText {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                width: 200px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                text-align: center;
                background: #F4F5FA;
                color: #999999;
              }
              span {
                display: inline-block;
                line-height: 30px;
              }
              .newUserStatusTextName {
                display: inline-block;
                width: 100px;
                line-height: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            //其他用户
            .otherUserMessage {
              display: flex;
              align-items: flex-start;
              margin-bottom: 30px;
              .otherUserIcon {
                margin-right: 20px;
                img {
                  width: 58px;
                  height: 58px;
                  border-radius: 50%;
                }
              }
              .otherUserMessageText {
                border-radius: 16px;
                padding: 16px;
                font-size: 16px;
                color: #fff;
                background: #5570F1;
                position: relative;
                min-height: 50px;
                word-wrap:break-word;
                word-break:break-all;
              }
              .otherUserMessageText::before {
                content: '';
                position: absolute;
                left: -8px;
                top: 26px;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid #5570F1;
              }
            }
            //我
            .meUserMessage {
              display: flex;
              align-items: flex-start;
              margin-bottom: 30px;
              justify-content: flex-end; 
              .meUserIcon {
                margin-left: 20px;
                img {
                  width: 58px;
                  height: 58px;
                  border-radius: 50%;
                }
              }
              .meUserMessageText {
                border-radius: 16px;
                padding:16px;
                font-size: 16px;
                color:#333;
                background: #FFEAD1;
                position: relative;
                min-height: 50px;
                cursor: pointer;
                word-wrap:break-word;
                word-break:break-all;
                //width: 100%;
              }
              .meUserMessageText::before {
                content: '';
                position: absolute;
                right: -8px;
                top: 26px;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent; 
                border-left: 8px solid #FFEAD1;
              }
            }
          }
        }
        //消息框
        .sendMessageBox {
          //height: 250px;
          padding: 20px 40px 0 40px;
          border-top: 1px solid #E7E7E7;
          box-sizing: border-box;
  
          .sendMessageTools {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .toolsBigBox {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .toolsBox {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                img {
                  width: 36px;
                  height: 36px;
                  margin-right: 30px;
                  cursor: pointer;
                }
              }
            }
            .fileBox {
              width: 180px;
              display: flex;
              align-items: center;
              border: 1px solid #E9EDF7;
              border-radius: 8px;
              padding: 5px 10px;
              .fileBoxText {
                font-size: 14px;
                color: #999;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 110px;
              }
              img {
                width: 40px;
                height: 40px;
                margin-right: 5px;
              }
            }
          }
          .sendMessageInput {
            margin-top: 5px;
          }
          .sendMessageButton {
            padding-top: 20px;
            text-align: right;
            button {
              width: 120px;
              height: 38px;
            }
          }
        }
        //右侧菜单
        .rightSlideBox {
          width: 420px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #fff;
          box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
          .rightSlideBoxClose {
            padding: 20px 20px 0 20px;
            height: 50px;
            overflow: hidden;
            display: flex;  
            align-items: center;
            justify-content: space-between;
            .rightSlideBoxCloseTitle {
              font-size: 18px;
              color: #333;
            }
            .rightSlideBoxCloseIcon {
              cursor: pointer;
              width: 28px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              background: #EFEFEF;
              border-radius: 8px;
            }
          }
          .rightSlideSearch {
            padding: 30px 25px 0 25px;
            height: 66px;
            //overflow: hidden;
            position: relative;
            .searchFriendBox {
              position: absolute;
              width: 280px;
              border-radius: 8px;
              top: 65px;
              left: -260px;
              background: #fff;
              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
              border-radius: 8px;
              z-index: 100;
              box-sizing: border-box;
              padding: 20px 0 30px 0;
              .searchFriendClose {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 10px;
                padding-bottom: 10px;
                .rightSlideBoxCloseIcon {
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  line-height: 28px;
                  text-align: center;
                  background: #EFEFEF;
                  border-radius: 8px;
                }
              }
              .searchFriendItem {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                border-bottom: 1px solid #E9EDF7;
                padding: 0 20px 30px 20px;
                .searchFriendAvatar {
                  img {
                    width: 66px;
                    height: 66px;
                    border-radius: 50%;
                  }
                  margin-right: 15px;
                }
                .searchFriendInfo {
                  flex: 1;
                  .searchFriendName {
                    display: flex;
                    align-items: center;
                    .gender {
                      img {
                        width: 12px;
                        height: 12px;
                      }
                    }
                    img {
                      width: 18px;
                      height: 18px;
                      cursor: pointer;
                    }
                    .searchFriendNameText {
                      font-size: 18px;
                      width: 120px;
                      height: 28px;
                      line-height: 28px;
                      white-space: nowrap; 
                      overflow: hidden; 
                      text-overflow: ellipsis;
                    }
                  }
                  .searchFriendPhone {
                    font-size: 14px;
                    color: #999;
                    margin-top: 10px;
                  }
                }
              }
              .searchFriendLineBox {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 20px;
                border-bottom: 1px solid #E9EDF7;
                .searchFriendLineTitle{
                  font-size: 16px;
                  color: #999999;
                  width: 90px;
                }
                .searchFriendLineContent{
                  font-size: 16px;
                  color: #333;
                  flex: 1;
                  .searchFriendLineContentItem{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  }
                }
              }
              .searchFriendButton {
                padding:40px 0 10px 0;
                text-align: center;
                .searchFriendButtonItem {
                  font-size: 14px;
                  color: #5570F1;
                  img {
                    width: 30px;
                    height: 30px;
                    margin-bottom: 5px;
                  }
                }
              }
            }
          }
          .rightSlideUserBox {
            box-sizing: border-box;
            padding: 40px 40px 10px 40px;
            height: 180px;
            overflow-y: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            //border-bottom: 1px solid #E9EDF7;
            .rightEditUserItem {
              cursor: pointer;
              // color: #333;
              // .rightSlideUserItemIcon {
              //   .addUserIcon {
              //     transition: all 0.5s ease;
              //   }
              //   .addUserIcon:hover {
              //     background: #5570F1;
              //     color: #fff;
              //   }
              // }
              
            }
            .rightSlideUserItem {
              margin-bottom: 20px;
              width: 25%;
              position: relative;
              //cursor: pointer;
              //用户菜单
              .rightSlideUserItemMore {
                position: absolute;
                background: #fff;
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
                bottom: -220px;
                left: -240px;
                width: 280px;
                height: 270px;
                .rightSlideUserItemMoreMain {
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  padding:0 20px;
                  .rightSlideUserItemMoreMainIcon {
                    img {
                      width: 66px;
                      height: 66px;
                      border-radius: 50%;
                    }
                  }
                  .rightSlideUserItemMoreMainInfo { 
                    padding: 30px 0 30px 20px;
                    border-bottom: 1px solid #E9EDF7;
                    flex: 1;
                    .rightSlideUserItemMoreMainInfoTop {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      .rightSlideUserItemMoreUserName {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        .rightSlideUserItemMoreUserMore {
                          margin-left: 10px;
                          img {
                            width: 12px;
                            height: 12px;
                          }
                        }
                      }
                      .rightSlideUserItemMoreUserMoreIcon {
                        img {
                          width: 18px;
                          height: 18px;
                        }
                      }
                    }
                  }
                  .rightSlideUserItemMoreNumber {
                    font-size: 14px;
                    color: #999;
                    margin-top: 10px;
                  }
                }
                .rightSlideUserItemMoreLine {
                  .rightSlideUserItemMoreLineItem {
                    padding: 20px;
                    border-bottom: 1px solid #E9EDF7;
                    display: flex;
                    .rightSlideUserItemMoreTitle {
                      font-size: 16px;
                      color: #999;
                      width: 80px;
                    }
                    .rightSlideUserItemMoreText {
                      font-size: 16px;
                      color: #333;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      flex:1;
                    }
                  }
                  .rightSlideUserItemMoreLineButton {
                    padding-top: 25px;
                    text-align: center;
                    font-size: 14px;
                    color:#5570F1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                      width: 25px;
                      height: 25px;
                      margin-bottom: 8px;
                    }
                    .rightSlideUserItemMoreLineGroup {
                      width: 33.33%;
                    }
                  }
                }
              }
              .rightSlideUserItemIcon {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                  width: 58px;
                  height: 58px;
                  border-radius: 50%;
                }
                .el-dropdown-link {
                  width: 58px;
                  height: 58px;
                  position: relative;
                  .rightSlideUserGroupLeader{
                    font-size: 12px;
                    color: #FEAF50;
                    background: #FFEAD1;
                    width: 36px;
                    height: 20px;
                    border-radius: 4px;
                    position: absolute;
                    bottom: 0;
                    right: -10px;
                    text-align: center;
                    line-height: 20px;
                  }
                }
                .addUserIcon {
                  width: 58px;
                  height: 58px;
                  line-height: 58px;
                  background: #F0F0F0;
                  border-radius: 50%;
                  text-align: center;
                  color:#fff;
                  font-size: 32px;
                }
              }
              .rightSlideUserItemName {
                //width: 80px;
                padding: 0 5px;
                font-size: 16px;
                color: #333;
                margin-top: 10px;
                text-align: center;
                white-space: nowrap; /* 强制不换行 */
                overflow: hidden; /* 超出宽度隐藏 */
                text-overflow: ellipsis; /* 显示省略号 */
              }
            }
          }
          .rightLineBorder {
            width: 100%;
            border-bottom: 1px solid #E9EDF7;
          }
          .rightSlideMore {
            padding: 30px 40px;
            font-size: 18px;
            color: #999;
            text-align: center
          }
          //聊天记录
          .rightSlideFunction {
            .rightSlideFunctionItem {
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 20px 40px;
              border-bottom: 1px solid #E9EDF7;
              cursor: pointer;
              .rightSlideFunctionItemText {
                font-size: 18px;
                color: #333;
              }
              .rightSlideFunctionItemIcon {
                img {
                  width: 18px;
                  height: 18px;
                }
              }
            }
          }
          //群聊设置
          .groupSystem {
            border-bottom: 1px solid #E9EDF7;
            padding-bottom: 30px;
            .groupChatSystem {
              padding: 30px 40px 0 40px;
              height: 80px;
              overflow: hidden; 
              .groupChatTitle {
                font-size: 18px;
                color: #333;
                margin-bottom: 10px;
              }
              .groupChatText {
                width: 100%;
                height: 20px;
                overflow: hidden;
                font-size: 18px;
                color: #999;
                display: flex;
                align-items: center;
                justify-content: space-between;
                img {
                  cursor: pointer;
                }
                .groupChatTextContent {
                  width: 300px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
          .rightSlideFooterBox {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            div{
              width: 33%;
              text-align: center;
              font-size: 16px;
              color: #666;
              cursor: pointer;
              margin-top: 15px;
              box-sizing: border-box;
              border-right: 1px solid #E9EDF7;
            }
          }
          .rightSlideFooter {
            font-size: 18px;
            color: #666;
            padding: 30px 40px;
            text-align: center;
            cursor: pointer;
            border-bottom: 1px solid #E9EDF7;
          }
          .isLast {
            border-bottom: 0;
            color: #999;
          }
        }
      }
      .chat-dialog{
        margin-top: 5vh !important;
      }
      .list002{
        height: 270px;
      }
      .list001{
        height: 330px;
      }
      
    .hallBox {
      display: flex;
      // margin: 30px;
      //左侧
      .hallLeft {
        width: 420px;
        background: #fff;
        border-radius: 20px;
        margin-right: 20px;
        .newFriendBox {
          padding: 10px 25px 0 25px;
          font-size: 18px;
          color: #999;
        }
        .newFriendImgBox {
          margin: 10px 0 10px 0;
          padding: 20px 0 20px 25px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          cursor: pointer;
          border-bottom: 1px solid #E9EDF7;
          position: relative;
          box-sizing: border-box;
          border-right: 4px solid #fff;
          .newFriendImg {
            width: 58px;
            height: 58px;
            border-radius: 8px;
            background: #5570F1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
          }
          .newFriendText {  
            color: #333;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            span {
              background: #5570F1;
              color: #fff;
              line-height: 24px;
              font-size: 12px;
              width: 24px;
              height: 24px;
              text-align: center;
              border-radius: 50%;
              display: block;
              margin-right: 20px;
            }
          }
        }
        .newFriendIActive {
          border-right: 4px solid #5570F1 !important;
          background: #F5F7FD
        }
        .searchFriendBox {
          position: absolute;
          width: 280px;
          border-radius: 8px;
          top: 0;
          right: -300px;
          background: #fff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          z-index: 100;
          box-sizing: border-box;
          padding: 30px 0;
          .searchFriendItem {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-bottom: 1px solid #E9EDF7;
            padding: 0 20px 30px 20px;
            .searchFriendAvatar {
              img {
                width: 66px;
                height: 66px;
                border-radius: 50%;
              }
              margin-right: 15px;
            }
            .searchFriendInfo {
              flex: 1;
              .searchFriendName {
                display: flex;
                align-items: center;
                .gender {
                  img {
                    width: 12px;
                    height: 12px;
                  }
                }
                img {
                  width: 18px;
                  height: 18px;
                  cursor: pointer;
                }
                .searchFriendNameText {
                  font-size: 18px;
                  width: 120px;
                  height: 28px;
                  line-height: 28px;
                  white-space: nowrap; 
                  overflow: hidden; 
                  text-overflow: ellipsis;
                }
              }
              .searchFriendPhone {
                font-size: 14px;
                color: #999;
                margin-top: 10px;
              }
            }
          }
          .searchFriendLineBox {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            border-bottom: 1px solid #E9EDF7;
            .searchFriendLineTitle{
              font-size: 16px;
              color: #999999;
              width: 90px;
            }
            .searchFriendLineContent{
              font-size: 16px;
              color: #333;
              flex: 1;
              .searchFriendLineContentItem{
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
            }
          }
          .searchFriendButton {
            padding:40px 0 10px 0;
            text-align: center;
            .searchFriendButtonItem {
              font-size: 14px;
              color: #5570F1;
              img {
                width: 30px;
                height: 30px;
                margin-bottom: 5px;
              }
            }
          }
        }
        .userListTitle {
          padding: 15px 25px;
          font-size: 18px;
          color: #999;
        }
        .searchBox {
          padding-left: 25px;
          padding-right: 25px;
          padding-bottom: 20px;
        }
        .userListBox {
          padding: 15px 0;
          overflow-y: auto;
          height: 380px;
          .active {
            background: #F5F7FD;
            box-sizing: border-box;
            border-right: 4px solid #5570F1 !important;
          }
          .userItem {
            padding: 0 21px 0 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 90px;
            box-sizing: border-box;
            border-right: 4px solid #fff;
            cursor: pointer;
            .userAvatar {
              img {
                width: 38px;
                height: 38px;
                border-radius: 50%;
              }
            }
            .userInfo {
              flex: 1;
              box-sizing: border-box;
              padding-left: 15px;
              .userName {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userNameText {
                  font-size: 18px;
                  font-weight: bold;
                  width: 240px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color: #333;
                }
                .userMessageNum {
                  font-size: 12px;
                  color: #333;
                  width: 24px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  border-radius: 50%;
                  background: #FFCC91;
                  font-weight: bold;
                }
              }
              .userMessage {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userMessageText {
                  display: block;
                  width: 240px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 14px;
                  color: #999999;
                }
                .userMessageTime {
                  font-size: 14px;
                  color: #999999;
                }
              }
            }
          }
        }
      }
      //右侧
      .hallRight {
        flex: 1;
        background: #fff;
        border-radius: 0px;
        position: relative;
        // height: 740px;
        .rightNewFriendBox {
          height: 126px;
          border-bottom: 1px solid #E9EDF7;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 30px 40px;
          .rightNewFriendItem { 
            display: flex;
            align-items: center; 
            .rightNewFriendAvatar {
              margin-right: 15px;
              img {
                width: 66px;
                height: 66px;
                border-radius: 50%;
              }
            }
            .rightNewFriendInfo {
              .rightNewFriendName {
                font-size: 18px; 
                margin-bottom: 7px;
              }
              .rightNewFriendPhone {
                font-size: 18px;
                color: #999;
              }
            }
          }
          .rightNewFriendStatus {
            .rightNewFriendStatus1 {
              font-size: 16px;
              color: #999;
              width: 69px;
              text-align: center;
            }
          }
        }
        .userInfoMainBox {
          // padding: 40px;
          // max-width: 900px;
          // margin: 100px auto 0 auto;
          .userInfoMainItem {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-bottom: 1px solid #E9EDF7;
            padding: 0 20px 30px 20px;
            .userInfoMainAvatar {
              img {
                width: 66px;
                height: 66px;
                border-radius: 50%;
              }
              margin-right: 15px;
            }
            .userInfoMainInfo {
              flex: 1;
              .userInfoMainName {
                display: flex;
                align-items: center;
                justify-content: space-between;
                img {
                  width: 18px;
                  height: 18px;
                  cursor: pointer;
                }
                .userInfoMainNameText {
                  font-size: 18px;
                  width: 240px;
                  height: 28px;
                  line-height: 28px;
                  white-space: nowrap; 
                  overflow: hidden; 
                  text-overflow: ellipsis;
                }
              }
              .userInfoMainPhone {
                font-size: 14px;
                color: #999;
                margin-top: 10px;
              }
            }
          }
          .userInfoMainLineBox {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            border-bottom: 1px solid #E9EDF7;
            .userInfoMainLineTitle{
              font-size: 16px;
              color: #999999;
              width: 90px;
            }
            .userInfoMainLineContent{
              font-size: 16px;
              color: #333;
              flex: 1;
              .userInfoMainLineContentItem{
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
              }
            }
          }
          .userInfoMainButton {
            padding:40px 0 10px 0;
            text-align: center;
            .userInfoMainButtonItem {
              font-size: 14px;
              color: #5570F1;
              img {
                width: 30px;
                height: 30px;
                margin-bottom: 5px;
              }
            }
          }
        }
        .ifHallRigthNoMessage {
          color: #CCCCCC;
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          height: 740px;
          line-height: 740px;
        }
        .userName {
          font-size: 20px;
          color: #333;
          font-weight: bold;
        }
        .ifNotice {
          padding-bottom: 60px !important;  
        }
        .UserNameBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          // padding: 40px 30px 30px 30px;
          border-bottom: 1px solid #E7E7E7;
          position: relative;
          .moreIcon {
            cursor: pointer;
          }
          .groupNotice {
            position: absolute;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            background:url('~@/assets/chat/notice.png') no-repeat 10px center #F6F8FE;
            left: 30px;
            box-sizing: border-box;
            padding-left: 40px;
            bottom: 10px;
            color: #999999;
            border-radius: 10px;
            padding-right: 10px;
            width: 400px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .searchWindow {
      display: flex;
      .searchWindowLeft {
        width: 330px;
        box-sizing: border-box;
        border-right: 1px solid #E9EDF7;
        padding-right: 25px;
        .searchUserWindowBox {
          position: relative;
          .searchFriendClose {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            padding-bottom: 10px;
            .rightSlideBoxCloseIcon {
              cursor: pointer;
              width: 28px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              background: #EFEFEF;
              border-radius: 8px;
            }
          }
          .searchFriendBox {
            position: absolute;
            width: 280px;
            border-radius: 8px;
            top: 0;
            right: -280px;
            background: #fff;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            z-index: 100;
            box-sizing: border-box;
            padding: 20px 0 30px 0;
            .searchFriendItem {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              border-bottom: 1px solid #E9EDF7;
              padding: 0 20px 30px 20px;
              .searchFriendAvatar {
                img {
                  width: 66px;
                  height: 66px;
                  border-radius: 50%;
                }
                margin-right: 15px;
              }
              .searchFriendInfo {
                flex: 1;
                .searchFriendName {
                  display: flex;
                  align-items: center;
                  .gender {
                    img {
                      width: 12px;
                      height: 12px;
                    }
                  }
                  img {
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                  }
                  .searchFriendNameText {
                    font-size: 18px;
                    width: 120px;
                    height: 28px;
                    line-height: 28px;
                    white-space: nowrap; 
                    overflow: hidden; 
                    text-overflow: ellipsis;
                  }
                }
                .searchFriendPhone {
                  font-size: 14px;
                  color: #999;
                  margin-top: 10px;
                }
              }
            }
            .searchFriendLineBox {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              padding: 20px;
              border-bottom: 1px solid #E9EDF7;
              .searchFriendLineTitle{
                font-size: 16px;
                color: #999999;
                width: 90px;
              }
              .searchFriendLineContent{
                font-size: 16px;
                color: #333;
                flex: 1;
                .searchFriendLineContentItem{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                }
              }
            }
            .searchFriendButton {
              padding:40px 0 10px 0;
              text-align: center;
              .searchFriendButtonItem {
                font-size: 14px;
                color: #5570F1;
                img {
                  width: 30px;
                  height: 30px;
                  margin-bottom: 5px;
                }
              }
            }
          }
        }
        .searchUserBox {
          padding-top: 30px;
          .searchNameEnglish {
            font-size: 18px;
            color: #999;
            padding: 30px 0 20px 0;
          }
          .searchUserItem {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .searchUserName {
              font-size: 18px;
              font-weight: bold;
              color: #333;
            }
            img {
              width: 38px;
              height: 38px;
              border-radius: 50%;
              margin: 0 20px;
            }
          }
        }
      }
      .searchWindowRight {
        width: 690px;
        .searchWindowRightTop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 30px 30px 30px;
          .searchWindowRightTitle {
            font-size: 18px;
            color: #333;
          }
          .searchWindowRightNum {
            font-size: 18px;
            color: #999;
          }
        }
        .searchWindowUserList {
          padding: 0 30px;
          height: 400px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          align-content: flex-start;
          .searchWindowUserItem {
            width:20%;
            text-align: center;
            margin-bottom: 30px;
            .searchWindowUserName {
              font-size: 18px;
              color: #333;
              font-weight: bold;
              width: 122px;
              white-space: nowrap; /* 强制不换行 */
              overflow: hidden; /* 超出宽度隐藏 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
            .searchWindowUserIcon {
              width: 58px;
              height: 58px;
              position: relative;
              margin: 0 auto 10px auto;
              .searchWindowDeleteUser {
                position: absolute;
                width: 15px;
                height: 15px;
                background: rgba(0,0,0,0.3);
                border-radius: 5px;
                color: #fff;
                right: -3px;
                top: -3px;
                cursor: pointer;
              }
              .rightSlideUserGroupLeader{
                font-size: 12px;
                color: #FEAF50;
                background: #FFEAD1;
                width: 36px;
                height: 20px;
                border-radius: 4px;
                position: absolute;
                bottom: 0;
                right: -10px;
                text-align: center;
                line-height: 20px;
              }
              img {
                width: 58px;
                height: 58px;
                border-radius: 50%;
                margin-bottom: 10px;
              }
            }
            
          }
        }
        .shareCardBox {
          border-top: 1px solid #E9EDF7;
          .shareCardTitle {
            padding: 30px;
          }
          .shareCardInput {
            padding: 0 30px 0 30px;
          }
        }
        .searchWindowFooter {
          text-align: center;
          padding-top: 30px;
        }
      }
    }
    .shareCardWindowBox{
      .shareCardWindowBoxMain {
        border: 1px solid #E9EDF7;
        border-top: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        background: #F5F7FB;
        padding-left: 14px;
        padding: 10px;
      }
      .shareCardRadioBox {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        >.el-radio {
          margin-right: 5px;
        }
      }
      .shareCardItem{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .shareCardName {
          font-size: 14px;
          color: #333;
          margin-left: 10px;
        }
        img {
          width: 38px;
          height: 38px;
          border-radius: 50%;
        }
      }
    }
    //弹出框底部按钮
    .footerButtonBox {
      padding-top: 40px;
      text-align: center;
    }
        //聊天记录弹出框
        .fileWindow {
      .fileWindowHeader {
        margin-bottom: 20px;
      }
      .fileWindowMessageTime {
        width: 100px;
        height: 37px;
        line-height: 37px;
        text-align: center;
        background: #F4F5FA;
        border-radius: 8px;
        font-size: 14px;
        color: #999999;
        margin-top: 30px;
      }
      .fileWindowMessageScrollBox {
        height: 500px;
        overflow-y: auto;
      }
      .fileWindowNoMessage {
        font-size: 18px;
        color: #999;
        text-align: center;
        height: 500px;
        line-height: 500px;
      }
      .fileWindowMessageItemBox {
        display: flex;
        align-items: flex-start;
        .active {
          background: #F5F7FD;
          border-right: 4px solid #5570F1 !important;
        }
        .historicalMessageBox {
          width: 100%;
          display: flex;
          align-items: flex-start;
          padding: 30px 0 20px 0;
          border-bottom: 1px solid #E9EDF7;
        }
        .fileWindowMessageItemIcon {
          img {
            width: 58px;
            height: 58px;
            border-radius: 50%;
          }
        }
        .fileWindowMessageItemIcon {
          padding-right: 15px;
        }
        .fileWindowMessageItem {
          flex: 1;
          .fileWindowMessageItemInfo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 20px;
            .fileWindowMessageItemName {
              font-size: 18px;
              color: #333;
            }
            .fileWindowMessageItemTime {
              font-size: 14px;
              color: #999;
            }
          }
          .fileWindowMessageItemText {
            font-size: 14px;
            color: #999;
          }
          .fileWindowMessageItemImage {
            width: 150px;
            height: 150px;
            border-radius: 16px;
            border: 1px solid #ECECEC;
          }
        }
      }
      //文件列表
      .fileWindowFlieBox {
        .fileWindowFlieItem {
          padding:30px 0 20px 0;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #E9EDF7;
          .fileWindowFlieItemIcon {
            margin-right: 10px;
            img {
              width: 42px;
              height: 42px;
            }
          }
          .fileWindowFlieItemMain {
            flex: 1;
            .fileWindowFlieItemTitle {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 16px;
              color: #333;
              margin-bottom: 6px;
            }
            .fileWindowFlieItemTime {
              font-size: 14px;
              color: #999;
            }
            .fileWindowFlieInfo {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
      //图片列表
      .fileWindowImageBox {
        display: flex;
        flex-wrap: wrap;
        div {
          width: 25%;
          text-align: center;
          padding: 20px 0 0 0;
        }
        img {
          width: 150px;
          height: 150px;
          border-radius: 16px;
          border: 1px solid #ECECEC;
        }
      }
      //日期���索
      .fileWindowDateBox {
        width: 100%;
        padding: 30px 0;
      }
      .fileWindowDateButton {
        margin-left: 10px;
      }
      //群成员搜索
      .fileWindowGroupMain{
        display: flex;
        .fileWindowGroupUserLeft {
          flex: 1;
          box-sizing: border-box;
          padding-right: 20px;
        }
        .fileWindowGroupUserRight {
           width: 300px;
          .fileWindowGroupUserBox {
            padding: 30px 0;
            .searchUserBox {
              .searchNameEnglish {
                font-size: 18px;
                color: #999;
                padding: 30px 0 20px 0;
              }
              .searchUserItem {
                display: flex;
                align-items: center;
                .searchUserName {
                  font-size: 18px;
                  font-weight: bold;
                  color: #333;
                }
                img {
                  width: 38px;
                  height: 38px;
                  border-radius: 50%;
                  margin: 0 20px 0 0;
                }
              }
            }
          }
        }
      }
    }
        //发送文件
    .messageTypeFile {
      width: 283px;
      background: #fff;
      border-radius: 16px;
      border: 1px solid #E9EDF7;
      cursor:pointer;
      .messageTypeFileTop{
        border-bottom: 1px solid #E9EDF7;
        .messageTypeFileSize {
          padding: 10px 20px 10px 20px;
        }
        .messageTypeFileInfo {
          display: flex;
          align-items: center;
          padding:20px 20px 20px 20px;
          .messageTypeFileTitle {
            font-size: 16px;
            color: #333;
            height: auto; /* Allow height to adjust */
            max-height: 48px; /* Maximum height for two lines (16px * 2) */
            overflow: hidden; /* Hide overflow */
            text-overflow: ellipsis; /* Show ellipsis for overflow text */
            display: -webkit-box; /* Use flexbox for multi-line ellipsis */
            -webkit-box-orient: vertical; /* Set box orientation to vertical */
            -webkit-line-clamp: 2; /* Limit to 2 lines */
            white-space: normal; /* Allow text wrapping */
            width: 200px;
          }
          .messageTypeFileIcon {
            img {
              width: 42px;
              height: 42px;
            }
          }
        }
      }
      .messageTypeFileLogo {
        padding:15px 20px;
      }
      .messageTypeFileSize {
        font-size: 12px;
        color: #999;
      }
      .messageTypeFileLogo {
        font-size: 12px;
        color: #999;
      }
    }
        //发送名片
        .messageTypeCard {
      width: 321px;
      background: #fff;
      border-radius: 16px;
      border: 1px solid #E9EDF7;
      .messageTypeCardTop {
        display: flex;
        align-items: center;
        padding: 20px 20px 24px 20px;
        border-bottom: 1px solid #E9EDF7;
        .messageTypeCardIcon {
          margin-right: 15px;
          img {
            width: 58px;
            height: 58px;
            border-radius: 50%;
          }
        } 
        .messageTypeCardName {
          font-size: 16px;
          color: #333;
        }
      }
      .messageTypeCardText {
        padding-top: 14px;
        padding-left: 20px;
        padding-bottom: 15px;
        font-size: 12px;
        color: #999999;
      }
    }
    //发送图片
    .messageTypeImage {
      width: 200px;
      //height: 200px;
      img {
        max-width: 200px;
        border-radius: 16px;
        border: 1px solid #ECECEC;
      }
    }
        //发送群聊
        .messageGroupInvite {
      background: #fff;
      border-radius: 16px;
      border: 1px solid #E9EDF7;
      .messageGroupInviteTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 24px 20px;
        .messageGroupInviteIcon {
          margin-right: 15px;
          img {
            width: 58px;
            height: 58px;
            border-radius: 50%;
          }
        }
        .messageGroupInfoText {
          .messageGroupInfoTextTitle {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
          }
          .messageGroupInfoTextTxt {
            font-size: 12px;
            color: #999;
            line-height: 18px;
          }
        }
      }
      .messageGroupInviteText {
        padding-top: 14px;
        padding-left: 20px;
        padding-bottom: 15px;
        font-size: 12px;
        color: #999999;
        border-top: 1px solid #E9EDF7;
      }
    }
    //加入群聊弹出框
    .addGroupWindow {
      .addGroupWindowImg {
        img {
          width:58px;
          height: 58px;
        }
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .addGroupWindowTitle {
        font-size: 18px;
        color: #333;
        text-align: center;
        padding: 20px 0 40px 0;
      }
      .addGroupWindowText {
        font-size: 12px;
        color: #999;
        text-align: center;
      }
    }
    .searchFriendBox {
          
        
         
            .searchFriendItem {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              border-bottom: 1px solid #E9EDF7;
              padding: 0 20px 30px 20px;
              .searchFriendAvatar {
                img {
                  width: 66px;
                  height: 66px;
                  border-radius: 50%;
                }
                margin-right: 15px;
              }
              .searchFriendInfo {
                flex: 1;
                .searchFriendName {
                  display: flex;
                  align-items: center;
                  .gender {
                    img {
                      width: 12px;
                      height: 12px;
                    }
                  }
                  img {
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                  }
                  .searchFriendNameText {
                    font-size: 18px;
                    width: 120px;
                    height: 28px;
                    line-height: 28px;
                    white-space: nowrap; 
                    overflow: hidden; 
                    text-overflow: ellipsis;
                  }
                }
                .searchFriendPhone {
                  font-size: 14px;
                  color: #999;
                  margin-top: 10px;
                }
              }
            }
            .searchFriendLineBox {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              padding: 20px;
              border-bottom: 1px solid #E9EDF7;
              .searchFriendLineTitle{
                font-size: 16px;
                color: #999999;
                width: 90px;
              }
              .searchFriendLineContent{
                font-size: 16px;
                color: #333;
                flex: 1;
                .searchFriendLineContentItem{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                }
              }
            }
            .searchFriendButton {
              padding:40px 0 10px 0;
              text-align: center;
              .searchFriendButtonItem {
                font-size: 14px;
                color: #5570F1;
                img {
                  width: 30px;
                  height: 30px;
                  margin-bottom: 5px;
                }
              }
            }
          }
          .nodata{
            margin: 0 auto;
            text-align: center;
            font-size: 18px;
            height: 400px;
            line-height: 400px;
          }
  

</style>