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 { Form, Input, Modal, Tabs } from 'antd';
import Spin from 'antd/lib/spin';
import { stringify } from 'qs';
import React, { useEffect, useRef, useState } from 'react';
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
import { ChatBar } from './components/ChatBar';
import { ChatTime } from './components/ChatTime';
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 = {
    '0': '跟进人正常',
    '1': '跟进人离职',
    '2': '离职继承中',
    '3': '离职继承完成',
  };

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

  const [flolowsBoxShow, setFlolowsBox] = 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);
  }

  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)) {
          // 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];
          }
          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.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) => {
              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>
          )}
        </>
      );
    } else {
      return (
        <>
          {groupList.length ? (
            groupList.map((item) => {
              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>
          )}
        </>
      );
    }
  };

  const formatTags = () => {
    if (selectCustFollow?.tags) {
      try {
        const tags = JSON.parse(selectCustFollow?.tags);
        if (Array.isArray(tags)) {
          return (
            <>
              {tags.map((item) => {
                return (
                  <div key={`${item.group_name}_${item.tag_name}`}>
                    {item.group_name}：{item.tag_name}
                  </div>
                );
              })}
            </>
          );
        }
      } catch (e) {}
    }
    return <></>;
  };

  function adminList() {
    if (selectGroupRef.current?.admin_list) {
      try {
        const msg = JSON.parse(selectGroupRef.current?.admin_list);
        if (Array.isArray(msg) && msg.length) {
          let arr: any = [];
          msg.forEach((el) => {
            arr.push(groupMembersObjRef.current[el.userid]?.name);
          });

          return <div>群管理者：{arr.join('，')}</div>;
        }
      } catch (e) {
        return <></>;
      }
    }

    return <></>;
  }

  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 ? '#e6f4ff' : '' }}
                >
                  <div className={styles.avatar}>{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.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' }}
              onClick={() => {
                setOpen(true);
              }}
            >
              {tabKeyRef.current == '0' ? (
                <>{selectInnerStaffRef.current?.name}</>
              ) : tabKeyRef.current == '1' ? (
                <>{selectCustFollowRef.current?.name}</>
              ) : (
                <>{selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}</>
              )}
            </div>
            <Modal
              title={
                tabKeyRef.current == '0' ? (
                  <>{selectInnerStaffRef.current?.name} 详细信息</>
                ) : tabKeyRef.current == '1' ? (
                  <>{selectCustFollowRef.current?.name} 详细信息</>
                ) : (
                  <>{selectGroupRef.current?.name || '未定义群名'} 详细信息</>
                )
              }
              open={open}
              centered
              onCancel={() => setOpen(false)}
              footer={false}
            >
              {tabKeyRef.current == '0' ? (
                <div>
                  <div
                    style={{
                      display: 'flex',
                      borderBottom: '1px solid #ddd',
                      paddingBottom: 12,
                      marginBottom: 12,
                    }}
                  >
                    <div className={styles.modalAvatar}>{selectInnerStaff?.name[0]}</div>
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                      <div style={{ fontSize: 16 }}>{selectInnerStaff?.name}</div>
                    </div>
                  </div>
                  <div>账号：{selectInnerStaff?.name}</div>
                  <div>手机：{selectInnerStaff?.telephone}</div>
                  <div>职务：{selectInnerStaff?.position}</div>
                </div>
              ) : 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>
                        {selectCustFollow?.gender == 1 ? (
                          <svg viewBox="0 0 1024 1024" width="16" height="16">
                            <path
                              d="M828.875 765.657c-191.159-16.86-202.516-102.922-202.516-102.922v-85.997c111.656-43.063 145.76-207.699 145.76-207.699 0-65.457-32.153-67.281-32.153-67.281V195.093c7.486-177.753-100.33-136.61-102.25-136.61-1.791 0-60.466-46.774-60.466-46.774-41.751-31.8-134.499 11.262-134.499 11.262l-3.839 0.064c-104.937 2.751-132.387 78.479-132.387 78.479l1.92 196.437c-54.804 0-47.35 76.719-47.35 76.719 0 84.142 147.616 200.148 147.616 200.148 9.47 110.472-49.174 166.46-49.174 166.46s-100.266 3.711-213.84 37.432c-2.72 0.863-5.344 1.6-7.967 2.463C30.617 817.421 0 920.855 0 920.855v101.033l463.579 1.888 68.465-1.92h491.732V943.25c1.92-115.815-194.901-177.593-194.901-177.593z m-244.65 129.22l-71.25 128.675-69.616-128.676-16.124-64.05 30.68-136.354h111.656l29.178 136.354-14.525 64.05z"
                              fill="#1890ff"
                            ></path>
                          </svg>
                        ) : (
                          <svg viewBox="0 0 1025 1024" width="16" height="16">
                            <path
                              d="M613.312 626.496v-11.2h151.296V318.08c0-124.736-113.152-225.856-252.608-225.856S259.392 193.344 259.392 318.08v297.216h151.36v11.072h-0.256L115.648 820.16v107.136H908.48v-105.92l-295.168-194.88z m7.68 186.752c-72.192 69.824-109.504-36.416-109.504-36.416s-37.312 106.24-109.568 36.416c0 0-31.744-20.544-35.136-158.208l144.704 121.728L656.192 655.04c-3.392 137.6-35.2 158.208-35.2 158.208z"
                              fill="#1890ff"
                            ></path>
                          </svg>
                        )}
                      </div>
                      <div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
                    </div>
                  </div>
                  <div>备注名称：{selectCustFollow?.remark}</div>
                  {formatTags()}
                </div>
              ) : (
                <div>
                  <div>
                    群创建者：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
                  </div>
                  <div>{adminList()}</div>
                  <div>创建时间：{selectGroupRef.current?.create_time}</div>
                  <div>群公告：{selectGroupRef.current?.notice}</div>
                  <div style={{ fontWeight: 'bold', marginTop: 8, marginBottom: 8 }}>群成员:</div>
                  {groupMembersList.map((item) => {
                    return (
                      <div
                        key={item.user_id}
                        style={{
                          display: 'inline-flex',
                          justifyContent: 'flex-start',
                          alignItems: 'center',
                          width: 64,
                          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: 56,
                            textAlign: 'center',
                          }}
                          title={item.name}
                        >
                          {item.name}
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </Modal>
          </div>
          <Spin spinning={chatLogLoading} style={{ display: 'block' }}>
            <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}
                      {tabKey == '2' ? (
                        <ChatBar
                          from={selectStaff}
                          to={groupMembersObjRef.current[item.msg_from]}
                          chat={item}
                        ></ChatBar>
                      ) : (
                        <ChatBar from={selectStaff} to={selectCustFollow} chat={item}></ChatBar>
                      )}
                    </div>
                  );
                }
              })}
            </div>
          </Spin>
        </div>
      </div>
    </PageContainer>
  );
};

export default ChatLogs;