import { start, vanex } from 'vanex';

import { Form, Button, Radio, Select, Table } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const demoModel = {
  name: 'demoModel',
  data: {
    form: {
      country: null,
      sex: null,
    },
    submitValues: null,
  },

  effects: {
    setForm(values) {
      this.form = values;
    },

    submit(values) {
      this.submitValues = values;
    },
  },
};

@vanex('demoModel')('autoSyncForm')
class Demo extends React.Component {
  constructor(props) {
    super(props);
  	this.form = this.props.form;
  }

  // @vanex 注解第二个参数列表可以是要注册为 AutoRun 的方法，他们会自动收集依赖
	// 当 AutoRun 方法的依赖（demo 中的 this.demoModel.form）发生改变时就会被调用
  autoSyncForm() {
    if (this.demoModel.form) {
      // 因为访问了 demoModel.form 所以会被自动收集为依赖
      this.form.setFieldsValue(this.demoModel.form);
    }
  }

  handleSubmit(e) {
    e.preventDefault();
    this.demoModel.submit(this.form.getFieldsValue());
  }

  render() {
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;


    return (
      <Form>
        <FormItem label="国籍：" {...formItemLayout}>
          {getFieldDecorator('country')(
          <Select
            placeholder="请选择国家"
            style={{ width: 200 }}
            
          >
            <li value="china">中国</li>
            <li value="use">美国</li>
            <li value="japan">日本</li>
            <li value="korean">韩国</li>
            <li value="Thailand">泰国</li>
          </Select>
            )}
        </FormItem>

        <FormItem label="性别：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('sex')(
          <RadioGroup 
          >
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
          </RadioGroup>
            )}
        </FormItem>

        <FormItem wrapperCol={{ span: 16, offset: 6 }}>
          <Button type="primary" onClick={this.handleSubmit.bind(this)}>
            确定
          </Button>
        
        </FormItem>
      </Form>
    );
  }
}

@vanex('demoModel')
class AnotherComponent extends React.Component {
  constructor() {
    super(...arguments);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.demoModel.setForm({
      country: 'china',
      sex: 'male',
    });
  }
  render() {
    const { demoModel } = this;
    return (
      <div>
        <h2>另外一个组件通过 Vanex 和表单交互</h2>
        <Button type="primary" onClick={this.handleClick}>
          设置表单
        </Button>
        <div>
          {demoModel.submitValues && demoModel.submitValues.sex
            ? <div>
              	<h3>表单提交的数据</h3>
              	<Table dataSource={[demoModel.submitValues]}>
                	<Table.Column title="国籍" dataIndex="country" />
                	<Table.Column title="性别" dataIndex="sex" />
              	</Table>
              </div>
            : null}
        </div>
      </div>
    );
  }
}

const DemoComp = Form.create()(Demo);

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>Vanex 表单</h1>
        <DemoComp />
        <AnotherComponent />
      </div>
    );
  }
}

start({
  component: Home,
  container: '#mountNode',
  models: {
    demoModel,
  },
});

    

        @import 'antd/dist/antd.css';