admin_home/src/views/chat/hall.vue

<template>
  <div class="mainBox">
    <div class="hallBox">
      <div class="hallLeft">
        <!--添加好友 start------------------------------------------>
        <hallTitle :name="tableTitleName" @addUser="creatGroup" />
        <!--添加好友 end------------------------------------------>
        <!--搜索 start------------------------------------------>
        <div class="searchBox">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchConversation">
          </el-input>
        </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">
              </div>
              <div class="userInfo">
                <div class="userName">
                  <div class="userNameText">{{item.user_name}}</div>
                  <div class="userMessageNum">{{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">{{item.num}}</div>
                </div>
              </div>
            </div>
          </div>
          <!--普通用户 end------------------------------------------>
          <!--群聊 start------------------------------------------>
          <!-- <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="(item,index) in groupList" :key="item.id" @click="selectGroup(item)">
            <div class="userAvatar">
              <img src="@/assets/chat/user/group.jpg" alt="">
            </div>
            <div class="userInfo">
              <div class="userName">
                <div class="userNameText">{{item.group_name}}</div>
                <div class="userMessageNum">{{item.max_num > 99 ? '99+' : item.max_num }}</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>
        <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}}</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'">
                <div class="otherUserIcon">
                  <img :src="item.receiver_avatar">
                </div>
                <div class="otherUserMessageText">
                  {{item.content}}
                </div>
              </div>
              <!--文字消息类型 我-->
              <div class="meUserMessage" v-if="item.action=='said'">
                <div class="meUserMessageText">
                  {{item.content}}
                </div>
                <div class="meUserIcon">
                  <img :src="item.user_avatar">
                </div>
              </div>
            </div>
            <!-- 文件类型
            <div class="meUserMessage">
              <div class="meUserMessageText">
                <div class="messageTypeFile">
                  <div class="messageTypeFileTop">
                    <div class="messageTypeFileInfo">
                      <div class="messageTypeFileTitle">文件标题文件标题文件标题文件标题文件标题文件标题文件标题.doc</div>
                      <div class="messageTypeFileIcon">
                        <img src="@/assets/chat/file.png" alt="">
                      </div>
                    </div>
                    <div class="messageTypeFileSize">20kb</div>
                  </div>
                  <div class="messageTypeFileLogo">恒星管理平台</div>
                </div>
              </div>
              <div class="meUserIcon">
                <img src="@/assets/chat/user/user.png" alt="">
              </div>
            </div> -->

            <!-- 图片类型
            <div class="meUserMessage">
              <div class="meUserMessageText">
                <div class="messageTypeImage">
                  <img src="@/assets/chat/user/user.png" alt="">
                </div>
              </div>
              <div class="meUserIcon">
                <img src="@/assets/chat/user/user.png" alt="">
              </div>
            </div> -->

            <!--发名片
            <div class="meUserMessage">
              <div class="meUserMessageText">
                <div class="messageTypeCard">
                  <div class="messageTypeCardTop">
                    <div class="messageTypeCardIcon">
                      <img src="@/assets/chat/user/user.png">
                    </div>
                    <div class="messageTypeCardName">用户名称</div>
                  </div>
                  <div class="messageTypeCardText">
                    个人名片
                  </div>
                </div>
              </div>
              <div class="meUserIcon">
                <img src="@/assets/chat/user/user.png" alt="">
              </div>
            </div> -->
            
            <!-- <div class="newUserStatus">
              <div class="newUserStatusText">
                <span>"</span>
                <span class="newUserStatusTextName">新用户新用户新用户新用户</span>
                <span>"加入了群聊</span>
              </div>
            </div> -->

            <!--群聊邀请-->
            <div class="meUserMessage">
              <div class="meUserMessageText">
                <div class="messageGroupInvite" @click="openGroupInviteWindow">
                  <div class="messageGroupInviteTop">
                    <div class="messageGroupInviteIcon">
                      <img src="@/assets/chat/user/group.jpg">
                    </div>
                    <div class="messageGroupInfoText">
                      <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
                      <div class="messageGroupInfoTextTxt">您的好友"XX"邀请你加入群聊"XX",进入可查看群聊</div>
                    </div>
                  </div>
                  <div class="messageGroupInviteText">
                    群聊名片
                  </div>
                </div>
              </div>
              <div class="meUserIcon">
                <img src="@/assets/chat/user/user.png">
              </div>
            </div>

          </div>
          <div class="sendMessageBox">
            <div class="sendMessageTools">
              <img src="@/assets/chat/send_img.png">
              <img src="@/assets/chat/send_file.png">
              <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
            </div>
            <div class="sendMessageInput">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="userMessage"
                :rows="6"
                resize="none"
                maxlength="200"
              >
              </el-input>
            </div>
            <div class="sendMessageButton">
              <el-button type="primary" size="medium">发送 <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>
            <!-- <div class="rightSlideSearch">
              <div class="searchBox">
                <el-input
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="searchUser">
                </el-input>
              </div>
            </div> -->
            <div class="rightSlideUserBox">
              <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
                <div class="rightSlideUserItemIcon">
                  <span class="el-dropdown-link">
                    <img :src="item.avatar">
                  </span>
                </div>
                <div class="rightSlideUserItemName">
                  {{item.user_name}}
                </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 class="rightSlideUserItem">
                <div class="rightSlideUserItemIcon">
                  <div class="addUserIcon">
                    <i class="el-icon-plus"></i>
                  </div>
                </div>
                <div class="rightSlideUserItemName">
                  添加
                </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" @click="editGroupNameWindow=true">
                    {{this.messageTitle}}
                  </div>
                </div>
                <div class="groupChatSystem">
                  <div class="groupChatTitle">群公告</div>
                  <div class="groupChatText" v-if="this.groupProfile!=''" @click="editGroupNoticeWindow=true">
                    {{this.groupProfile}}
                  </div>
                  <div class="groupChatText" v-else @click="editGroupNoticeWindow=true">
                    暂无群公告
                  </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="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">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchGroup">
          </el-input>
          <!--搜索用户 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">
              <div class="searchUserName" v-if="item.remark!=null">{{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">
                <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}}</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">
          </el-input>
        </div>
        <!--聊天记录选项卡 start------------------------------------------------------------>
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部" name="all">
            <!--文字消息 start------------------------------------------------------------>
            <!-- <div class="fileWindowMessageTime">2024-11-10</div> -->
            <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
              <div class="fileWindowMessageItemIcon">
                <img :src="item.receiver_avatar">
              </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">{{item.content}}</div>
              </div>
            </div>
            <!--文字消息 end------------------------------------------------------------>
            <!--文件消息 start------------------------------------------------------------>
            <!-- <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="messageTypeFile">
                  <div class="messageTypeFileTop">
                    <div class="messageTypeFileInfo">
                      <div class="messageTypeFileTitle">文件标题文件标题文件标题文件标题文件标题文件标题文件标题.doc</div>
                      <div class="messageTypeFileIcon">
                        <img src="@/assets/chat/file.png" alt="">
                      </div>
                    </div>
                    <div class="messageTypeFileSize">20kb</div>
                  </div>
                  <div class="messageTypeFileLogo">恒星管理平台</div>
                </div>
              </div>
            </div> -->
            <!--文件消息 end------------------------------------------------------------>
            <!--图片消息 start------------------------------------------------------------>
            <!-- <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="messageTypeImage">
                  <img src="@/assets/chat/user/user.png" alt="">
                </div>
              </div>
            </div> -->
            <!--图片消息 end------------------------------------------------------------>
          </el-tab-pane>
          <el-tab-pane label="文件" name="file">
            <div class="fileWindowFlieBox">
              <div class="fileWindowFlieItem">
                <div class="fileWindowFlieItemIcon">
                  <img src="@/assets/chat/file.png">
                </div>
                <div class="fileWindowFlieItemMain">
                  <div class="fileWindowFlieItemTitle">
                    <div>
                      文件标题文件标题文件标题.dox
                    </div>
                    <div class="fileWindowFlieItemTime">
                      12:40
                    </div>
                  </div>
                  <div class="fileWindowFlieInfo">
                    <div>用户名</div>
                    <div>19.4k</div>
                  </div>
                </div>
              </div>
              <div class="fileWindowFlieItem">
                <div class="fileWindowFlieItemIcon">
                  <img src="@/assets/chat/file.png">
                </div>
                <div class="fileWindowFlieItemMain">
                  <div class="fileWindowFlieItemTitle">
                    <div>
                      文件标题文件标题文件标题.dox
                    </div>
                    <div class="fileWindowFlieItemTime">
                      12:40
                    </div>
                  </div>
                  <div class="fileWindowFlieInfo">
                    <div>用户名</div>
                    <div>19.4k</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片" name="img">
            <div class="fileWindowMessageTime">2024-11-10</div>
            <div class="fileWindowImageBox">
              <div><img src="@/assets/chat/user/user.png"></div>
              <div><img src="@/assets/chat/user/user.png"></div>
              <div><img src="@/assets/chat/user/user.png"></div>
              <div><img src="@/assets/chat/user/user.png"></div>
              <div><img src="@/assets/chat/user/user.png"></div>
            </div>
            <div class="fileWindowMessageTime">2024-11-11</div>
            <div class="fileWindowImageBox">
              <div><img src="@/assets/chat/user/user.png"></div>
            </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="请输入"></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">某某群聊</div>
        <div class="addGroupWindowText">某某好友"用户名称"邀请您加入"某某群聊"，进入可查看群消息</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------------------------------------------------------------>

    <!-- <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';


