scrm.antd/src/pages/GroupList/components/GroupDetailContent.tsx

import { IGroup, IGroupMembers } from '@/pages/ChatLogs/ChatLogsType';
import { post } from '@/services/ajax';
import { useEffect, useRef, useState } from 'react';

import {
  adminList,
  getAdminList,
  groupMembersCount,
  groupMembersCount2,
  groupMembersListItem,
} from '@/pages/ChatLogs/ChatUtils';
import { Spin } from 'antd';
import { stringify } from 'qs';

type Iprops = {
  record: IGroup;
};
export const GroupDetailContent: React.FC<Iprops> = (props) => {
  const { record } = props;

  const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
  const [loading, setLoading] = useState(false);
  const groupMembersObjRef = useRef<any>({});

  useEffect(() => {
    record.adminUserIDs = getAdminList(record.admin_list);
    getList();
  }, [props.record]);

  const getList = () => {
    setLoading(true);
    post({
      url: '/GroupMembers/GroupMembersList',
      data: stringify({ group_id: props.record.group_id }),
    }).then((res) => {
      setLoading(false);
      if (res.err_code == 0) {
        if (Array.isArray(res.data)) {
          groupMembersObjRef.current = {};
          let owner: IGroupMembers[] = [];
          let admin_list: IGroupMembers[] = [];
          let other: IGroupMembers[] = [];
          res.data.forEach((item: IGroupMembers) => {
            item.avatar = item.staff_avatar || item.avatar;
            groupMembersObjRef.current[item.user_id] = item;
            if (item.user_id == record?.owner) {
              owner.push(item);
            } else if (record?.adminUserIDs.includes(item.user_id)) {
              admin_list.push(item);
            } else {
              other.push(item);
            }
          });
          // 对群员 创建者 > 管理员 > 普通成员 排序
          setGroupMembersList([...owner, ...admin_list, ...other]);
        }
      }
    });
  };

  return (
    <Spin spinning={loading} style={{ minHeight: 400, display: 'block' }}>
      {groupMembersList.length ? (
        <div>
          <div style={{ marginBottom: 8, textIndent: '2em' }}>
            群主：
            {groupMembersObjRef.current[record?.owner as string]?.name}
          </div>
          <div style={{ marginBottom: 8 }}>
            {adminList(record?.admin_list, groupMembersObjRef.current)}
          </div>
          <div style={{ marginBottom: 8 }}>创建时间：{record?.create_time}</div>
          <div style={{ textIndent: '1em' }}>群公告：{record?.notice}</div>
          <div
            style={{
              fontWeight: 'bold',
              marginTop: 24,
              marginBottom: 8,
              borderBottom: '1px solid #ddd',
              paddingBottom: 8,
            }}
          >
            群成员 • {groupMembersList.length}
          </div>
          {groupMembersList.map((item) => {
            return item.group_members_type == '2' || item.state == 0
              ? null
              : groupMembersListItem(item, record);
          })}
          {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
            <div
              style={{
                fontWeight: 'bold',
                marginTop: 24,
                marginBottom: 8,
                borderBottom: '1px solid #ddd',
                paddingBottom: 8,
              }}
            >
              微信：
            </div>
          ) : null}
          {groupMembersList.map((item) => {
            return item.group_members_type == '1' || item.state == 0
              ? null
              : groupMembersListItem(item, record);
          })}
          {groupMembersCount(groupMembersList, 0) != 0 ? (
            <div
              style={{
                fontWeight: 'bold',
                marginTop: 24,
                marginBottom: 8,
                borderBottom: '1px solid #ddd',
                paddingBottom: 8,
              }}
            >
              已离群：
            </div>
          ) : null}
          {groupMembersList.map((item) => {
            return item.state == 1 ? null : groupMembersListItem(item, record);
          })}
        </div>
      ) : null}
    </Spin>
  );
};