/**
 * 添加数据类型
 */
import React, { Component } from 'react';
import { Input, Form, Select, Modal, Button, Divider, DatePicker, Row, Col } from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const FormItem = Form.Item;

class ShowSourceTypeModal extends Component {

    constructor(props) {
        var date = new Date()
        super(props);
        this.state = {
            startDate: moment(date).format(dayFormat),
            stopDate: '',
        }
    }

    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            if (!Util.isEmpty(nextProp.recordData)) {
                this.setState({
                    recordData: nextProp.recordData,
                    id: nextProp.recordData.id,
                    code: nextProp.recordData.code,
                    descripts: nextProp.recordData.descripts,
                    enDescripts: nextProp.recordData.enDescripts,
                    note: nextProp.recordData.note,
                    className: nextProp.recordData.className,
                    methodName: nextProp.recordData.methodName,
                    startDate: nextProp.recordData.startDate ? moment(nextProp.recordData.startDate).format(dayFormat) : '',
                    stopDate: nextProp.recordData.stopDate ? moment(nextProp.recordData.stopDate).format(dayFormat) : ''
                })
            }
        } else if (this.props.isShow === false) {
            this.cleanInput();
        }
    }

    componentDidMount() {
    }

    closeModal(name) {
        let { onHide } = this.props;
        onHide && onHide();
        this.cleanInput();
    }

    //清空输入框
    cleanInput() {
        var date = new Date()
        this.props.form.resetFields();
        this.setState({
            code: undefined,
            descripts: undefined,
            enDescripts: undefined,
            note: undefined,
            className: undefined,
            methodName: undefined,
            id: undefined,
            startDate: moment(date).format(dayFormat),
            stopDate: '',
        })
    }

    changeDate(name, e) {
        this.setState({
            [name]: e ? moment(e).format(dayFormat) : ''
        })
    }

    //提交
    onSubmit() {
        let { validateFields } = this.props.form;
        validateFields({ force: true }, (err, params) => {
            if (err) {
                return;
            }
            var data = {
                ...params,
                id: this.state.id,
                startDate: params.startDate ? moment(params.startDate).format(dayFormat) : '',
                stopDate: params.stopDate ? moment(params.stopDate).format(dayFormat) : '',
            }
            let { onSubmit } = this.props;

            onSubmit && onSubmit(data);
        });
    }

    render() {
        let { getFieldDecorator, getFieldValue } = this.props.form;
        let formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 }
        };
        return <div>
            <Modal className='sourceType-modal'
                title={!Util.isEmpty(this.state.id) ? '修改数据类型' : '添加数据类型'}
                maskClosable={false}
                visible={this.props.isShow}
                onCancel={this.closeModal.bind(this)}
                onOk={this.onSubmit.bind(this)}>
                <Form>
                    <Row>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="代码">
                                {getFieldDecorator('code', {
                                    initialValue: this.state.code,
                                    rules: [{ required: true, message: '代码不能为空' }],
                                })(
                                    <Input placeholder='请输入代码' onChange={Util.commonInputChange.bind(this, 'code')} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={11}>
                            <FormItem {...formItemLayout} label="描述">
                                {getFieldDecorator('descripts', {
                                    initialValue: this.state.descripts,
                                    rules: [{ required: true, message: '描述不能为空' }],
                                })(
                                    <Input placeholder='请输入描述' onChange={Util.commonInputChange.bind(this, 'descripts')} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={11}>
                            <FormItem {...formItemLayout} label="英文描述">
                                {getFieldDecorator('enDescripts', {
                                    initialValue: this.state.enDescripts,
                                    // rules: [{ required: true, message: '英文描述不能为空' }],
                                })(
                                    <Input placeholder='请输入英文描述' onChange={Util.commonInputChange.bind(this, 'enDescripts')} />
                                )}
                            </FormItem>
                        </Col>


                        <Col span={11}>
                            <FormItem {...formItemLayout} label="方法名">
                                {getFieldDecorator('methodName', {
                                    initialValue: this.state.methodName,
                                    rules: [{ required: true, message: '方法名不能为空' }],
                                })(
                                    <Input placeholder='请输入方法名' onChange={Util.commonInputChange.bind(this, 'methodName')} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={11}>
                            <FormItem {...formItemLayout} label="类名">
                                {getFieldDecorator('className', {
                                    initialValue: this.state.className,
                                    rules: [{ required: true, message: '类名不能为空' }],
                                })(
                                    <Input placeholder='请输入类名' onChange={Util.commonInputChange.bind(this, 'className')} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={11}>
                            <FormItem {...formItemLayout} label="备注">
                                {getFieldDecorator('note', {
                                    initialValue: this.state.note,
                                })(
                                    <Input placeholder='请输入备注' onChange={Util.commonInputChange.bind(this, 'note')} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={11}>
                            <FormItem {...formItemLayout} label="生效日期">
                                {getFieldDecorator('startDate', {
                                    initialValue: moment(this.state.startDate, dayFormat),
                                    rules: [{ required: true, message: '生效日期不能为空' }],
                                })(
                                    <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} onChange={this.changeDate.bind(this, 'startDate')} />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={11}>
                            <FormItem {...formItemLayout} label="失效日期">
                                {getFieldDecorator('stopDate', {
                                    initialValue: this.state.stopDate ? moment(this.state.stopDate, dayFormat) : ''
                                })(
                                    <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} onChange={this.changeDate.bind(this, 'stopDate')} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </div>
    }
}

export default Form.create()(ShowSourceTypeModal);