import React from 'react';
import ContentBox from '../../../themeComponents/ContentBox';
import InfoBox from '../../../themeComponents/ContentBox/InfoBox';
import { Button, Checkbox, Radio, Input, Select, DatePicker, InputNumber } from 'antd';
import IconFont from '../../../themeComponents/IconFont';
import './index.less';

export default function FormTheme() {
  return (
    <ContentBox className="form-theme-component">
      <InfoBox title="Button示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Button>按钮1</Button>
        <Button type="primary">按钮2</Button>
        <Button type="primary" ghost>
          按钮3
        </Button>
        <Button type="danger">按钮4</Button>
        <Button type="danger" ghost>
          按钮5
        </Button>
        <Button type="primary" disabled>
          按钮6
        </Button>
      </InfoBox>
      <InfoBox title="Checkbox示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Checkbox>复选框1</Checkbox>
        <Checkbox checked>复选框2</Checkbox>
        <Checkbox disabled>复选框3</Checkbox>
        <Checkbox checked disabled>
          复选框4
        </Checkbox>
      </InfoBox>
      <InfoBox title="Radio示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Radio>单选框1</Radio>
        <Radio checked>单选框2</Radio>
        <Radio disabled>单选框3</Radio>
        <Radio checked disabled>
          单选框4
        </Radio>
      </InfoBox>
      <InfoBox title="Input示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Input placeholder="请输入关键字" style={{ width: 240 }} />
        <Input placeholder="请输入关键字" style={{ width: 240 }} prefix={<IconFont type="icon-S_Bar_CloudSearch" />} />
        <Input placeholder="请输入关键字" style={{ width: 240 }} disabled />
        <InputNumber defaultValue={0} />
        <Input.TextArea placeholder="请输入关键字" style={{ width: 240 }} />
      </InfoBox>
      <InfoBox title="Select示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Select placeholder="请选择" style={{ width: 240 }}>
          <Select.Option key="1">Option1</Select.Option>
          <Select.Option key="2">Option2</Select.Option>
          <Select.Option key="3">Option3</Select.Option>
        </Select>
        <Select placeholder="请选择" style={{ width: 240 }} mode="multiple">
          <Select.Option key="1">Option1</Select.Option>
          <Select.Option key="2">Option2</Select.Option>
          <Select.Option key="3">Option3</Select.Option>
        </Select>
      </InfoBox>
      <InfoBox title="DataPicker示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <DatePicker />
        <DatePicker.RangePicker />
      </InfoBox>
    </ContentBox>
  );
}
