/*
 * @Title:富文本展示，可预览图片
 * @Author: hongmye
 * @Date: 2022-03-21 14:44:49
 */
/**
 * 1.引入组件 import RichTextShow from '@/components/RichText/RichTextShow';
 * 示例：<RichTextShow content={this.state.content} onClickImg={src => {}} />;
 *
 *  2.传递方法  onClickImg 点击图片回调（不需可不传）
 *
 *  3.传值接收  content  富文本内容
 *             fileList 附件列表
 *
 *
 */
import { Image } from 'antd';
import { useEffect, useState } from 'react';
import FileListItem from './fileListItem';
import styles from './index.less';
function RichTextShow(props) {
  const [imgVisible, setImgVisible] = useState(false);
  const [imgPreviewSrc, setImgPreviewSrc] = useState('');
  const [fileList, setFileList] = useState([]);
  const onPreview = (e) => {
    e.stopPropagation();
    const src = e?.target?.src || null;
    if (!src) return;
    setImgPreviewSrc(src);
    setImgVisible(true);
    props.onClickImg && props.onClickImg(src, e.target);
  };
  useEffect(() => {
    setFileList(props.fileList);
  }, [props.fileList]);
  useEffect(() => {}, [props.content]);
  return (
    <div style={{ ...props.style }}>
      <div
        className={styles.RichTextShow}
        onClick={onPreview}
        dangerouslySetInnerHTML={{ __html: props.content || '' }}
      />
      {fileList && fileList.length > 0 && (
        <div className={styles.RichTextFileList}>
          <FileListItem
            list={fileList}
            onDel={(val) => {
              onDelFile(val);
            }}
            onPreview={(val) => {
              if (!val) return;
              setImgPreviewSrc(val.path);
              setImgVisible(true);
            }}
          />
        </div>
      )}
      <Image
        width={200}
        style={{ display: 'none' }}
        src={imgPreviewSrc}
        preview={{
          visible: imgVisible,
          src: imgPreviewSrc,
          onVisibleChange: (value) => {
            setImgVisible(value);
            if (!value) setImgPreviewSrc('');
          },
        }}
      />
    </div>
  );
}
export default RichTextShow;