GroupSettingState

enum GroupType {
  WORK = 'Private',        // 工作群
  PUBLIC = 'Public',       // 公开群
  MEETING = 'ChatRoom',    // 会议群
  AVCHATROOM = 'AVChatRoom', // 直播群
  COMMUNITY = 'Community', // 社群
}

interface GroupMember {
  userID: string;           // 用户 ID
  nick: string;             // 用户昵称
  avatar: string;           // 用户头像
  role: GroupMemberRole;    // 成员角色
  joinTime: number;         // 加入时间
  muteUntil: string;        // 禁言截止时间
  memberCustomField: string; // 成员自定义字段
}

enum GroupMemberRole {
  OWNER,   // 群主
  ADMIN,   // 管理员
  COMMON, // 普通成员
}

enum GroupMemberRole {
  OWNER,   // 群主
  ADMIN,   // 管理员
  COMMON, // 普通成员
}

enum GroupInviteType {
  FREE_ACCESS,     // 自由加入
  NEED_PERMISSION, // 需要审批
  DISABLE_APPLY,   // 禁止申请
}

enum GroupPermission {  
  // 群资料权限
  EDIT_GROUP_PROFILE_NAME = 'EDIT_GROUP_PROFILE_NAME',           // 编辑群名称
  EDIT_GROUP_PROFILE_AVATAR = 'EDIT_GROUP_PROFILE_AVATAR',       // 编辑群头像
  EDIT_GROUP_PROFILE_INTRODUCTION = 'EDIT_GROUP_PROFILE_INTRODUCTION', // 编辑群简介
  EDIT_GROUP_PROFILE_NOTIFICATION = 'EDIT_GROUP_PROFILE_NOTIFICATION', // 编辑群公告
  EDIT_GROUP_PROFILE_ELSE = 'EDIT_GROUP_PROFILE_ELSE',           // 编辑其他群资料
  
  // 成员管理权限
  REMOVE_MEMBER = 'REMOVE_MEMBER',                               // 移除成员
  SET_MEMBER_ROLE = 'SET_MEMBER_ROLE',                           // 设置成员角色
  
  // 禁言权限
  MUTE_MEMBER = 'MUTE_MEMBER',                                   // 禁言成员
  MUTE_ALL_MEMBERS = 'MUTE_ALL_MEMBERS',                         // 全员禁言
  
  // 群管理权限
  TRANSFER_OWNERSHIP = 'TRANSFER_OWNERSHIP',                     // 转让群主
  DISMISS_GROUP = 'DISMISS_GROUP',                               // 解散群组
  QUIT_GROUP = 'QUIT_GROUP',                                     // 退出群组
}

interface GetGroupMemberListParams {
  count?: number;    // 获取数量，最大 100
  groupID?: string;  // 群组 ID
  role?: string;     // 角色筛选
  offset?: number;   // 偏移量
}

interface UpdateGroupProfileParams {
  groupID?: string;      // 群组 ID
  name?: string;         // 群名称
  avatar?: string;       // 群头像
  introduction?: string; // 群简介
  notification?: string; // 群公告
}

interface AddGroupMemberParams {
  userIDList: string[]; // 用户 ID 列表
  groupID?: string;     // 群组 ID
}

interface AddGroupMemberResult {
  data: {
    successUserIDList: string[];  // 成功添加的用户 ID 列表
    failureUserIDList: string[];  // 添加失败的用户 ID 列表
    existedUserIDList: string[];  // 已存在的用户 ID 列表
  };
}

interface DeleteGroupMemberParams {
  userIDList: string[]; // 用户 ID 列表
  groupID?: string;     // 群组 ID
}

interface SetGroupMemberRoleParams {
  userID: string;   // 用户 ID
  role: string;     // 角色
  groupID?: string; // 群组 ID
}

interface ChangeGroupOwnerParams {
  newOwnerID: string; // 新群主 ID
  groupID?: string;   // 群组 ID
}

interface SetGroupMemberMuteTimeParams {
  userID: string;   // 用户 ID
  time: number;     // 禁言时间（秒）
  groupID?: string; // 群组 ID
}

interface SetGroupMemberNameCardParams {
  nameCard: string; // 群名片
  userID?: string;  // 用户 ID，不提供则修改当前用户
  groupID?: string; // 群组 ID
}

<template>
  <div class="member-list">
    <div
      v-for="member in allMembers"
      :key="member.userID"
      class="member-item"
    >
      <Avatar :src="member.avatar" :alt="member.nick" />
      <span class="member-name">{{ member.nick }}</span>
      <span class="member-role">{{ member.role }}</span>

      <div
        class="member-actions"
      >
        <button
          v-if="canPromote && member.role === GroupMemberRole.COMMON"
          @click="handlePromote(member.userID)"
        >
          Promote to Admin
        </button>
        <button
          v-if="canRemove && member.role === GroupMemberRole.COMMON"
          @click="handleRemove(member.userID)"
        >
          Remove
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue';
import {
  useGroupSettingState,
  GroupMemberRole,
  GroupPermission,
  Avatar,
} from '@tencentcloud/chat-uikit-vue3';

const {
  allMembers,
  hasPermission,
  getGroupMemberList,
  setGroupMemberRole,
  deleteGroupMember,
} = useGroupSettingState();

const canPromote = computed(() => hasPermission(GroupPermission.SET_MEMBER_ROLE));
const canRemove = computed(() => hasPermission(GroupPermission.REMOVE_MEMBER));

onMounted(() => {
  getGroupMemberList({ count: 50 });
});

const handlePromote = (userID: string) => {
  setGroupMemberRole({ userID, role: GroupMemberRole.ADMIN });
};

const handleRemove = (userID: string) => {
  deleteGroupMember({ userIDList: [userID] });
};
</script>

<style scoped>
.member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  gap: 12px;
}

.member-name {
  font-weight: 500;
}

.member-role {
  font-size: 12px;
  color: #666;
  padding: 2px 8px;
  background: #f0f0f0;
  border-radius: 12px;
}

.member-actions {
  display: flex;
  gap: 8px;
}

.member-actions button {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid #007bff;
  background: white;
  color: #007bff;
  border-radius: 4px;
  cursor: pointer;
}

.member-actions button:hover {
  background: #007bff;
  color: white;
}
</style>