import services from '@/services';
import { useRequest } from 'ahooks';
import { Modal } from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';

interface SafetyModalProps {
  data: any;
  open: boolean;
  onCancel: () => void;
}

const SafetyModal = ({ data, open, onCancel }: SafetyModalProps) => {
  const { data: articleDetail, loading } = useRequest(
    () => services.Information.getArticleDetail({ id: data?.id }),
    {
      ready: !!data?.id && open,
    }
  );

  return (
    <Modal
      title={null}
      open={open}
      footer={null}
      onCancel={onCancel}
      width={1309}
      height={846}
      className={styles.customModal}
      maskStyle={{ background: 'rgba(0, 11, 25, 0.7)' }}
    >
      <div className={styles.modalContent}>
        <div className={styles.modalTitle}>{articleDetail?.data?.title || data?.title}</div>
        <div className={styles.modalInfo}>
          <span>来源：{articleDetail?.data?.source || data?.source}</span>
          <span>
            发布时间：
            {dayjs(articleDetail?.data?.publishTime || data?.publishTime).format(
              'YYYY-MM-DD HH:mm:ss'
            )}
          </span>
        </div>
        <div className={styles.modalBody}>
          <div
            className={styles.content}
            dangerouslySetInnerHTML={{ __html: articleDetail?.data?.content }}
          />
          {(articleDetail?.data?.cover || data?.cover) && (
            <div className={styles.coverImage}>
              {/* <img src={articleDetail?.data?.cover || data?.cover} alt="" /> */}
              {/* {data?.coverList?.map((cover: string, index: number) => (
                <img key={index} src={cover} alt={`Cover image ${index + 1}`} />
                ))} */}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default SafetyModal; 