admin_home/src/views/chat/hall.vue

<template>
  <div class="mainBox">
    <div class="hallBox">
      <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="tableTitleName" @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 class="searchFriendBox" v-if="searchConversationStatus">
            <div class="searchFriendClose">
              <div @click="closeSearchConversation" class="rightSlideBoxCloseIcon">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <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>
        </div>
        <!--搜索 end------------------------------------------>
        <div class="userListBox">
          <!--会话列表 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>
      <!--右侧菜单 start------------------------------------------>
      <div class="hallRight" v-if="ifNoMessage==true">
        <div class="ifHallRigthNoMessage">恒星管理平台</div>
      </div>
      <div class="hallRight" v-else>
        <!--加载中 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="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 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" @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 class="newUserStatus">
              <div class="newUserStatusText">
                <span>"</span>
                <span class="newUserStatusTextName">新用户新用户新用户新用户</span>
                <span>"加入了群聊</span>
              </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="sendUserMessage"
              >
              </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 class="rightSlideUserItemMore">
                  <div class="rightSlideUserItemMoreMain">
                    <div class="rightSlideUserItemMoreMainIcon">
                      <img src="@/assets/chat/user/user.png">
                    </div>
                    <div class="rightSlideUserItemMoreMainInfo">
                      <div class="rightSlideUserItemMoreMainInfoTop">
                        <div class="rightSlideUserItemMoreUserName">
                          <div>用户名</div>
                          <div class="rightSlideUserItemMoreUserMore">
                            <img src="@/assets/chat/boy.png">
                          </div>
                        </div>
                        <div class="rightSlideUserItemMoreUserMoreIcon">
                          <img src="@/assets/chat/fi_more.png">
                        </div>
                      </div>
                      <div class="rightSlideUserItemMoreNumber">
                        账号：15210211200
                      </div>
                    </div>
                  </div>
                  <div class="rightSlideUserItemMoreLine">
                    <div class="rightSlideUserItemMoreLineItem">
                      <div class="rightSlideUserItemMoreTitle">备注</div>
                      <div class="rightSlideUserItemMoreText">
                        用户名
                        <i class="el-icon-edit"></i>
                      </div>
                    </div>
                    <div class="rightSlideUserItemMoreLineItem">
                      <div class="rightSlideUserItemMoreTitle">共同群聊</div>
                      <div class="rightSlideUserItemMoreText">0个</div>
                    </div>
                    <div class="rightSlideUserItemMoreLineItem">
                      <div class="rightSlideUserItemMoreTitle">添加方式</div>
                      <div class="rightSlideUserItemMoreText">通过账号添加</div>
                    </div>
                    <div class="rightSlideUserItemMoreLineButton">
                      <div class="rightSlideUserItemMoreLineGroup">
                        <img src="@/assets/chat/sendmessage.png">
                        <div>发消息</div>
                      </div>
                    </div>
                  </div>
                </div> -->
              </div>

              
            </div>
            <!-- <div class="rightSlideMore">
              显示更多 <i class="el-icon-arrow-down"></i>
            </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 class="rightSlideFunction">
                <div class="rightSlideFunctionItem">
                  <div class="rightSlideFunctionItemText">设置为置顶</div>
                  <div class="rightSlideFunctionItemIcon">
                    <el-switch
                      v-model="ifTop"
                      active-color="#5570F1"
                      inactive-color="#BBC5CB">
                    </el-switch>
                  </div>
                </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 class="groupChatSystem">
                  <div class="groupChatTitle">我在本群的昵称</div>
                  <div class="groupChatText">
                    仅群主可修改
                  </div>
                </div> -->
              </div>
              <!-- <div class="rightSlideFunction">
                <div class="rightSlideFunctionItem">
                  <div class="rightSlideFunctionItemText">显示群成员昵称</div>
                  <div class="rightSlideFunctionItemIcon">
                    <el-switch
                      v-model="ifTop"
                      active-color="#5570F1"
                      inactive-color="#BBC5CB">
                    </el-switch>
                  </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 class="rightSlideFooter isShare" @click="openShareMyGroup">
              分享群聊
            </div>
            <div class="rightSlideFooter" @click="delGroup" v-if="creatorId==myUserId">
              解散群聊
            </div>
            <div class="rightSlideFooter" @click="closeGroup" v-else>
              退出群聊
            </div>
            <div class="rightSlideFooter isLast" @click="openGroupSystem">
              关闭
            </div> -->
          </div>
        </div>
        <!--右侧菜单 end------------------------------------------>
      </div>
    </div>
    <!--大厅 end------------------------------------------------------------>

    <!--添加群组弹出框 start------------------------------------------------------------>
    <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"></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>
    <!--添加群组弹出框 end------------------------------------------------------------>

    <!--聊天记录弹出框 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.updated_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.updated_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="addUserWindowStatus" title="添加用户" :close-on-click-modal="false" width="420px">
      <div class="messageFormBox">
        <div class="messageFormTitle">发送添加朋友申请</div>
        <div class="messageFormInput">
          <el-input v-model="form.addUserForm.notes" placeholder="请输入"></el-input>
        </div>
        <div class="messageFormTitle">验证消息</div>
        <div class="messageFormInput">
          <el-input v-model="form.addUserForm.nickname" placeholder="请输入"></el-input>
        </div>
        <div class="footerButtonBox">
          <el-button type="info">取消</el-button>
          <el-button type="primary">确定</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="groupProfile" placeholder="请输入"></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="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
      <div>
        <div>
          <el-input type="textarea" resize="none" v-model="messageTitle" 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="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------------------------------------------------------------>


    <!--编辑群成员弹出框 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}}</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="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="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="useShareUserId">
                    <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="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" 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>
    <!--放大图片 end------------------------------------------------------------>

    <!--老刘的代码 start------------------------------------------------------------>
    <!-- <div class="layerBox">
      <el-container style="height: 100vh;">
        <el-aside width="300px" style="background: #f2f2f2;">
          <el-menu>
            <div class="conversation-list">会话记录（100）</div>
            <el-menu-item 
              v-for="conversation in conversations" 
              :key="conversation.session_id"
              @click="selectConversation(conversation)"
              @contextmenu.prevent="showContextMenu($event, conversation)"
              :class="{ 'is-active': activeConversation && activeConversation.session_id === conversation.session_id }">
              <div v-if="conversation.talk_type==1">
                <el-avatar :src=conversation.user_avatar>{{ conversation.nickname }}</el-avatar> {{ conversation.nickname }}
              </div>
              <div v-if="conversation.talk_type==2">
                <el-avatar :src=conversation.group_avatar>{{ conversation.group_name }}</el-avatar> {{ conversation.group_name }}
              </div>
            </el-menu-item>

            <el-dropdown v-if="contextMenuVisible" :style="{ position: 'absolute', top: contextMenuY + 'px', left: contextMenuX + 'px' }" @command="handleMenuCommand">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="view">查看</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main style="padding: 20px;">
            <div v-if="activeConversation">
              <div v-for="(message, index) in activeConversation.messages" :key="index"  class="message">
                <div v-if="message.is_me==1" :class="{'is_me':message.is_me==1}">
                  {{ message.content }} <el-avatar :src=message.user_avatar>{{ message.nickname }}</el-avatar>
                </div>
                <div  v-else>
                  <el-avatar :src=message.user_avatar>{{ message.nickname }}</el-avatar>{{ message.content }}
                </div>
              </div> 
            </div>
            <div v-else>
              请选择一个会话
            </div>
          </el-main>

          <el-footer height="60px" style="padding: 10px; background: #fff;">
            <el-input 
              v-model="newMessage" 
              placeholder="输入消息..."
              @keyup.enter="sendMessage"
              style="width: calc(100% - 100px); margin-right: 10px;">
            </el-input>
            <el-button @click="sendMessage" type="primary">发送</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </div>  -->
    <!--老刘的代码 end------------------------------------------------------------>
  </div>
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//引入baseUrl
import URL from '@/utils/baseUrl';
//引入组件
import hallTitle from './components/hallTitle.vue';
import RingChart from '../dashboard/admin/components/RingChart.vue';
import { TimeSelect } from 'element-ui';

