import React, { useState, useEffect } from 'react';
import { Modal, Progress, Button } from 'antd';
import ProgressDiy from './ProgressDiy';

const componentList = {
  ProgressDiy,
};

export default function DiyModal(props) {
  const [show, setShow] = useState(false);
  const changeShow = (s) => {
    setShow(s);
  };
  useEffect(() => {
    window.showDiyModalInfo = {
      // 对外暴露的接口.
      open: () => {
        changeShow(true);
      },
      close: () => {
        changeShow(false);
      },
      ModalProps: {
        title: '自定义弹框',
        width: 1200,
        bodyStyle: {
          minHeight: '50vh',
          overflowY: 'auto',
        },
        maskClosable: false,
        onCancel: () => {
          changeShow(false);
        },
        onOk: () => {
          console.log('点击了确定按钮');
        },
      },
      component: 'ProgressDiy',
      componentProps: {
        progressDefaultProps: {
          type: 'circle',
          strokeColor: {
            '0%': '#108ee9',
            '100%': '#87d068',
          },
          width: 200,
        },
      },
    };
  }, []);

  const Component = window.showDiyModalInfo && !!window.showDiyModalInfo.component
    ? componentList[window.showDiyModalInfo.component]
    : ProgressDiy;
  return (
    <div>
      {
        show &&
        <Modal {...window.showDiyModalInfo?.ModalProps} visible={show}>
          <Component componentProps={window.showDiyModalInfo.componentProps} />
        </Modal>
      }
    </div>
  );
}