export default {
  components: {
    hallTitle
  },
  data() {
    return {
      //1.全局配置 start---------------------------------------->
      myUserId:'',//我的用户id
      tableTitleName:'聊天列表',//左侧菜单标题
      messageTitle:'',//当前的聊天名称
      groupProfile:'',//当前的群公告
      //1.全局配置 end---------------------------------------->

      //2.会话列表 start---------------------------------------->
      conversationList:[],//会话列表
      chatrecords:[],//聊天记录
      ifTop:false,//是否为置顶
      searchConversation:'',//搜索会话
      //2.会话列表 end---------------------------------------->

      //3.聊天记录 start---------------------------------------->
      ifNoMessage:true,//如果没有选择任何聊天记录
      searchChatRecords:"",//搜索聊天记录
      userMessage:'',//用户发送的消息
      fileWindowStatus:false,//聊天记录弹出框是否显示
      activeName: 'all',//聊天记录选项卡
      time:'',//按照时间搜索
      //3.聊天记录 end---------------------------------------->

      //4.群聊 start---------------------------------------->
      groupWindowStatus:false,//添加聊天群组出框是否显示
      editGroupNoticeWindow:false,//编辑群公告弹出框
      editGroupNameWindow:false,//编辑群名称弹出框
      addGroupWindow:false,//加入群聊弹出框
      groupId:'',//准备加入群聊的id
      friendsList:[],//好友列表
      searchGroup:'',//搜索群聊
      groupUserList:[],//群成员列表
      groupInfo:{},//群设置信息
      creatorId:'',//群主id
      //4.群聊 end---------------------------------------->
      
      //5.用户详情 start---------------------------------------->
      rightSlideBoxShow:false,//右侧菜单是否显示
      searchUser:'',//搜索用户
      //5.用户详情 end---------------------------------------->

      //6.名片 start---------------------------------------->
      userCardMessage:'',//用户留言
      //6.名片 end---------------------------------------->

      //7.加好友 start---------------------------------------->
      addUserWindowStatus:false,//添加用户弹出框是否显示
      form:{
        //好友申请
        addUserForm:{
          notes:"",//备注
          nickname:"",//修改昵称
        }
      },
      //7.加好友 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;
      }).catch(() => {
        this.$message.error('获取会话列表失败!')
      })
    },
    //1.2选择会话
    selectConversation(item){
      //清理单聊状态
      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)
      }).catch(() => {
        this.$message.error('获取聊天记录失败!')
      })
    },
    //1.会话列表 end---------------------------------------->

    //2.群聊 start---------------------------------------->
    //2.1打开群聊创建窗口
    creatGroup(){
      this.groupWindowStatus = true;
      //获得好友列表
      this.getFriendsList();
    },
    //2.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.3取消选择好友
    cancelSelectFriends(id){
      this.friendsList.forEach(item => {
        if(item.id == id){
          item.status = false;
        }
      });
    },
    //2.4清空并关闭创建群弹出框
    clearCreatGroupWindow(){
      this.friendsList.forEach(item => {
        item.status = false;
      });
      this.groupWindowStatus = false;
    },
    //2.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.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.7选择群聊
    selectGroup(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.8获取群聊消息
    getGroupChatRecords(group_id){
      this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
        console.log(res)
        this.chatrecords = res.data.data;
        //滚动条滚动到底部
        this.scorllBottom();

      }).catch(() => {
        this.$message.error('获取群设置信息失败!')
      })
    },
    //2.9打开群设置窗口
    openGroupSystem(){
      this.rightSlideBoxShow = !this.rightSlideBoxShow;
    },
    //2.10获取群成员
    getGroupMember(group_id){
      this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
        this.groupUserList = res.data;
      }).catch(() => {
        this.$message.error('获取群成员信息失败!')
      })
    },
    //2.11 获取群设置信息
    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.12打开群聊邀请窗口
    openGroupInviteWindow(id){
      this.addGroupWindow = true;
    },
    //2.13加入群聊
    joinGroup(){
      this.$store.dispatch('chat/joinGroup',{group_id:this.groupId}).then(res=> {
        this.$message.success('加入群聊成功!')
        this.addGroupWindow = false;
      }).catch(() => {
        this.$message.error('加入群聊失败!')
      })
    },
    //2.14退出群聊
    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.15删除群聊
    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.15编辑群名称
    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.editGroupNoticeWindow = false;
      }).catch(() => {
        this.$message.error('编辑群公告失败!')
      })
    },
    //2.16编辑群公告
    editGroupNotice(){
      let data = {
        group_id:this.groupId,
        profile:this.groupProfile//群公告
      }
      this.$store.dispatch('chat/updateGroup',data).then(res=> {
        this.$message.success('成功添加群公告')
        //重新获取群详情
        this.getGroupSystem(this.groupId)
        this.editGroupNameWindow = false;
      }).catch(() => {
        this.$message.error('编辑群公告失败!')
      })
    },
    //2.群聊 end---------------------------------------->

    //3.全局应用 start---------------------------------------->
    //3.1 滚动条滚动到底部
    scorllBottom(){
      //滚动条滚动到底部
      this.$nextTick(() => {
        const rightUserMessageBox = this.$refs.rightUserMessageBox;
        if (rightUserMessageBox) {
          rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
        }
      });
    },
    //3.全局应用 end---------------------------------------->
    
    //老刘的代码 start---------------------------------------->
    // selectConversation(conversation) {
    //   this.activeConversation = conversation;
    // },
    // sendMessage() {
    //   if (this.newMessage.trim() !== '') {
    //     //msg_type 消息类型  talk_type：聊天类型 1单聊 2群聊
    //     const message = { 
    //       msg_type:1,
    //       talk_type:this.activeConversation.talk_type,
    //       content:this.newMessage,
    //       session_id:this.activeConversation.session_id,
    //       msg_type:1,
    //       receiver_id:this.activeConversation.user_id?this.activeConversation.user_id:this.activeConversation.group_id
    //     };
    //     // this.activeConversation.messages.push(message);
    //     console.log("发送消息",this.ws,WebSocket.OPEN)
    //     if (this.ws && this.ws.readyState === WebSocket.OPEN) {
    //       this.ws.send(JSON.stringify(message));
    //     }
    //     this.newMessage = '';
    //   }
    // },
    // handleIncomingMessage(event) {
    //   const message = JSON.parse(event.data);
    //   console.log("监听消息：",message)
    //   const conversation = this.conversations.find(conv => conv.session_id === message.session_id); // 假设所有消息都发送给Alice
    //   if (conversation) {
    //     conversation.messages.push(message);
    //   }
    // },
    // //获取会话列表
    // getTalkSessionList(){
    //   let parames  = {
    //     'page':1,
    //     'pageSize':10
    //   }
    //   // this.$api.chat.getTalkSessionList(parames).then(res=>{
    //   //     this.conversations =  res.data.row
    //   // });
    //   this.$store.dispatch('chat/getTalkSessionList',parames).then(res=> {
    //     this.conversations =  res.data.row
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '获取聊天记录失败！'
    //     });
    //   })
    // },
    // showContextMenu(event, conversation) {
    //   this.contextMenuVisible = true; // 显示右键菜单
    //   this.contextMenuX = event.clientX; // 获取鼠标 X 坐标
    //   this.contextMenuY = event.clientY; // 获取鼠标 Y 坐标
    //   this.selectedConversation = conversation; // 保存选中的对话
    // },
    // handleMenuCommand(command) {
    //   switch (command) {
    //     case 'view':
    //       this.viewConversation(this.selectedConversation);
    //       break;
    //     case 'delete':
    //       this.deleteConversation(this.selectedConversation);
    //       break;
    //     case 'edit':
    //       this.editConversation(this.selectedConversation);
    //       break;
    //   }
    //   this.contextMenuVisible = false; // 隐藏右键菜单
    // },
    // viewConversation(conversation) {
    //   // 查看对话的逻辑
    //   console.log('查看对话:', conversation);
    // },
    // deleteConversation(conversation) {
    //   // 删除对话的逻辑
    //   console.log('删除对话:', conversation);
    // },
    // editConversation(conversation) {
    //   // 编辑对话的逻辑
    //   console.log('编辑对话:', conversation);
    // },
    //老刘的代码 end---------------------------------------->
  },
  mounted() {
    //1.获取会话列表
    this.getConversationList();
    //2.获取我的用户id
    this.myUserId = this.$store.state.user.userid;

    //老刘的代码 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 = URL.WebsocketUrl +"?token=" + adminToken;
    // this.ws = new WebSocket(websocketNewUrl);
    // this.ws.addEventListener('message', this.handleIncomingMessage);

    // this.ws.addEventListener('close', function (event) {
    //   // 连接关闭时执行的操作
    //   console.log("关闭链接",event)
    // });

    // this.getTalkSessionList()
    // // 监听全局点击事件以关闭右键菜单
    // document.addEventListener('click', () => {
    //   this.contextMenuVisible = false;
    // });
    //老刘的代码 end---------------------------------------->
  },
  beforeDestroy() {
    // if (this.ws) {
    //   this.ws.removeEventListener('message', this.handleIncomingMessage);
    //   this.ws.close();
    // }
    // // 清理事件监听
    // document.removeEventListener('click', () => {
    //   this.contextMenuVisible = false;
    // });
  }
};

