import Form from '../../form';
import Input from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const FormItem = Form.Item;
function onChange(v) {
  console.log(v);
}

ReactDOM.render(
  <div>
    <p>normal</p>
    <Form style={{ width: '200px' }}>
      <FormItem label="" hasFeedback help="帮助文案">
        <Input
          size="large"
          placeholder="Large"
          onChange={onChange}
          aria-label="Large"
        />
      </FormItem>
      <FormItem label="" hasFeedback help="disabled状态">
        <Input
          size="large"
          placeholder="Large"
          onChange={onChange}
          aria-label="Large"
          disabled
        />
      </FormItem>
      <FormItem label="" hasFeedback help="wraning状态">
        <Input
          size="large"
          state='warning'
          placeholder="Large"
          onChange={onChange}
          aria-label="Large"
        />
      </FormItem>
      <FormItem label="" validateState="error" help="这里是出错文案">
        <Input
          state="error"
          size="large"
          placeholder="Large"
          onChange={onChange}
          aria-label="Large"
        />
      </FormItem>
      <Input.TextArea
        placeholder="TextArea"
        maxLength={100}
        rows={4}
        showLimitHint
        aria-label="input max length 100"
      />
    </Form>
    <br/>
    <br/>
    <p>grey下的input</p>
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <Form style={{ width: '200px' }}>
        <FormItem label="" hasFeedback help="帮助文案">
          <Input
            size="large"
            placeholder="Large"
            onChange={onChange}
            aria-label="Large"
            theme='grey'
          />
        </FormItem>
        <FormItem label="" hasFeedback help="disabled状态">
          <Input
            size="large"
            placeholder="Large"
            onChange={onChange}
            aria-label="Large"
            theme='grey'
            disabled
          />
        </FormItem>
        <FormItem label="" hasFeedback help="wraning状态">
          <Input
            size="large"
            state='warning'
            placeholder="Large"
            onChange={onChange}
            aria-label="Large"
            theme='grey'
          />
        </FormItem>
        <FormItem label="" validateState="error" help="这里是出错文案">
          <Input
            state="error"
            size="large"
            placeholder="Large"
            onChange={onChange}
            aria-label="Large"
            theme='grey'
          />
        </FormItem>
        <Input.TextArea
          placeholder="TextArea"
          maxLength={100}
          rows={4}
          showLimitHint
          aria-label="input max length 100"
          theme='grey'
        />

      </Form>
    </div>
  </div>,
  document.getElementById('input-demo-1'),
);