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 { CustDetailContent } from '../CustomList/components/CustDetailContent';
import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
import { adminList, getAdminList, groupMembersCount, groupMembersCount2 } from './ChatUtils';
import { ChatBar } from './components/ChatBar';
import { ChatTime } from './components/ChatTime';
import { AdminSvg, OwnerSvg } from './components/Svgs';
import styles from './index.module.scss';

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<any>({
    '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);
  }

  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) {
        let arr: IChat[] = [];
        if (Array.isArray(res.data) && res.data.length) {
          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 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 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)) {
          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 == selectGroupRef.current?.owner) {
              owner.push(item);
            } else if (selectGroupRef.current?.adminUserIDs.includes(item.user_id)) {
              admin_list.push(item);
            } else {
              other.push(item);
            }
          });
          // 对群员 创建者 > 管理员 > 普通成员 排序
          setGroupMembersList([...owner, ...admin_list, ...other]);
          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 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();
        }
      }
    });
  };

  // 监听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 });

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

  // 外部联系人Item
  const custFollowsListItem = (item: ICustFollow) => {
    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>
    );
  };

  // 客户群聊列表项
  const groupListItem = (item: IGroup) => {
    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;
          selectGroupRef.current.adminUserIDs = getAdminList(item.admin_list);

          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>
    );
  };

  // 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) => {
              return item.state == 0 ? null : custFollowsListItem(item);
            })
          ) : (
            <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) => {
                return item.state == 1 ? null : custFollowsListItem(item);
              })}
            </div>
          </div>
        </>
      );
    } else {
      return (
        <>
          {groupList.length ? (
            groupList.map((item) => {
              return item.state == 0 ? null : groupListItem(item);
            })
          ) : (
            <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) => {
                return item.state == 1 ? null : groupListItem(item);
              })}
            </div>
          </div>
        </>
      );
    }
  };

  // 删除的联系人/群
  const tabContentDel = () => {
    if (tabKey == '0') {
      return <></>;
    } else if (tabKey == '1') {
      return (
        <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) => {
              return item.state == 1 ? null : custFollowsListItem(item);
            })}
          </div>
        </div>
      );
    } else {
      return (
        <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) => {
              return item.state == 1 ? null : groupListItem(item);
            })}
          </div>
        </div>
      );
    }
  };

  // 群 Drawer 群员
  const groupMembersListItem = (item: IGroupMembers) => {
    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.inGroupAvatar}>
          {item.avatar ? (
            <img
              style={{
                maxWidth: '100%',
                maxHeight: '100%',
                objectFit: 'cover',
                borderRadius: 4,
              }}
              src={item.avatar}
              alt=""
            />
          ) : item.name ? (
            item.name[0]
          ) : (
            ''
          )}
          {item.user_id == selectGroupRef.current?.owner ? <OwnerSvg /> : null}
          {selectGroupRef.current?.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>
    );
  };

  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={() => {
                    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
            />
          </Form>
          <Tabs
            items={tabs}
            size="small"
            style={{ padding: '0 12px' }}
            tabBarGutter={12}
            onChange={(val) => {
              setTabKey(val);
            }}
          />
          <div className={styles.chatBBox}>{tabContent()}</div>
          {tabContentDel()}
        </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} />
              ) : tabKeyRef.current == '1' ? (
                <CustDetailContent record={selectCustFollow as ICustFollow} />
              ) : (
                <div>
                  <div style={{ marginBottom: 8, textIndent: '2em' }}>
                    群主：
                    {groupMembersObjRef.current[selectGroupRef.current?.owner as string]?.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) => {
                    return item.group_members_type == '2' || item.state == 0 ? null : groupMembersListItem(item);
                  })}
                  {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);
                  })}
                  {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);
                  })}
                </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) => {
                if (item.curr_page) {
                  return <div key={item.curr_page} className={`curr_page${param.curr_page}`} style={{ height: 0 }} />;
                } else {
                  return (
                    <div key={item.msg_id}>
                      {/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
                      <ChatTime msgtime={item.msg_time} />
                      {tabKey == '2' ? (
                        <ChatBar from={selectStaff} to={groupMembersObjRef.current[item.msg_from]} chat={item} />
                      ) : (
                        <ChatBar
                          from={selectStaff}
                          to={tabKeyRef.current == '0' ? selectInnerStaffRef.current : selectCustFollowRef.current}
                          chat={item}
                        />
                      )}
                    </div>
                  );
                }
              })}
            </div>
          </Spin>
        </div>
      </div>
    </PageContainer>
  );
};

export default ChatLogs;
