scrm.antd/src/pages/ChatLogs/ChatUtils.tsx

/**
 * 获取已离群的数量
 * @param data
 * @param state
 * @returns
 */

import React, { useEffect, useState } from 'react';
import { IGroup, IGroupMembers } from './ChatLogsType';
import { AdminSvg, OwnerSvg } from './components/Svgs';

export const groupMembersCount = (data: any[], state: any) => {
  let count = 0;
  data.forEach((item) => {
    if (item.state == state) {
      count += 1;
    }
  });

  return count;
};

/**
 * 获取是微信的人数
 * @param data
 * @param group_members_type
 * @param state
 * @returns
 */
export const groupMembersCount2 = (data: any[], group_members_type: any, state: any) => {
  let count = 0;
  data.forEach((item) => {
    if (item.group_members_type == group_members_type && item.state == state) {
      count += 1;
    }
  });

  return count;
};

// 群 Drawer 群员
export const groupMembersListItem = (item: IGroupMembers, selectGroup: IGroup) => {
  return (
    <div
      key={item.user_id}
      style={{
        display: 'inline-flex',
        justifyContent: 'flex-start',
        alignItems: 'center',
        width: 80,
        flexDirection: 'column',
        verticalAlign: 'top',
        marginTop: 12,
      }}
    >
      <div
        style={{
          position: 'relative',
          display: 'flex',
          flexShrink: 0,
          alignItems: 'center',
          justifyContent: 'center',
          width: 56,
          height: 56,
          lineHeight: 1,
          background: '#69b1ff',
          borderRadius: 4,
        }}
      >
        {item.avatar ? (
          <img
            style={{
              maxWidth: '100%',
              maxHeight: '100%',
              objectFit: 'cover',
              borderRadius: 4,
            }}
            src={item.avatar}
            alt=""
          />
        ) : item.name ? (
          item.name[0]
        ) : (
          ''
        )}
        {item.user_id == selectGroup?.owner ? <OwnerSvg /> : null}
        {selectGroup?.adminUserIDs?.includes(item.user_id) ? <AdminSvg /> : null}
      </div>
      <div
        style={{
          padding: '0 4px',
          whiteSpace: 'nowrap',
          minWidth: 0,
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          width: 72,
          textAlign: 'center',
        }}
        title={item.name}
      >
        {item.name}
      </div>
    </div>
  );
};

/**
 * 群管理者：
 * @param data
 * @param groupMembers
 * @returns
 */
export const adminList = (data: any, groupMembers: any) => {
  if (data) {
    try {
      const msg = JSON.parse(data);
      if (Array.isArray(msg) && msg.length) {
        let arr: any = [];
        msg.forEach((el) => {
          arr.push(groupMembers[el.userid]?.name);
        });
        return <div>群管理者：{arr.join('，')}</div>;
      }
    } catch (e) {
      return <></>;
    }
  }

  return <></>;
};
/**
 * 返回群管理员 userid 数组
 * @param data
 * @returns
 */
export const getAdminList = (data: any) => {
  if (data) {
    try {
      const msg = JSON.parse(data);
      if (Array.isArray(msg)) {
        let arr: string[] = [];
        msg.forEach((item) => {
          arr.push(item.userid);
        });
        return arr;
      }
    } catch (e) {
      /* empty */
    }
  }

  return [];
};

/**
 * 客户等级等信息
 * @returns
 */
export const formatTags = (data: any) => {
  if (data) {
    try {
      const tags = JSON.parse(data);
      if (Array.isArray(tags) && tags.length) {
        return (
          <>
            {tags.map((item) => {
              return (
                <div key={`${item.group_name}_${item.tag_name}`}>
                  {item.group_name}：{item.tag_name}
                </div>
              );
            })}
          </>
        );
      }
    } catch (e) {
      /* empty */
    }
  }
  return <div>无标签</div>;
};

type IGroupIcon = {
  groupList: any[];
};
/**
 *  群图标拼接
 * @param props
 * @returns
 */
export const GroupIcon: React.FC<IGroupIcon> = (props) => {
  const [list, setList] = useState<any>([[], [], []]);

  useEffect(() => {
    let temp: any = [[], [], []];
    const { groupList } = props;
    for (let index = 0; index < 9; index++) {
      const element = groupList[index];
      if (index < 3) {
        temp[0].push(element);
      } else if (index < 6) {
        temp[1].push(element);
      } else {
        temp[2].push(element);
      }
    }
    temp.reverse();
    setList(temp);
  }, [props.groupList]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {list.map((item: any[], i: number) => {
        return (
          <div key={i} style={{ display: 'flex', justifyContent: 'center' }}>
            {item.map((el) => {
              return el ? (
                <div
                  key={`${el.avatar}_${el.name}`}
                  style={{ width: 12, height: 12, borderRadius: 2, overflow: 'hidden' }}
                >
                  {el.avatar ? (
                    <img
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                      src={el.avatar}
                    />
                  ) : (
                    <div
                      style={{
                        background: '#bae0ff',
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}
                    >
                      <div style={{ transform: 'scale(0.65)', lineHeight: 1 }}>{el.name[0]}</div>
                    </div>
                  )}
                </div>
              ) : null;
            })}
          </div>
        );
      })}
    </div>
  );
};