import React, { useEffect, useState } from "react";
import { Modal, Button } from "antd";
import "./modal.scss";
function tip_modal({ data, okClick, cancelClick }) {
  const [isShow, setShowModal] = useState(false);
  useEffect(() => {
    setShowModal(true);
  });
  const ok_click = () => {
    setShowModal(false);
    okClick(data.modal_type);
  };
  const cancel_click = () => {
    setShowModal(false);
    cancelClick(false);
  };
  return (
    <div>
      {data &&
        (data.modal_type === "confirm" ? (
          <Modal
            title={data.title}
            visible={isShow}
            wrapClassName="tips-modal tips-modal-confirm"
            onCancel={() => cancel_click()}
            footer={[
              <div className="edu-txt-center lineH2 mb10">
                <Button type="primary" onClick={() => cancel_click()}>
                  我知道了
                </Button>
              </div>,
            ]}
          >
            <div className="modal-content-padding">
              <div className="edu-txt-center lineH2">{data.content}</div>
            </div>
          </Modal>
        ) : (
          <Modal
            title={data.title}
            visible={isShow}
            onOk={() => ok_click()}
            onCancel={() => cancel_click()}
            okText="确认"
            cancelText="取消"
            wrapClassName="tips-modal-confirm"
          >
            <div className="modal-content-padding">
              {data.head && (
                <div className="fs16 edu-txt-center lineH2 mb10">
                  {data.head}
                </div>
              )}
              {data.content && <div className="lineH2">{data.content}</div>}
            </div>
          </Modal>
        ))}
    </div>
  );
}
export default tip_modal;
