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

class DetailBox extends React.Component {

    okHandler = () => {
        const { dispatch, userGroup} = this.props;
        const { newOne } = userGroup;
        console.log(newOne.operate);
        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 { dispatch, userGroup } = this.props;
        const { newOne } = userGroup;

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };
        return (
            <Modal
                className='dataconnect-box'
                title={`${newOne.operate === 'create' ? '新建' : '修改'}用户组`}
                visible={newOne.visibleDetailBox}
                onOk={this.okHandler}
                onCancel={this.hideBox}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Form size='small'>
                    <FormItem label='用户组名' {...formItemLayout} >
                        <Input
                            placeholder="请输入用户组名称"
                            value={newOne.name}
                            onChange={(e) => {
                                dispatch({ type: 'userGroup/setNewModelField', name: 'name', value: e.target.value });
                            }}
                        >
                        </Input>
                    </FormItem>
                    <FormItem className='textarea-desc' label='描述' {...formItemLayout}>
                        <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(( { present: { userGroup } } ) => ({ userGroup }))(DetailBox)