<!-- 我的群列表 -->
<template>
  <ul class="groupList">
    <li v-for="(item, index) in myGroupList" :id='item.groupId' @click="choose(item, index)">
      <img :src="item.faceUrl" class="header" v-if="item.faceUrl"/>
      <img src="../../assets/chat/defaule-group-header.png" class="header" v-if="!item.faceUrl"/>
      <p class="name checked" v-if="checkedIndex == index">

        <span class="weituo">{{item.principal}}</span>

        <span :class="item.principal!=null?'anhao':'noral'">{{item.name}}</span>
      </p>
      <p class="name" v-if="checkedIndex != index">

        <span class="weituo">{{item.principal}}</span>

        <span :class="item.principal!=null?'anhao':'noral'">{{item.name}}</span>
      </p>
    </li>
  </ul>
</template>

<script>
  import {
    getApi,
    postApi,
    getMessage
  } from "../../api/commonApi";
  import {webim} from '../../../static/sdk/webim.js'
  export default {
    data() {
      return {
        myGroupListReq: {
          "Member_Account": localStorage.getItem('userId'),
          "Limit": 200,
          "Offset": 0,
          "GroupBaseInfoFilter": [ // 需要哪些基础信息字段
            "Type", "Name", "Introduction", "Notification", "FaceUrl", "CreateTime", "Owner_Account",
            "LastInfoTime", "LastMsgTime", "NextMsgSeq", "MemberNum", "MaxMemberNum", "ApplyJoinOption", "ShutUpAllMember"
          ],
          "SelfInfoFilter": [ // 需要自身在群内的信息
            "Role", // 群内身份
            "JoinTime", // 入群时间
            "MsgFlag", // 消息屏蔽类型
            "UnreadMsgNum" // 未读消息数量（IM云后台计算得出）
          ],
          "AppDefinedDataFilter_Group": [ // 群成员维度自定义字段过滤，该默认情况是没有的
            "principal"
          ]
        },

        myGroupList: [], //我的群列表
        checkedIndex: 0, //选中的索引
        myGroupLists: []
      }
    },

    /* 周期方法 start */
    created() {
      this.getJoinedGroupList();
      // this.getGroupInfo()
    },

    mounted() {
      console.log(localStorage.getItem('groupId'))


    },

    watch: {},
    /* 周期方法 end */

    methods: {
      /**
       * 获取我的群列表   txCloud/group/msg/list
       */
      /**
       * 获取加入的群组列表信息
       */
      getJoinedGroupList() {
        let that = this;
        getApi("/txCloud/group/msg/list", {
          userId: localStorage.getItem("userId"),
          page: 1,
          limit: 1000
        }, function (data) {
          console.log(data.list)
          that.myGroupList = data.list;
        }, function (data) {

        });
      },
      /**
       * 选择某一个群
       */
      choose(item, index) {
        debugger
        this.checkedIndex = index;
        let objs = {
          AppDefinedData: item.appDefinedData,
          ApplyJoinOption: item.applyJoinOption,
          CreateTime: item.createTime,
          FaceUrl: item.faceUrl,
          GroupId: item.groupId,
          InfoSeq: item.infoSeq,
          Introduction: item.introduction,
          LastInfoTime: item.lastInfoTime,
          LastMsgTime: item.lastMsgTime,
          MaxMemberNum: item.maxMemberNum,
          MemberList: item.memberList,
          MemberNum: item.memberNum,
          Name: item.name,
          NextMsgSeq: item.nextMsgSeq,
          Notification: item.notification,
          OwnerAccount: item.ownerAccount,
          Principal: item.principal,
          SelfInfo: item.selfInfo,
          ShutUpAllMember: item.shutUpAllMember,
          Type: item.type

        }
        console.log(objs)
        //将群聊id存入localStorage
        localStorage.setItem('groupId', item.groupId)
        //将群组详情传入给 chatRoom
        this.$emit('chooseFriend', objs);
      }
    }
  }
</script>

<style scoped>
  .weituo {
    font-size: 16px;
    margin-right: 10px;
  }

  .noral {
    font-size: 16px;
  }

  .anhao {
    font-size: 12px;
    opacity: 0.7;
  }

  .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>

<style>
  @import url("groupList.css");
</style>
