import React from 'react'
import { Modal, Form, Input } from 'antd'
import { connect } from 'dva'
const FormItem = Form.Item

class DetailBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            okButtonDisabled: true
        }
    }

    okHandler = () => {
        const { dispatch, userGroup, form } = this.props;
        const { newOne } = userGroup;

        form.validateFields((err, values) => {
            if(!err) {
                if(newOne.operate === 'create') {
                    dispatch({ type: 'userGroup/remoteAdd' });
                }else if(newOne.operate === 'modify') {
                    dispatch({ type: 'userGroup/remoteModify' });
                }
            }
        })
    }

    hideBox = () => {
        const { dispatch} = this.props;
        dispatch({ type: 'userGroup/resetNewModel' });
    }

    render() {
        const me = this;
        const { dispatch, userGroup, form } = this.props;
        const { okButtonDisabled } = this.state;
        const { newOne } = userGroup;

        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };
        return (
            <Modal
                className='dataconnect-box'
                title={`${newOne.operate === 'create' ? '新建' : '修改'}用户组`}
                visible={newOne.visibleDetailBox}
                onOk={this.okHandler}
                okButtonProps={{ disabled: okButtonDisabled }}
                onCancel={this.hideBox}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Form size='small'>
                    <FormItem label='用户组名' {...formItemLayout} >
                        {
                            getFieldDecorator('groupName', {
                                initialValue: newOne.name,
                                validateFirst: true,
                                rules: [
                                    { validator(rule, value, callback, source, options) {
                                        let msg;
                                        if((value+'').trim().length === 0) {
                                            msg = '用户组名不能为空'
                                        }else if((value+'').length > 20) {
                                            msg = '用户组名长度不能大于20个字符'
                                        }
                                        me.setState({
                                            okButtonDisabled: !!msg
                                        });
                                        callback(msg);
                                    } }
                                ],
                            })(
                                <Input
                                    placeholder="请输入用户组名称"
                                    // value={newOne.name}
                                    onChange={(e) => {
                                        let value = e.target.value;
                                        dispatch({ type: 'userGroup/setNewModelField', name: 'name', value });
                                        me.setState({
                                            okButtonDisabled: !!value.trim()
                                        });
                                    }}
                                >
                                </Input>
                            )
                        }
                    </FormItem>
                    <FormItem className='textarea-desc' label='描述' {...formItemLayout}>
                        {
                            getFieldDecorator('description', {
                                initialValue: newOne.description,
                                validateFirst: true,
                                rules: [
                                    { validator(rule, value, callback, source, options) {
                                        let msg;
                                        if((value+'').length > 150) {
                                            msg = '用户组描述不能大于150个字符'
                                        }
                                        me.setState({
                                            okButtonDisabled: !!msg
                                        });
                                        callback(msg);
                                    } }
                                ],
                            })(
                                <Input.TextArea
                                    autosize={{ minRows: 2 }}
                                    // value={newOne.description}
                                    onChange={(e) => {
                                        dispatch({ type: 'userGroup/setNewModelField', name: 'description', value: e.target.value });
                                    }}
                                />
                            )
                        }
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}

export default connect(( { userGroup } ) => ({ userGroup }))(Form.create()(DetailBox))