scrm.antd/src/pages/ChatLogs/components/ChatRecord.tsx

import { Modal } from 'antd';
import { useEffect, useState } from 'react';
import { IChatItem } from '../ChatLogsType';
import styles from './index.module.scss';

export const ChatRecord: React.FC<IChatItem> = (props) => {
  const [visible, setVisible] = useState(false);

  function chatRecordContent(data: any) {
    // todo console.log(msg);

    if (data.type == 'ChatRecordText') {
      const content = JSON.parse(data.content);
      return <div>{content.content}</div>;
    } else if (data.type == 'ChatRecordImage') {
      return <div>[图片]</div>;
    } else if (data.type == 'ChatRecordFile') {
      return <div>[文件]</div>;
    } else if (data.type == 'ChatRecordVideo') {
      return <div>[视频]</div>;
    } else if (data.type == 'ChatRecordLink') {
      return <div>[链接]</div>;
    } else if (data.type == 'ChatRecordLocation') {
      return <div>[位置]</div>;
    } else if (data.type == 'ChatRecordMixed') {
      return <div>[混合信息]</div>;
    }
    return <div>[未匹配到类型信息]</div>;
  }

  const [record, setRecord] = useState<any>(null);

  useEffect(() => {
    try {
      const msg = JSON.parse(props.chat?.content as string);
      setRecord(msg);
    } catch (e) {}
  }, [props.chat]);

  function content() {
    try {
      const msg = JSON.parse(props.chat?.content as string);
      // setRecord(msg);
      console.log(msg);
      return (
        <div
          style={{
            display: 'flex',
            color: '#000',
            flexDirection: 'column',
            minWidth: 260,
            cursor: 'pointer',
          }}
          onClick={() => {
            setVisible(true);
          }}
        >
          <div style={{ wordBreak: 'break-all', fontSize: 16 }}>{msg.title}</div>
          {msg.item[0] ? (
            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0])}</div>
          ) : null}
          {msg.item[1] ? (
            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1])}</div>
          ) : null}
          {msg.item[2] ? (
            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2])}</div>
          ) : null}
          <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
            聊天记录
          </div>
        </div>
      );
    } catch (_e) {
      return (
        <div>
          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
        </div>
      );
    }
  }

  return (
    <>
      <Modal
        open={visible}
        footer={false}
        title={record ? record.title : '无标题'}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <div>
          {record ? (
            <div>
              {record.item.map((item: any) => {
                console.log(item);
                return (
                  <div
                    style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}
                    key={`${item.msgtime}_${item.type}`}
                  >
                    {chatRecordContent(item)}
                  </div>
                );
              })}
            </div>
          ) : null}
        </div>
      </Modal>
      {props.from?.user_id == props.chat?.msg_from ? (
        <div className={styles.chatRight}>
          <div className={styles.chatContentBox}>
            <div className={styles.name}>{props.from?.name}</div>
            <div className={styles.content}>{content()}</div>
          </div>
          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
        </div>
      ) : (
        <div className={styles.chatLeft}>
          <div className={styles.chatAvatar}>
            <img src={props.to?.cust_info.avatar} alt="" />
          </div>
          <div className={styles.chatContentBox}>
            <div className={styles.name}>{props.to?.cust_info.name}</div>
            <div className={styles.content}>{content()}</div>
          </div>
        </div>
      )}
    </>
  );
};