import type { ModalProps } from 'antd';
import { Flex, Modal } from 'antd';
import { ReactNode } from 'react';
import styles from './index.less';

interface DialogProps extends ModalProps {
  height?: number;
  minHeight?: number;
  padding?: string | number;
  baseTitle?: string; //标准标题
  titleIcon?: string; //标题图标
  leftExtra?: ReactNode; //左侧插槽
  rightExtra?: ReactNode; //右侧插槽
}
const Dialog = (props: DialogProps) => {
  const {
    children,
    title,
    baseTitle,
    onCancel,
    titleIcon,
    height,
    minHeight,
    style,
    leftExtra,
    rightExtra,
    padding,
    ...reset
  } = props;
  return (
    <Modal
      onCancel={onCancel}
      closeIcon={null}
      footer={null}
      destroyOnClose
      centered
      maskClosable
      classNames={{
        mask: styles.mask,
      }}
      {...reset}
      style={{ pointerEvents: 'auto', ...style }}
    >
      {baseTitle && (
        <div className={styles.baseTitleWrap}>
          {baseTitle}
          <div className={styles.close} onClick={onCancel as () => void} />
        </div>
      )}
      {title && (
        <div className={styles.head}>
          <Flex align="center">
            <div className="dflex">
              <img
                src={require(`@/assets/images/home/${titleIcon}.png`)}
                className={styles.icon}
              />
              <span className={styles.title}>{title}</span>
            </div>
            <div className={styles.leftSolt}>{leftExtra}</div>
          </Flex>
          <div className={styles.close} onClick={onCancel as () => void} />
          <div className={styles.rightExtraBody}>{rightExtra}</div>
        </div>
      )}

      <div className={styles.contnet} style={{ height, minHeight, padding }}>
        {children}
      </div>
    </Modal>
  );
};

export default Dialog;
