import React from 'react';
import { Input, Row, Col, Form } from '@btri-ui/base';
import { Checkbox } from '@btri-ui/base';
import { Button } from '@btri-ui/base';
import { Radio } from '@btri-ui/base';
import { Switch } from '@btri-ui/base';
import { Select } from '@btri-ui/base';

export default () => {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };
  return (
    <div>
      <Row autoMode={true}>
        <Col span={8}>
          <Form
            form={form}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            disabled
          >
            <Form.Item
              name="text"
              label="输入框"
              rules={[{ required: true, message: '请输入文本!' }]}
            >
              <Input placeholder="请输入文本" />
            </Form.Item>

            <Form.Item name="radio" label="单选框">
              <Radio.Group>
                <Radio value="radio1"> 选项1 </Radio>
                <Radio value="radio2"> 选项2 </Radio>
                <Radio value="radio3"> 选项3 </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="checkbox" label="多选框">
              <Checkbox.Group>
                <Checkbox value="checkbox1"> 选项1 </Checkbox>
                <Checkbox value="checkbox2"> 选项2 </Checkbox>
                <Checkbox value="checkbox3"> 选项3 </Checkbox>
              </Checkbox.Group>
            </Form.Item>

            <Form.Item name="switch" label="开关">
              <Switch></Switch>
            </Form.Item>
            <Form.Item name="select" label="Select">
              <Select>
                <Select.Option value="demo">Demo</Select.Option>
              </Select>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  );
};