export default {
  components: {
    hallTitle
  },
  data() {
    return {
      //1.全局配置 start---------------------------------------->
      myUserId:'',//我的用户id
      tableTitleName:'聊天列表',//左侧菜单标题
      messageTitle:'',//当前的聊天名称
      groupProfile:'',//当前的群公告
      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:"",//文件名
        }
      }
      //8.发消息 end---------------------------------------->
      
      //老刘的代码 start---------------------------------------->
      // activeConversation: null,
      // newMessage: '',
      // conversations: [],
      // ws: null,
      // contextMenuVisible: false, // 控制右键菜单的显示
      // contextMenuX: 0, // 右键菜单的 X 坐标
      // contextMenuY: 0, // 右键菜单的 Y 坐标
      // selectedConversation: null // 选中的对话
      //老刘的代码 end---------------------------------------->
    };
  },
  methods: {
    //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){
      console.log(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){
      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(){
      //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){
          //6.如果存在，则选中该会话
          this.selectConversation(SeleteItem)
        }else{
          //7.如果不存在，则创建单聊
          this.createSession();
        }
        
      }).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));
        //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);
      }      
    },
    //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){
      //选择会话的时候开启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;
        if(res.data.profile==null){
          this.groupProfile = "暂无群公告"
        }else{
          this.groupProfile = 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' 
      }).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.messageTitle//群名称
      }
      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.groupProfile//群公告
      }
      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
      //获得要加入的群聊详情
      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 添加好友
    addFriend(id){
      console.log(id)
      this.addFriendWindowStatus = true;
      this.addform.friend_id = id;
    },
    addMyFriend(){
      this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
        this.$message.success(res.data)
        this.addFriendWindowStatus = false;
      })
    },
    //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);
      console.log("监听消息：",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(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(typeof message.content)
        // console.log(message.content)
        // 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---------------------------------------->
  },
  mounted() {
    //开启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 = process.env.VUE_APP_BASE_WEBSOCKET +"?token=" + adminToken;
    //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
    this.ws = new WebSocket(websocketNewUrl);
    this.ws.addEventListener('message', this.handleIncomingMessage);

    //当连接关闭的时候关闭websocket
    this.ws.addEventListener('close', function (event) {
      // 连接关闭时执行的操作
      console.log("连接被关闭！",event)
      // 弹窗询问用户是否手动刷新
      that.getWebsocket();
    });
    
    //开启websocket连接 end---------------------------------------->

    //从通讯录创建单聊 start---------------------------------------->
    //当ws创建成功以后再执行，防止数据未加载
    this.ws.onopen = () => {
      console.log("ws创建成功!");
      //判断当前路由是否携带friend_id
      if(this.$route.query.friend_id){
        //1.从通讯录进入会话大厅
        this.retrieveSession();
        //2.获取我的用户id
        this.myUserId = this.$store.state.user.userid;
        //把这个id存一下
        this.createMessageId = this.$route.query.friend_id;
      }else{
        //直接进入会话大厅
        //1.获取会话列表
        this.getConversationList();
        //2.获取我的用户id
        this.myUserId = this.$store.state.user.userid;
        //3.循环获取会话列表
        //开启loading
        this.hallLeftLoading = true;
        this.forSearchConversationList();
      }
    };
    //从通讯录创建单聊 end---------------------------------------->
  },
  beforeDestroy() {
    //页面销毁的时候清除定时器获取列表
    clearInterval(this.listTimeOut);
    //页面销毁的时候关闭websocket
    if (this.ws) {
      this.ws.removeEventListener('message', this.handleIncomingMessage);
      this.ws.close();
    }
  }
}
</script>