</script>

<style scoped lang="less">
  .hallBox {
    display: flex;
    margin: 30px;
    //左侧
    .hallLeft {
      width: 420px;
      background: #fff;
      border-radius: 20px;
      margin-right: 20px;
      .searchBox {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 20px;
      }
      .userListBox {
        padding: 15px 0;
        overflow-y: auto;
        height: 1000px;
        .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: 1184px;
      display: flex;
      flex-direction: column;
      .ifHallRigthNoMessage {
        color: #CCCCCC;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        height: 1184px;
        line-height: 1184px;
      }
      .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;
        }
      }
      .rightPositionBox { 
        flex: 1;
        position: relative;
        .rightUserMessageBox {
          padding: 40px;
          height: 760px;
          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;
            }
            .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;
            }
            .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 {
        padding: 20px 40px;
        border-top: 1px solid #E7E7E7;
        box-sizing: border-box;
        height: 276px;
        .sendMessageTools {
          img {
            width: 36px;
            height: 36px;
            margin-right: 30px;
            cursor: pointer;
          }
        }
        .sendMessageInput {
          margin-top: 20px;
        }
        .sendMessageButton {
          padding-top: 20px;
          text-align: right;
          button {
            width: 120px;
            height: 38px;
          }
        }
      }
      //右侧菜单
      .rightSlideBox {
        width: 420px;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        height: 100%;
        box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
        .rightSlideBoxClose {
          padding: 20px 20px 0 20px;
          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;
        }
        .rightSlideUserBox {
          box-sizing: border-box;
          padding: 40px 40px 10px 40px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          //border-bottom: 1px solid #E9EDF7;
          .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;
                
              }
              .addUserIcon {
                width: 58px;
                height: 58px;
                line-height: 58px;
                background: #F0F0F0;
                border-radius: 50%;
                text-align: center;
              }
            }
            .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: 80px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30px 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;
            .groupChatTitle {
              font-size: 18px;
              color: #333;
              margin-bottom: 15px;
            }
            .groupChatText {
              font-size: 18px;
              color: #999;
              cursor: pointer;
            }
          }
        }
        .rightSlideFooter {
          font-size: 18px;
          color: #CC5F5F;
          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;
    .messageTypeFileTop{
      border-bottom: 1px solid #E9EDF7;
      .messageTypeFileSize {
        padding: 10px 20px 10px 20px;
      }
      .messageTypeFileInfo {
        display: flex;
        align-items: center;
        padding:20px 20px 0 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;
      .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;
        .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;
            }
            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;
    }
    .fileWindowMessageItemBox {
      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;
        }
      }
    }
    //文件列表
    .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;
    }
  }
  //弹出框底部按钮
  .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;
    }
  }
  //表单微调 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>