import { Dialog } from "@ls-design/ui-react";

export default () => {
  const [open, setOpen] = useState(false);
  const showDialog = () => {
    setOpen(true);
  };

  const handleConfirm = () => {
    setOpen(false);
  };

  const handleClose = () => setOpen(false);

  return (
    <div>
      <div onClick={showDialog}>基础弹窗</div>
      <Dialog
        open={open}
        title="基础弹窗"
        onConfirm={handleConfirm}
        onClose={handleClose}
        content="代码是写出来给人看的，附带能在机器上运行"
      ></Dialog>
    </div>
  );
};

export default () => {
  const [open, setOpen] = useState(false);
  const showDialog = () => {
    setOpen(true);
  };

  const handleConfirm = () => {
    setOpen(false);
  };

  const handleClose = () => setOpen(false);

  return (
    <div>
      <div onClick={showDialog}>次要按钮</div>
      <Dialog
        open={open}
        title="次要按钮"
        btnvertical={true}
        oktext="主要按钮"
        canceltext="次要按钮"
        onConfirm={handleConfirm}
        onClose={handleClose}
        content="弹窗的内容下是两个具体的操作按钮，点击后会跳转到对应的页面，所以需要右上角关闭按钮，让用户可以关闭弹窗"
      ></Dialog>
    </div>
  );
};

export default () => {
  const [open, setOpen] = useState(false);

  const showDialog = () => {
    setOpen(true);
  };

  const close = () => {
    setOpen(false);
  };

  return (
    <div>
      <div onClick={showDialog}>自定义 body | Footer | 关闭按钮</div>
      <Dialog open={open} title="自定义 body | Footer | 关闭按钮">
        <div onClick={close}>x</div>
        <div>我是自定义body,代码是写出来给人看的，附带能在机器上运行</div>
        <div slot="footer" className="custom-footer">
          {" "}
          自定义footer{" "}
        </div>
      </Dialog>
    </div>
  );
};