import React, { Component } from 'react';
import { Form, Input, Button, Checkbox, Field, Dialog } from 'aop-ui';
import './index.scss';

const FormItem = Form.Item;

export default class MyForm extends Component {
    constructor(props) {
        super(props);
        this.field = new Field(this);
    }

    handleSubmit() {
        Dialog.alert({
            content: JSON.stringify(this.field.getValues())
        });
    }

    render() {
        const init = this.field.init;
        const formItemLayout = {
            labelCol: {
                fixedSpan: 4
            },
            wrapperCol: {
                span: 14
            }
        };

        return (
            <Form direction="ver">
                <FormItem label="用户名：" {...formItemLayout}>
                    <p className="next-form-text-align">固定名称</p>
                </FormItem>
                <FormItem label="密码：" required {...formItemLayout}>
                    <Input htmlType="password" {...init('pass')} placeholder="请输入密码"/>
                </FormItem>

                <FormItem label="备注：" {...formItemLayout} help="随便写点什么">
                    <Input multiple placeholder="随便写" {...init('remark')} />
                </FormItem>
                <FormItem label=" " {...formItemLayout} >
                    <Checkbox {...init('agreement')} >同意</Checkbox>
                </FormItem>
                <FormItem label=" " {...formItemLayout} >
                    <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
                </FormItem>
            </Form>
        );
    }
}