import React, { useState } from 'react';
import { Button, Input, Row, Col, Drawer } from '@btri-ui/base';
import { Form } from 'antd';
import './index.less';

export default () => {
  const [show, setShow] = useState(false);
  const toShow = () => setShow(true);
  const toClose = () => setShow(false);
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log('form finish', values);
  };
  const toSubmit = () => form.submit();
  return (
    <div>
      <Row autoMode={true}>
        <Col span={4}>
          <Button onClick={toShow}>打开抽屉</Button>
        </Col>
      </Row>
      <Drawer
        title="抽屉标题"
        visible={show}
        onClose={toClose}
        footer={true}
        onOk={toSubmit}
      >
        <Form
          form={form}
          layout="vertical"
          name="control-hooks"
          onFinish={onFinish}
        >
          <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="手机号码" rules={[{ required: true }]}>
            <Input type="tel" />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ required: true }]}>
            <Input type="email" />
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
};