<style scoped lang="less">
  .hallBox {
    display: flex;
    margin: 30px;
    //左侧
    .hallLeft {
      width: 420px;
      background: #fff;
      border-radius: 20px;
      margin-right: 20px;
      position: relative;
      .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: 20px;
        }
        .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 {
        padding: 15px 0;
        overflow-y: auto;
        height: 560px;
        .active {
          background: #F5F7FD;
          box-sizing: border-box;
          border-right: 4px solid #5570F1 !important;
        }
        .userItem {
          padding: 0 21px 0 25px;
          height: 90px;
          box-sizing: border-box;
          border-right: 4px solid #fff;
          cursor: pointer;
          display: flex;
          align-items: center;
          .flexItemBox{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .userAvatar {
              img {
                width: 58px;
                height: 58px;
                border-radius: 50%;
              }
            }
            .userInfo {
              flex: 1;
              box-sizing: border-box;
              padding-left: 15px;
              .userName {
                display: flex;
                align-items: center;
                justify-content: space-between;
                //padding-bottom: 10px;
                .userNameText {
                  font-size: 18px;
                  font-weight: bold;
                }
                .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: 20px;
      position: relative;
      height: 760px;
      display: flex;
      flex-direction: column;
      position: relative;
      .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: 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;
        }
        .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: 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;
        }
      }
    }
  }
  //不同的消息类型
  //发送文件
  .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;
    }
  }
  //添加用户弹出框
  .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;
      }
    }
  }
  //聊天记录弹出框
  .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;
              }
            }
          }
        }
      }
    }
  }
  //添加用户弹出框
  .messageFormBox {
    .messageFormTitle {
      font-size: 18px;
      padding-bottom: 20px;
    }
    .messageFormInput {
      margin-bottom: 30px;
    }
  }
  .imgZoomBox {
    img {
      width: 550px;
    }
  }
  //弹出框底部按钮
  .footerButtonBox {
    padding-top: 40px;
    text-align: center;
  }
  //加入群聊弹出框
  .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;
    }
  }
  .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%;
      }
    }
  }


  //表单微调 start------------------------------------------------------------>*/
  ::v-deep .custom-form-item > .el-form-item__label {
    line-height: 140px !important;
  }
  ::v-deep .custom-textarea .el-textarea__inner {
    resize: none; /* 禁止用拖拽调整大小 */
  }
  ::v-deep .custom-align-right .el-form-item__label {
    text-align: right; /* 设置标签文字右对齐 */
  }
  ::v-deep .el-select-group__title {
    color: #909399;
  }
  ::v-deep .el-select {
    width: 100% !important;
  }
  ::v-deep .el-tabs__active-bar{
    height: 1px !important;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height:1px !important;
  }
  ::v-deep .el-tabs__header {
    margin-bottom: 0 !important;
  }
  /* 添加样式以确保右键菜单的显示 */
  .el-dropdown {
    z-index: 2000; /* 确保右键菜单在其他元素之上 */
  }
</style>