<template>
  <div class="mainBox">
    <div class="hallBox">
      <div class="hallLeft">
        <!--添加好友 start------------------------------------------>
        <contactsTitle :name="tableTitleName" @addUser="addUser" @closeAddUser="closeAddUser" />
        <!--添加好友 end------------------------------------------>
        <!--搜索 start------------------------------------------>
        <div class="searchBox">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchUserName"
            @keyup.enter.native="searchFriend"
            :disabled="pagestatus !== 4"
          >
          </el-input>
        </div>
        <!--搜索 end------------------------------------------>
        <div class="newFriendBox">新的朋友</div>
        <div class="newFriendImgBox" v-if="pagestatus==4">
          <div class="newFriendImg">
            <img src="@/assets/chat/newcontacts.png">
          </div>
          <div class="newFriendText">
            搜索：{{searchUserName}}
          </div>
          <div class="searchFriendBox" v-if="searchWindowStatus==true">
            <div class="searchFriendItem">
              <div class="searchFriendAvatar">
                <img src="@/assets/chat/user/user.png">
              </div>
              <div class="searchFriendInfo">
                <div class="searchFriendName">
                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null">{{searchFriendList.remark}}</div>
                  <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
                  <!--性别-->
                  <!-- <div class="gender"><img src="@/assets/chat/girl.png"></div> -->
                  <!--更多-->
                  <!-- <img src="@/assets/chat/fi_more.png"> -->
                </div>
                <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
              </div>
            </div>
            <!-- <div v-if="searchFriendList.isfriend==0||searchFriendList.isfriend==null"></div>
            <div class="searchFriendLineBox" v-else @click="openEditWindow">
              <div class="searchFriendLineTitle">备注</div>
              <div class="searchFriendLineContent">
                <div class="searchFriendLineContentItem">
                  <div>{{searchFriendList.remark}}</div>
                  <div><i class="el-icon-edit"></i></div>
                </div>
              </div>
            </div> -->
            <!-- <div class="searchFriendLineBox">
              <div class="searchFriendLineTitle">共同群聊</div>
              <div class="searchFriendLineContent">0个</div>
            </div>
            <div class="searchFriendLineBox">
              <div class="searchFriendLineTitle">添加方式</div>
              <div class="searchFriendLineContent">通过账号添加</div>
            </div> -->
            <div class="searchFriendButton">
              <el-button type="primary" v-if="searchFriendList.isfriend==0||searchFriendList.isfriend==null" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
              <el-button type="danger" v-else @click="deleteFriend(searchFriendList.id)">删除好友</el-button>
            </div>
            <!-- <div class="searchFriendButton">
              <div class="searchFriendButtonItem">
                <img src="@/assets/chat/sendmessage.png">
                <div>发消息</div>
              </div>
            </div> -->
          </div>
        </div>
        <div :class="['newFriendImgBox', pagestatus === 2 ? 'newFriendIActive' : '']" @click="tabPage(2)" v-else>
          <div class="newFriendImg">
            <img src="@/assets/chat/newcontacts.png">
          </div>
          <div class="newFriendText" v-if="pagestatus==4">
            搜索：{{searchUserName}}
          </div>
          <div class="newFriendText" v-else>
            新的朋友
          </div>
        </div>
        <!--用户列表 start------------------------------------------>
        <div class="userListBox" v-if="pagestatus==1||pagestatus==2||pagestatus==3">
          <!-- <div class="userListTitle">A</div> -->
          <div class="userItem" @click="changeUserItem(item.friend_id)" v-for="(item,index) in userFriendList" :key="index" :class="['userItem', { active: item.status == 1 }]">
            <div class="userAvatar">
              <img :src="item.avatar">
            </div>
            <div class="userInfo">
              <div class="userName">
                <div class="userNameText" v-if="item.remark!=null">{{item.user_name}}({{item.remark}})</div>
                <div class="userNameText" v-else>{{item.user_name}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--用户列表 end------------------------------------------>
      </div>
      <div class="hallRight" v-if="pagestatus==1||pagestatus==4">
        <div class="ifHallRigthNoMessage">恒星管理平台</div>
      </div>
      <div class="hallRight" v-if="pagestatus==2">
        <div class="UserNameBox">
          <div class="userName">新的朋友</div>
        </div>
        <div class="rightNewFriendBox" v-for="(item,index) in userApplyList" :key="index">
          <div class="rightNewFriendItem">
            <div class="rightNewFriendAvatar">
              <img src="@/assets/chat/user/user.png">
            </div>
            <div class="rightNewFriendInfo">
              <div class="rightNewFriendName">{{item.remark}}</div>
              <div class="rightNewFriendPhone">{{item.nickname}}</div>
            </div>
          </div>
          <div class="rightNewFriendStatus">
            <div class="rightNewFriendStatus2">
              <el-button type="primary" @click="openWindow(item.id)">接受</el-button>
            </div>
          </div>
        </div>
        <!-- <div class="rightNewFriendBox">
          <div class="rightNewFriendItem">
            <div class="rightNewFriendAvatar">
              <img src="@/assets/chat/user/user.png">
            </div>
            <div class="rightNewFriendInfo">
              <div class="rightNewFriendName">我是某某某</div>
              <div class="rightNewFriendPhone">15210211200</div>
            </div>
          </div>
          <div class="rightNewFriendStatus">
            <div class="rightNewFriendStatus1">已接受</div>
          </div>
        </div>
        <div class="rightNewFriendBox">
          <div class="rightNewFriendItem">
            <div class="rightNewFriendAvatar">
              <img src="@/assets/chat/user/user.png">
            </div>
            <div class="rightNewFriendInfo">
              <div class="rightNewFriendName">我是某某某</div>
              <div class="rightNewFriendPhone">15210211200</div>
            </div>
          </div>
          <div class="rightNewFriendStatus">
            <div class="rightNewFriendStatus2">
              <el-button type="primary" @click="friendWindowStatus=true">接受</el-button>
            </div>
          </div>
        </div> -->
      </div>
      <div class="hallRight" v-if="pagestatus==3">
        <div class="userInfoMainBox">
          <div class="userInfoMainItem">
            <div class="userInfoMainAvatar">
              <img :src="friendInfo.avatar">
            </div>
            <div class="userInfoMainInfo">
              <div class="userInfoMainName">
                <div class="userInfoMainNameText">{{friendInfo.user_name}}</div>
              </div>
              <div class="userInfoMainPhone">账号：{{friendInfo.user_name}}</div>
            </div>
          </div>
          <div class="userInfoMainLineBox">
            <div class="userInfoMainLineTitle">备注</div>
            <div class="userInfoMainLineContent">
              <div class="userInfoMainLineContentItem" @click="openEditWindow">
                <div v-if="friendInfo.remark!=null">{{friendInfo.remark}}</div>
                <div v-else>暂无备注</div>
                <div><i class="el-icon-edit"></i></div>
              </div>
            </div>
          </div>
          <!-- <div class="userInfoMainLineBox">
            <div class="userInfoMainLineTitle">共同群聊</div>
            <div class="userInfoMainLineContent">0个</div>
          </div>
          <div class="userInfoMainLineBox">
            <div class="userInfoMainLineTitle">添加方式</div>
            <div class="userInfoMainLineContent">通过账号添加</div>
          </div> -->
          <div class="userInfoMainButton">
            <!-- <div class="userInfoMainButtonItem">
              <img src="@/assets/chat/sendmessage.png">
              <div>删除好友</div>
            </div> -->
            <el-button type="danger" icon="el-icon-delete" @click="deleteFriend">删除好友</el-button>
          </div>
        </div>
      </div>
    </div>
    <!--发送好友申请弹出框 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="friendWindowStatus" 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="form.remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
              </el-form-item>
            </div> 
          </el-form>
        </div>
        <div class="footerButtonBox">
          <el-button type="info" @click="friendWindowStatus=false">取消</el-button>
          <el-button type="primary" @click="addFriend">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--请求验证弹出框 end------------------------------------------------------------>
    <!--修改备注弹出框 start------------------------------------------------------------>
    <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
      <div>
        <div>
          <el-form :model="form" ref="form" autocomplete="off" label-position="left">
            <div class="formDiv">
              <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
                <el-input v-model="remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
              </el-form-item>
            </div> 
          </el-form>
        </div>
        <div class="footerButtonBox">
          <el-button type="info" @click="editWindowStatus=false">取消</el-button>
          <el-button type="primary" @click="editFriend">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--修改备注弹出框 end------------------------------------------------------------>
  </div>
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//引入baseUrl
import URL from '@/utils/baseUrl';
//引入组件
import contactsTitle from './components/contactsTitle.vue';
import { status } from 'nprogress';
import openWindow from '@/utils/open-window';

export default {
  components: {
    contactsTitle
  },
  data() {
    return {
      //1.全局配置 start------------------------------------------------------------>
      tableTitleName:'通讯录',
      pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
      formLabelWidth:"80px",//表单label宽度
      searchUserName:"",//搜索框
      friendId:"",//要添加的好友id
      friendWindowStatus:false,//通过朋友申请弹出框
      searchWindowStatus:false,//搜索窗口左侧弹出框
      editWindowStatus:false,//修改备注弹出框
      addFriendWindowStatus:false,//发送好友申请弹出框
      editFriendId:"",//要编辑的好友
      //1.全局配置 end------------------------------------------------------------>
      //2.好友列表 start------------------------------------------------------------>
      userFriendList:[],//好友列表
      userApplyList:[],//好友申请列表
      searchFriendList:"",//搜索好友列表
      //2.好友列表 end------------------------------------------------------------>
      //3.通过好友申请 start------------------------------------------------------------>
      form:{
        //好友id
        id:"",
        //好友申请
        remark:"",
        //状态
        status:2
      },
      //3.通过好友申请 end------------------------------------------------------------>
      //4.编辑好友 start------------------------------------------------------------>
      friendInfo:{},//好友信息
      remark:"",//修改的用户备注
      //4.编辑好友 end------------------------------------------------------------>
      //5.发送好友申请 start------------------------------------------------------------>
      addform:{
        //好友id
        id:"",
        //好友申请
        remark:"",
      },
      //5.发送好友申请 end------------------------------------------------------------>
    };
  },
  methods: {
    //0.全局操作 start------------------------------------------------------------>
    //0.1切换页面状态
    tabPage(status){
      this.pagestatus = status;
      if(status==2){
        //如果是2 好友列表状态还原
        for(let item of this.userFriendList){
          item.status = 0;
        }
      }
    },
    //0.全局操作 end------------------------------------------------------------>
    //1.好友列表 start------------------------------------------------------------>
    addUser(){
      this.pagestatus = 4;
    },
    closeAddUser(){
      this.pagestatus = 2;
      this.searchWindowStatus = false;
    },
    //1.1获取联系人列表
    getUserFriendList(){
      //获取用户身份id
      //const userId = this.$store.state.user.userid;
      this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
        let data = res.data;
        for(let item of data){
          item.status = 0; //默认未选中
        }
        this.userFriendList = data;
      }).catch(() => {
        this.$message.error('获取好友列表失败!')
      })
    },
    //1.2选择联系人
    changeUserItem(id){
      for(let item of this.userFriendList){
        if(item.id == id){
          item.status = 1;
        }else{
          item.status = 0;
        }
      }
      //切换页面到用户列表
      this.pagestatus = 3;
      //把要编辑的好友的id存起来
      this.editFriendId = id;

      //获取好友身份信息详情
      this.$store.dispatch('chat/getFriendInfo',{friend_id:this.editFriendId}).then(res=> {
        console.log(res);
        //保存好友信息
        this.friendInfo = res.data;
      }).catch(() => {
        this.$message.error('获得好友身份详情失败!')
      })

    },
    //1.3搜索联系人
    searchFriend(){
      //搜索联系人
      this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
        //获取到好友
        this.searchWindowStatus = false;
        console.log(res);
        if(res.code==200){
          if(res.data.length>0){
            this.searchWindowStatus = true;
            this.searchFriendList = res.data[0];
          }else{
            this.$message.error('没有找到该联系人!')
          }
        }else{
          this.$message.error('搜索关键字不能为空!')
        }
      }).catch(() => {
        this.$message.error('网络错误!')
      })
    },
    //1.好友列表 end------------------------------------------------------------>

    //2.获得好友申请列表 start------------------------------------------------------------>
    //2.1 好友申请列表
    getFriendApplyList(){
      const userId = this.$store.state.user.userid;
      this.$store.dispatch('chat/getFriendsApplyList',{user_id:userId}).then(res=> {
        this.userApplyList = res.data;
      }).catch(() => {
        this.$message.error('获取好友申请列表失败!')
      })
    },
    
    //2.2 接受好友申请
    addFriend(){
      console.log(this.form);
      this.$store.dispatch('chat/applyFriend',this.form).then(res=> {
        if(res.code==200){
          this.$message.success('成功添加好友!')
          this.friendWindowStatus = false;
        }
      })
    },
    //2.3 删除好友
    deleteFriend(id){
      if(id){
        this.editFriendId = id;
      }
      this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.editFriendId);
        this.$store.dispatch('chat/delFriend',{id:editFriendId}).then(res=> {
          this.$message.success('删除成功!')
          //关闭用户详情显示
          this.pagestatus = 1;
          //重新装在用户列表
          this.getUserFriendList();
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    //2.4 编辑好友
    editFriend(){
      let data = {
        friend_id:this.editFriendId,
        remark:this.remark
      }
      //this.editFriendId
      this.$store.dispatch('chat/updateFriend',data).then(res=> {
        this.$message.success('修改备注名成功!')
        this.pagestatus = 1;
        this.editWindowStatus = false;
        this.getUserFriendList();
        this.remark = "";
      }).catch(() => {
        this.$message.error('修改备注名失败!')
      })
    },
    //2.5 发送好友申请
    addMyFriend(){
      console.log(this.addform);
      this.$store.dispatch('chat/applyFriend',this.addform).then(res=> {
        if(res.code==200){
          this.$message.success('成功添加好友!')
          this.friendWindowStatus = false;
        }
      })
    },
    //2.获得好友申请列表 end------------------------------------------------------------>

    //3.操作弹出框 start------------------------------------------------------------>
    //用户菜单操作
    openWindow(id){
      this.form.id = id;
      //打开弹出框
      this.friendWindowStatus = true;
    },
    openEditWindow(id){
      //打开修改备注弹出框
      this.editWindowStatus = true;
    },
    openAddWindow(id){
      this.addform.id = id;
      this.addFriendWindowStatus = true;
    }
    //3.操作弹出框 end------------------------------------------------------------>
    
  },
  mounted() {
    //1.获取联系人列表
    this.getUserFriendList();
    //2.获取好友申请列表
    this.getFriendApplyList();
  },
  beforeDestroy() {
    
  }
};
</script>

