import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Form, Select, AutoComplete } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const AutoOption = AutoComplete.Option;

import './public/style/main.less';
class Edit extends Component {
    constructor(props){
      super(props);
      this.state = {
        emailChildren: []
      };
      this.handleEmailChange = (value) => {
        let result, emailChildren;
        if (!value || value.indexOf('@') >= 0) {
          result = [];
        } else {
          result = ['126.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
        }
        emailChildren = result.map((email) => {
          return <Option key={email}>{email}</Option>;
        });
        console.log(emailChildren)
        this.setState({ emailChildren });
      }
    }
    render() {
      const { getFieldDecorator } = this.props.form;
      return(
        <div>
          <Form horizontal>
          <FormItem
            label='Email'
            hasFeedback
            >
            {getFieldDecorator('email', {
              rules: [{
                type: 'email', message: 'The input is not valid E-mail!',
              }, { 
                required: true, message: 'Please input Email!' 
              }]
            })(
              <AutoComplete
                onChange={this.handleEmailChange}
                placeholder='Email'
              >
                {this.state.emailChildren}
              </AutoComplete>
            )}
          </FormItem>
        </Form>
        </div>
      )
    }
}
const UserEdit = Form.create()(Edit);
//挂载点
const MOUNT_NODE = document.getElementById('app');
ReactDOM.render(
  <div>
    <UserEdit/>
  </div>,
  MOUNT_NODE
);