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

import { post } from '@/services/ajax';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Drawer, Form, Input, Tabs } from 'antd';
import Spin from 'antd/lib/spin';
import { stringify } from 'qs';
import React, { useEffect, useRef, useState } from 'react';
import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
import { adminList, formatTags, groupMembersCount, groupMembersCount2 } from './ChatUtils';
import { ChatBar } from './components/ChatBar';
import { ChatTime } from './components/ChatTime';
import { Gender } from './components/Gender';
import styles from './index.module.scss';
interface ISearchWord {
  '0': string;
  '1': string;
  '2': string;
}
const ChatLogs: React.FC = () => {
  const [param] = useState({
    curr_page: 1,
    page_count: 20,
    msg_from: '',
    msg_to_list: '',
    room_id: '',
  });
  const [tabKey, setTabKey] = useState<string>('0');
  const tabKeyRef = useRef('0');

  const [open, setOpen] = useState(false);
  // 员工
  const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
  const [selectStaff, setSelectStaff] = useState<IStaffsItem>();
  const selectStaffRef = useRef<IStaffsItem>();

  // 内部联系人
  const [innerStaffsList, setInnerStaffsList] = useState<IStaffsItem[]>([]);
  const selectInnerStaffRef = useRef<IStaffsItem>();
  const [selectInnerStaff, setSelectInnerStaff] = useState<IStaffsItem>();

  // 外部联系人
  const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
  const [selectCustFollow, setSelectCustFollow] = useState<ICustFollow>();
  const selectCustFollowRef = useRef<ICustFollow>();

  // 群聊
  const [groupList, setGroupList] = useState<IGroup[]>([]);
  const selectGroupRef = useRef<IGroup>();
  const [selectGroup, setSelectGroup] = useState<IGroup>();

  // 群成员
  const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
  const groupMembersObjRef = useRef<any>({});

  const [chatLogs, setChatLogs] = useState<IChat[]>([]);

  const [tabs] = useState([
    {
      key: '0',
      label: '内部联系人',
      children: '',
    },
    {
      key: '1',
      label: '外部联系人',
      children: '',
    },
    {
      key: '2',
      label: '客户群聊',
      children: '',
    },
  ]);

  const groupStatus: any = {
    '0': '跟进人正常',
    '1': '跟进人离职',
    '2': '离职继承中',
    '3': '离职继承完成',
  };

  const [searchWord, setSearchWord] = useState<ISearchWord>({
    '0': '',
    '1': '',
    '2': '',
  });

  const [flolowsBoxShow, setFlolowsBox] = useState(false);
  const [delFollowListShow, setDelFollowListShow] = useState(false);
  const [delGroupListShow, setDelGroupListShow] = useState(false);

  const timeShowRef = useRef(false);
  const chatBoxRef = useRef<any>();
  const isAllChatRef = useRef(false);
  const chatLogLoadingRef = useRef(false);
  const [chatLogLoading, setChatLogLoading] = useState(false);

  function show() {
    setFlolowsBox(false);
  }

  // 监听DOM变动
  const callback = function (mutationsList: any) {
    // Use traditional 'for loops' for IE 11
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        document.querySelector('.curr_page' + param.curr_page)?.scrollIntoView(true);
      } else if (mutation.type === 'attributes') {
        console.log('The ' + mutation.attributeName + ' attribute was modified.');
      }
    }
  };
  const observer = new MutationObserver(callback);

  useEffect(() => {
    document.addEventListener('click', show, false);
    getStaffsList();

    observer.observe(chatBoxRef.current, { childList: true });
    const myScript = document.createElement('script');
    myScript.src = '/public/scripts/amrnb.js';
    myScript.async = false;
    document.body.appendChild(myScript);

    return () => {
      document.removeEventListener('click', show, false);
      observer.disconnect();
      document.body.removeChild(myScript);
    };
  }, []);

  // 获取员工
  const getStaffsList = () => {
    post({ url: '/Staffs/Data' }).then((res) => {
      if (res.err_code == 0) {
        if (Array.isArray(res.data) && res.data.length) {
          // setSelectStaff(res.data[0]);
          // selectStaffRef.current = res.data[0];
          res.data.forEach((element: IStaffsItem) => {
            if (element.user_id == 'yangxb') {
              setSelectStaff(element);
              selectStaffRef.current = element;
            }
          });
          setStaffsList(res.data);
          setInnerStaffsList(res.data);
          getCustFollowsList();
          getGroupList();
        }
      }
    });
  };

  const page = (curr: number) => {
    param.curr_page = curr;
    param.msg_from = selectStaffRef.current?.user_id + '';
    if (tabKey == '0') {
      param.msg_to_list = selectInnerStaffRef.current?.user_id + '';
    } else if (tabKey == '1') {
      param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
    } else {
      param.room_id = selectGroupRef.current?.group_id + '';
    }
    timeShowRef.current = false;
    getChatLogsList();
  };

  const getChatLogsList = () => {
    chatLogLoadingRef.current = true;
    setChatLogLoading(true);
    post({
      url: tabKey == '2' ? '/ChatLogs/GroupList' : '/ChatLogs/List',
      data: stringify(param),
    }).then((res) => {
      const count = res.count || 0;
      chatLogLoadingRef.current = false;

      setChatLogLoading(false);
      isAllChatRef.current = count < param.page_count * param.curr_page;
      if (res.err_code == 0) {
        if (Array.isArray(res.data) && res.data.length) {
          let arr: IChat[] = [];
          const temp = res.data.reverse();
          const mark = { curr_page: param.curr_page, msg_time: temp[temp.length - 1].msg_time };
          if (param.curr_page == 1) {
            arr = [...temp, mark];
          } else {
            arr = [...temp, mark, ...chatLogs];
          }
          // 5分钟外显示时间
          // if (arr) {
          //   let show_time = '';
          //   arr.forEach((el, i) => {
          //     el.show_time = false;
          //     if (i == 0) {
          //       el.show_time = true;
          //     } else {
          //       if (show_time == '') {
          //         show_time = el.msg_time;
          //       } else {
          //         if (
          //           new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
          //           5 * 60 * 1000
          //         ) {
          //           el.show_time = true;
          //           show_time = el.msg_time;
          //         }
          //       }
          //     }
          //   });
          // }
          setChatLogs(arr);
        }
      }
    });
  };

  const getGroupList = () => {
    post({
      url: '/Groups/GroupsList',
      data: stringify({ user_id: selectStaffRef.current?.user_id }),
    }).then((res) => {
      if (res.err_code == 0) {
        if (Array.isArray(res.data)) {
          setGroupList(res.data);
          // if (res.data.length) {
          // setCustFollow(res.data[0]);
          // selectCustFollowRef.current = res.data[0];
          // page(1);
          // }
        }
      }
    });
  };

  // 群成员
  const getGroupMembersList = () => {
    post({
      url: '/GroupMembers/GroupMembersList',
      data: stringify({ group_id: selectGroupRef.current?.group_id }),
    }).then((res) => {
      if (res.err_code == 0) {
        if (Array.isArray(res.data)) {
          setGroupMembersList(res.data);
          groupMembersObjRef.current = {};
          res.data.forEach((item: IGroupMembers) => {
            groupMembersObjRef.current[item.user_id] = item;
          });
          page(1);
        }
      }
    });
  };

  const getCustFollowsList = () => {
    post({
      url: '/CustFollows/List',
      data: stringify({ user_id: selectStaffRef.current?.user_id }),
    }).then((res) => {
      if (res.err_code == 0) {
        if (Array.isArray(res.data)) {
          setCustFollowsList(res.data);
          // if (res.data.length) {
          // setCustFollow(res.data[0]);
          // selectCustFollowRef.current = res.data[0];
          // page(1);
          // }
        }
      }
    });
  };

  // const { notification } = App.useApp();
  const tabContent = () => {
    if (tabKey == '0') {
      // 内部联系人
      return (
        <>
          {innerStaffsList.length ? (
            innerStaffsList.map((item) => {
              if (item.user_id == selectStaff?.user_id) {
                return null;
              }
              return (
                <div
                  key={`${item.user_id}_${item.name}`}
                  className={`${styles.chatB} ${
                    selectInnerStaff?.user_id == item.user_id ? styles.active : ''
                  }`}
                  onClick={() => {
                    tabKeyRef.current = tabKey;

                    setSelectCustFollow(undefined);
                    selectCustFollowRef.current = undefined;
                    setSelectGroup(undefined);
                    selectGroupRef.current = undefined;

                    setSelectInnerStaff(item);
                    selectInnerStaffRef.current = item;
                    page(1);
                  }}
                  style={{ display: item.name.includes(searchWord['0']) ? '' : 'none' }}
                >
                  <div className={styles.avatar}>
                    {item.avatar ? (
                      <img
                        src={item.avatar}
                        alt=""
                        style={{
                          maxWidth: '100%',
                          maxHeight: '100%',
                          objectFit: 'cover',
                          borderRadius: 4,
                        }}
                      />
                    ) : (
                      <>{item.name[0]}</>
                    )}
                  </div>
                  <div className={styles.chatAMsg}>
                    <div className={styles.chatAName} title={item.name}>
                      {item.name}
                    </div>
                  </div>
                </div>
              );
            })
          ) : (
            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
              暂无内部联系人
            </div>
          )}
        </>
      );
    } else if (tabKey == '1') {
      return (
        <>
          {custFollowsList.length ? (
            custFollowsList.map((item) => {
              if (item.state == 0) return null;
              return (
                <div
                  key={item.cust_id}
                  className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
                    selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
                  }`}
                  onClick={() => {
                    tabKeyRef.current = tabKey;

                    setSelectInnerStaff(undefined);
                    selectInnerStaffRef.current = undefined;
                    setSelectGroup(undefined);
                    selectGroupRef.current = undefined;

                    setSelectCustFollow(item);
                    selectCustFollowRef.current = item;
                    page(1);
                  }}
                  style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
                >
                  <div className={styles.avatar} style={{ background: item?.avatar ? '#fff' : '' }}>
                    <img
                      src={item.avatar}
                      alt=""
                      style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
                    />
                  </div>
                  <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
                    <div className={styles.chatAName} title={item.name}>
                      {item.name}
                    </div>
                    <div>{item.remark}</div>
                  </div>
                </div>
              );
            })
          ) : (
            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
              暂无外部联系人
            </div>
          )}
          <div
            className={`${styles.delFollowList} ${
              delFollowListShow ? styles.delFollowListShow : ''
            }`}
          >
            <div
              className={styles.delFollowListBar}
              onClick={() => {
                setDelFollowListShow(!delFollowListShow);
              }}
            >
              <span>已删联系人</span>
              {delFollowListShow ? <UpOutlined /> : <DownOutlined />}
            </div>
            <div
              className={`${styles.delFollowListBox} ${
                delFollowListShow ? styles.delFollowListBoxShow : ''
              }`}
            >
              {custFollowsList.map((item) => {
                if (item.state == 1) return null;
                return (
                  <div
                    key={item.cust_id}
                    className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
                      selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
                    }`}
                    onClick={() => {
                      tabKeyRef.current = tabKey;

                      setSelectInnerStaff(undefined);
                      selectInnerStaffRef.current = undefined;
                      setSelectGroup(undefined);
                      selectGroupRef.current = undefined;

                      setSelectCustFollow(item);
                      selectCustFollowRef.current = item;
                      page(1);
                    }}
                    style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
                  >
                    <div
                      className={styles.avatar}
                      style={{ background: item?.avatar ? '#fff' : '' }}
                    >
                      <img
                        src={item.avatar}
                        alt=""
                        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
                      />
                    </div>
                    <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
                      <div className={styles.chatAName} title={item.name}>
                        {item.name}
                      </div>
                      <div>{item.remark}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      );
    } else {
      return (
        <>
          {groupList.length ? (
            groupList.map((item) => {
              if (item.state == 0) return null;
              return (
                <div
                  key={item.group_id}
                  className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
                    selectGroup?.group_id == item.group_id ? styles.active : ''
                  }`}
                  onClick={() => {
                    tabKeyRef.current = tabKey;
                    setSelectCustFollow(undefined);
                    selectCustFollowRef.current = undefined;
                    setSelectInnerStaff(undefined);
                    selectInnerStaffRef.current = undefined;
                    setSelectGroup(item);
                    selectGroupRef.current = item;
                    getGroupMembersList();
                  }}
                  style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
                >
                  <div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
                  <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
                    <div className={styles.chatAName} title={item.name}>
                      {item.name || '未定义群名'}
                    </div>
                    <div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
                  </div>
                </div>
              );
            })
          ) : (
            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
              暂无客户群聊
            </div>
          )}
          <div
            className={`${styles.delFollowList} ${
              delGroupListShow ? styles.delFollowListShow : ''
            }`}
          >
            <div
              className={styles.delFollowListBar}
              onClick={() => {
                setDelGroupListShow(!delGroupListShow);
              }}
            >
              <span>已解散的群</span>
              {delGroupListShow ? <UpOutlined /> : <DownOutlined />}
            </div>
            <div
              className={`${styles.delFollowListBox} ${
                delGroupListShow ? styles.delFollowListBoxShow : ''
              }`}
            >
              {groupList.map((item) => {
                if (item.state == 1) return null;
                return (
                  <div
                    key={item.group_id}
                    className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
                      selectGroup?.group_id == item.group_id ? styles.active : ''
                    }`}
                    onClick={() => {
                      tabKeyRef.current = tabKey;
                      setSelectCustFollow(undefined);
                      selectCustFollowRef.current = undefined;
                      setSelectInnerStaff(undefined);
                      selectInnerStaffRef.current = undefined;
                      setSelectGroup(item);
                      selectGroupRef.current = item;
                      getGroupMembersList();
                    }}
                    style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
                  >
                    <div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
                    <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
                      <div className={styles.chatAName} title={item.name}>
                        {item.name || '未定义群名'}
                      </div>
                      <div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      );
    }
  };

  return (
    <PageContainer>
      <div className={styles.box}>
        <div className={styles.personnelBox}>
          <div className={`${styles.flolowsBox} ${flolowsBoxShow ? styles.show : ''}`}>
            {staffsList.map((item) => {
              return (
                <div
                  key={item.user_id}
                  className={styles.chatB}
                  onClick={(e) => {
                    setSelectCustFollow(undefined);
                    selectCustFollowRef.current = undefined;
                    setSelectInnerStaff(undefined);
                    selectInnerStaffRef.current = undefined;
                    setSelectGroup(undefined);
                    selectGroupRef.current = undefined;
                    isAllChatRef.current = false;
                    setChatLogs([]);
                    setSelectStaff({ ...item });
                    selectStaffRef.current = { ...item };
                    setFlolowsBox(false);
                    getCustFollowsList();
                    getGroupList();
                  }}
                  style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }}
                >
                  <div className={styles.avatar}>
                    {item.avatar ? (
                      <img
                        src={item.avatar}
                        alt=""
                        style={{
                          maxWidth: '100%',
                          maxHeight: '100%',
                          objectFit: 'cover',
                          borderRadius: 4,
                        }}
                      />
                    ) : (
                      <>{item.name[0]}</>
                    )}
                  </div>
                  <div className={styles.chatAMsg}>
                    <div className={styles.chatAName} title={item.name}>
                      {item.name}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div
            className={`${styles.chatA}`}
            onClick={(e) => {
              e.stopPropagation();
              setFlolowsBox(!flolowsBoxShow);
            }}
          >
            {selectStaff ? (
              <>
                <div className={styles.avatar}>
                  {selectStaff.avatar ? (
                    <img
                      src={selectStaff.avatar}
                      alt=""
                      style={{
                        maxWidth: '100%',
                        maxHeight: '100%',
                        objectFit: 'cover',
                        borderRadius: 4,
                      }}
                    />
                  ) : (
                    <>{selectStaff.name[0]}</>
                  )}
                </div>
                <div className={styles.chatAMsg}>
                  <div className={styles.chatAName} title={selectStaff.name}>
                    {selectStaff.name}
                  </div>
                </div>
                {flolowsBoxShow ? <UpOutlined /> : <DownOutlined />}
              </>
            ) : null}
          </div>
          <Form autoComplete="off">
            <Input
              placeholder="搜索"
              style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
              autoComplete="off"
              defaultValue={searchWord[tabKey]}
              key={tabKey}
              onChange={(e) => {
                searchWord[tabKey] = e.target.value.trim();
                setSearchWord({ ...searchWord });
              }}
              allowClear
            ></Input>
          </Form>
          <Tabs
            items={tabs}
            size="small"
            style={{ padding: '0 12px' }}
            tabBarGutter={12}
            onChange={(val) => {
              setTabKey(val);
            }}
          ></Tabs>
          <div className={styles.chatBBox}>{tabContent()}</div>
        </div>
        <div style={{ flex: 1 }}>
          <div className={styles.logTop}>
            <div
              style={{ cursor: 'pointer', fontSize: 18 }}
              onClick={() => {
                setOpen(true);
              }}
            >
              {tabKeyRef.current == '0' ? (
                <>{selectInnerStaffRef.current?.name}</>
              ) : tabKeyRef.current == '1' ? (
                <>{selectCustFollowRef.current?.name}</>
              ) : (
                <>
                  {selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}
                  {selectGroupRef.current ? <>（{groupMembersList.length}）</> : null}
                </>
              )}
            </div>
            <Drawer
              title={
                tabKeyRef.current == '0' ? (
                  <>{selectInnerStaffRef.current?.name} 详细信息</>
                ) : tabKeyRef.current == '1' ? (
                  <>{selectCustFollowRef.current?.name} 详细信息</>
                ) : (
                  <>
                    {selectGroupRef.current?.name || '未定义群名'} （{groupMembersList.length}
                    ）详细信息
                  </>
                )
              }
              open={open}
              width={600}
              onClose={() => setOpen(false)}
              footer={false}
            >
              {tabKeyRef.current == '0' ? (
                <DepartmentMembersDetail
                  record={selectInnerStaff as IStaffsItem}
                ></DepartmentMembersDetail>
              ) : tabKeyRef.current == '1' ? (
                <div>
                  <div
                    style={{
                      display: 'flex',
                      borderBottom: '1px solid #ddd',
                      paddingBottom: 12,
                      marginBottom: 12,
                    }}
                  >
                    <div className={styles.modalAvatar}>
                      <img src={selectCustFollow?.avatar} alt="" />
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                      <div style={{ fontSize: 16 }}>
                        <span style={{ marginRight: 8 }}>{selectCustFollow?.name}</span>
                        <Gender gender={selectCustFollow?.gender}></Gender>
                      </div>
                      <div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
                    </div>
                  </div>
                  <div>备注名称：{selectCustFollow?.remark}</div>
                  {formatTags(selectCustFollow?.tags)}
                </div>
              ) : (
                <div>
                  <div style={{ marginBottom: 8, textIndent: '2em' }}>
                    群主：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
                  </div>
                  <div style={{ marginBottom: 8 }}>
                    {adminList(selectGroupRef.current?.admin_list, groupMembersObjRef.current)}
                  </div>
                  <div style={{ marginBottom: 8 }}>
                    创建时间：{selectGroupRef.current?.create_time}
                  </div>
                  <div style={{ textIndent: '1em' }}>群公告：{selectGroupRef.current?.notice}</div>
                  <div
                    style={{
                      fontWeight: 'bold',
                      marginTop: 24,
                      marginBottom: 8,
                      borderBottom: '1px solid #ddd',
                      paddingBottom: 8,
                    }}
                  >
                    群成员 • {groupMembersList.length}
                  </div>
                  {groupMembersList.map((item) => {
                    if (item.group_members_type == '2' || item.state == 0) return null;
                    return (
                      <div
                        key={item.user_id}
                        style={{
                          display: 'inline-flex',
                          justifyContent: 'flex-start',
                          alignItems: 'center',
                          width: 80,
                          flexDirection: 'column',
                          verticalAlign: 'top',
                          marginTop: 12,
                        }}
                      >
                        <div className={styles.avatar}>
                          {item.avatar ? (
                            <img
                              style={{
                                maxWidth: '100%',
                                maxHeight: '100%',
                                objectFit: 'cover',
                                borderRadius: 4,
                              }}
                              src={item.avatar}
                              alt=""
                            />
                          ) : item.name ? (
                            item.name[0]
                          ) : (
                            ''
                          )}
                        </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>
                    );
                  })}
                  {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
                    <div
                      style={{
                        fontWeight: 'bold',
                        marginTop: 24,
                        marginBottom: 8,
                        borderBottom: '1px solid #ddd',
                        paddingBottom: 8,
                      }}
                    >
                      微信：
                    </div>
                  ) : null}
                  {groupMembersList.map((item) => {
                    if (item.group_members_type == '1' || item.state == 0) return null;
                    return (
                      <div
                        key={item.user_id}
                        style={{
                          display: 'inline-flex',
                          justifyContent: 'flex-start',
                          alignItems: 'center',
                          width: 80,
                          flexDirection: 'column',
                          verticalAlign: 'top',
                          marginTop: 12,
                        }}
                      >
                        <div className={styles.avatar}>
                          {item.avatar ? (
                            <img
                              style={{
                                maxWidth: '100%',
                                maxHeight: '100%',
                                objectFit: 'cover',
                                borderRadius: 4,
                              }}
                              src={item.avatar}
                              alt=""
                            />
                          ) : item.name ? (
                            item.name[0]
                          ) : (
                            ''
                          )}
                        </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>
                    );
                  })}
                  {groupMembersCount(groupMembersList, 0) != 0 ? (
                    <div
                      style={{
                        fontWeight: 'bold',
                        marginTop: 24,
                        marginBottom: 8,
                        borderBottom: '1px solid #ddd',
                        paddingBottom: 8,
                      }}
                    >
                      已离群：
                    </div>
                  ) : null}
                  {groupMembersList.map((item) => {
                    if (item.state == 1) return null;
                    return (
                      <div
                        key={item.user_id}
                        style={{
                          display: 'inline-flex',
                          justifyContent: 'flex-start',
                          alignItems: 'center',
                          width: 80,
                          flexDirection: 'column',
                          verticalAlign: 'top',
                          marginTop: 12,
                        }}
                      >
                        <div className={styles.avatar}>
                          {item.avatar ? (
                            <img
                              style={{
                                maxWidth: '100%',
                                maxHeight: '100%',
                                objectFit: 'cover',
                                borderRadius: 4,
                              }}
                              src={item.avatar}
                              alt=""
                            />
                          ) : item.name ? (
                            item.name[0]
                          ) : (
                            ''
                          )}
                        </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>
                    );
                  })}
                </div>
              )}
            </Drawer>
          </div>
          <Spin spinning={chatLogLoading} style={{ display: 'block' }} size="large">
            <div
              className={styles.chatLogBox}
              ref={chatBoxRef}
              onScroll={(e: any) => {
                if (
                  e.target?.scrollTop == 0 &&
                  !isAllChatRef.current &&
                  !chatLogLoadingRef.current
                ) {
                  page(param.curr_page + 1);
                }
              }}
            >
              {isAllChatRef.current ? (
                <div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>
                  没有更多聊天记录了
                </div>
              ) : null}
              {chatLogs.map((item, i) => {
                if (item.curr_page) {
                  return (
                    <div
                      key={item.curr_page}
                      className={`curr_page${param.curr_page}`}
                      style={{ height: 0 }}
                    ></div>
                  );
                } else {
                  return (
                    <div key={item.msg_id}>
                      {/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
                      <ChatTime msgtime={item.msg_time}></ChatTime>
                      {tabKey == '2' ? (
                        <ChatBar
                          from={selectStaff}
                          to={groupMembersObjRef.current[item.msg_from]}
                          chat={item}
                        ></ChatBar>
                      ) : (
                        <ChatBar
                          from={selectStaff}
                          to={
                            tabKeyRef.current == '0'
                              ? selectInnerStaffRef.current
                              : selectCustFollowRef.current
                          }
                          chat={item}
                        ></ChatBar>
                      )}
                    </div>
                  );
                }
              })}
            </div>
          </Spin>
        </div>
      </div>
    </PageContainer>
  );
};

export default ChatLogs;