<style scoped lang="less">
  .hallBox {
    display: flex;
    margin: 30px;
    //左侧
    .hallLeft {
      width: 420px;
      background: #fff;
      border-radius: 20px;
      margin-right: 20px;
      .newFriendBox {
        padding: 10px 25px 0 25px;
        font-size: 18px;
        color: #999;
      }
      .newFriendImgBox {
        margin: 10px 0 10px 0;
        padding: 20px 0 20px 25px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        border-bottom: 1px solid #E9EDF7;
        position: relative;
        .newFriendImg {
          width: 58px;
          height: 58px;
          border-radius: 8px;
          background: #5570F1;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
        }
        .newFriendText {  
          color: #333;
          font-size: 18px;
        }
      }
      .newFriendIActive {
        border-right: 4px solid #5570F1 !important;
        background: #F5F7FD
      }
      .searchFriendBox {
        position: absolute;
        width: 280px;
        border-radius: 8px;
        top: 0;
        right: -300px;
        background: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        z-index: 100;
        box-sizing: border-box;
        padding: 30px 0;
        .searchFriendItem {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-bottom: 1px solid #E9EDF7;
          padding: 0 20px 30px 20px;
          .searchFriendAvatar {
            img {
              width: 66px;
              height: 66px;
              border-radius: 50%;
            }
            margin-right: 15px;
          }
          .searchFriendInfo {
            flex: 1;
            .searchFriendName {
              display: flex;
              align-items: center;
              .gender {
                img {
                  width: 12px;
                  height: 12px;
                }
              }
              img {
                width: 18px;
                height: 18px;
                cursor: pointer;
              }
              .searchFriendNameText {
                font-size: 18px;
                width: 120px;
                height: 28px;
                line-height: 28px;
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis;
              }
            }
            .searchFriendPhone {
              font-size: 14px;
              color: #999;
              margin-top: 10px;
            }
          }
        }
        .searchFriendLineBox {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px;
          border-bottom: 1px solid #E9EDF7;
          .searchFriendLineTitle{
            font-size: 16px;
            color: #999999;
            width: 90px;
          }
          .searchFriendLineContent{
            font-size: 16px;
            color: #333;
            flex: 1;
            .searchFriendLineContentItem{
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }
        .searchFriendButton {
          padding:40px 0 10px 0;
          text-align: center;
          .searchFriendButtonItem {
            font-size: 14px;
            color: #5570F1;
            img {
              width: 30px;
              height: 30px;
              margin-bottom: 5px;
            }
          }
        }
      }
      .userListTitle {
        padding: 15px 25px;
        font-size: 18px;
        color: #999;
      }
      .searchBox {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 20px;
      }
      .userListBox {
        padding: 15px 0;
        .active {
          background: #F5F7FD;
          box-sizing: border-box;
          border-right: 4px solid #5570F1 !important;
        }
        .userItem {
          padding: 0 21px 0 25px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 90px;
          box-sizing: border-box;
          border-right: 4px solid #fff;
          cursor: pointer;
          .userAvatar {
            img {
              width: 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;
              .userNameText {
                font-size: 18px;
                font-weight: bold;
                width: 240px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #333;
              }
              .userMessageNum {
                font-size: 12px;
                color: #333;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border-radius: 50%;
                background: #FFCC91;
                font-weight: bold;
              }
            }
            .userMessage {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .userMessageText {
                display: block;
                width: 240px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #999999;
              }
              .userMessageTime {
                font-size: 14px;
                color: #999999;
              }
            }
          }
        }
      }
    }
    //右侧
    .hallRight {
      flex: 1;
      background: #fff;
      border-radius: 20px;
      position: relative;
      height: 1184px;
      .rightNewFriendBox {
        height: 126px;
        border-bottom: 1px solid #E9EDF7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 30px 40px;
        .rightNewFriendItem { 
          display: flex;
          align-items: center; 
          .rightNewFriendAvatar {
            margin-right: 15px;
            img {
              width: 66px;
              height: 66px;
              border-radius: 50%;
            }
          }
          .rightNewFriendInfo {
            .rightNewFriendName {
              font-size: 18px; 
              margin-bottom: 7px;
            }
            .rightNewFriendPhone {
              font-size: 18px;
              color: #999;
            }
          }
        }
        .rightNewFriendStatus {
          .rightNewFriendStatus1 {
            font-size: 16px;
            color: #999;
            width: 69px;
            text-align: center;
          }
        }
      }
      .userInfoMainBox {
        padding: 40px;
        max-width: 900px;
        margin: 100px auto 0 auto;
        .userInfoMainItem {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-bottom: 1px solid #E9EDF7;
          padding: 0 20px 30px 20px;
          .userInfoMainAvatar {
            img {
              width: 66px;
              height: 66px;
              border-radius: 50%;
            }
            margin-right: 15px;
          }
          .userInfoMainInfo {
            flex: 1;
            .userInfoMainName {
              display: flex;
              align-items: center;
              justify-content: space-between;
              img {
                width: 18px;
                height: 18px;
                cursor: pointer;
              }
              .userInfoMainNameText {
                font-size: 18px;
                width: 240px;
                height: 28px;
                line-height: 28px;
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis;
              }
            }
            .userInfoMainPhone {
              font-size: 14px;
              color: #999;
              margin-top: 10px;
            }
          }
        }
        .userInfoMainLineBox {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px;
          border-bottom: 1px solid #E9EDF7;
          .userInfoMainLineTitle{
            font-size: 16px;
            color: #999999;
            width: 90px;
          }
          .userInfoMainLineContent{
            font-size: 16px;
            color: #333;
            flex: 1;
            .userInfoMainLineContentItem{
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
            }
          }
        }
        .userInfoMainButton {
          padding:40px 0 10px 0;
          text-align: center;
          .userInfoMainButtonItem {
            font-size: 14px;
            color: #5570F1;
            img {
              width: 30px;
              height: 30px;
              margin-bottom: 5px;
            }
          }
        }
      }
      .ifHallRigthNoMessage {
        color: #CCCCCC;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        height: 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 {
        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;
            }
            .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;
            }
            .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); 
        .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%;
            .rightSlideUserItemIcon {
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;

              img {
                width: 58px;
                height: 58px;
                border-radius: 50%;
              }
              .addUserIcon {
                width: 58px;
                height: 58px;
                line-height: 58px;
                background: #F0F0F0;
                border-radius: 50%;
                text-align: center;
              }
            }
            .rightSlideUserItemName {
              font-size: 18px;
              color: #333;
              margin-top: 10px;
              text-align: center
            }
          }
        }
        .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;
            .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;
            }
          }
        }
        .rightSlideFooter {
          font-size: 18px;
          color: #CC5F5F;
          padding: 30px 40px;
          text-align: center;
          cursor: pointer;
          border-bottom: 1px solid #E9EDF7;
        }
      }
    }
  }
  //不同的消息类型
  //发送文件
  .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 {
        .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;
          }
        }
      }
    }
    .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;
        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;
  }
</style>
