import React from 'react';
import { Form, Select, Input, Button } from 'antd';
import channels from './channelList.less';

const { TextArea } = Input;
const { Option } = Select;

class App extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log('Form.Item', values.note)
      if (!err) {
       alert('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
        <Form.Item label="渠道名称">
          {getFieldDecorator('note', {
            rules: [{ required: true, message: '请输入渠道名称' }],
          })(<Input className={channels.inpuit} / >)}
        </Form.Item>
        <Form.Item label="联系人">
          {getFieldDecorator('note2', {
            rules: [{ required: true, message: ' 请输入联系人' }],
          })(<Input className={channels.inpuit} />)}
        </Form.Item>
        <Form.Item label="联系电话">
          {getFieldDecorator('note3', {
            rules: [{ required: true, message: '请输入联系电话' }],
          })(<Input className={channels.inpuit} />)}
        </Form.Item>
        <Form.Item label="说明描述">
       <TextArea className={channels.inpuitTxt} rows={8} />
        </Form.Item>
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button className={channels.formButton} type="primary" htmlType="submit">
            取消
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedApp = Form.create({ name: 'coordinated' })(App);

export default () => (
  <>
    <WrappedApp />
  </>
);