import React, { useState } from "react";
import { Button, Modal } from "@tencent/tea-component";

export default function ModalShowExample() {
  return (
    <Button
      type="primary"
      onClick={() => {
        const modal = Modal.show({
          caption: "Modal.show() 打开对话框",
          children: <TimingModal onClose={() => modal.destroy()} />,
          onClose: () => modal.destroy(),
        });
      }}
    >
      打开
    </Button>
  );
}

// eslint-disable-next-line react/prop-types
function TimingModal({ onClose }) {
  const [time, setTime] = useState(new Date().toTimeString());

  return (
    <>
      <Modal.Body>当前时间 {time}</Modal.Body>
      <Modal.Footer>
        <Button
          type="primary"
          onClick={() => setTime(new Date().toTimeString())}
        >
          更新时间
        </Button>
        <Button onClick={onClose}>关闭</Button>
      </Modal.Footer>
    </>
  );
}