// 化学通用名维护
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Input, Row ,Col ,message } from 'antd';
import { $http } from '../../../containers/config/https';

const FormItem = Form.Item;

const FormHandel = Form.create()(
    class extends React.Component {
        state = { 
            visible: false,
        };
        componentDidMount() {
          this.props.onRef(this);
        }
        // 显示弹出层
        showModal = () => {
            this.setState({
                visible: true,
            });
        }
        // 取消
        handleCancel = () => {
            //console.log(this.props)
            this.setState({
                visible: false,
            });
            this.resetFields();
        }
        // 重置表单
        resetFields() {
            // console.log("触发了")
            this.props.form.resetFields(); //清空所有
        }
        
        handleChemisSave = (data) => {
            //console.log(data)
            $http.post('url', this, {
                code: '02020003',
                data: data,
                success: function (res) {   
                    //console.log(res)
                    if (+res.errorCode === 0 ) {
                        message.success('保存成功');
                        // 新增或编辑成功重置form表单
                        this.resetFields();
                        // 关闭弹框
                        this.handleCancel();
                        if(this.props.flag === 'modifyChemis'){
                            this.props.handelThis.setState({
                                selectCode:this.state.code,
                                selectDesc:this.state.desc,
                            })
                        }
                        // 刷新列表数据
                        this.props.handelThis.handleQuery();
                    } else {

                    }
                }
            })
        }

        // 确定
        handleCreate = () => {
            //console.log(this.props)
            let data = {}
            let { flag } = this.props;
            
            if (flag === 'addChemis') {
                data={
                    params: [{
                        chemicID:'',
                        chemicCode:this.state.code,
                        chemicDesc:this.state.desc,
                        phCatID:this.props.phcatid,
                    }]
                }
                this.handleChemisSave(data);
            } else if (flag === 'modifyChemis') {
                data={
                    params: [{
                        chemicID:this.props.ID,
                        chemicCode:(this.state.code && this.state.code !=='')?this.state.code:this.props.code,
                        chemicDesc:(this.state.desc && this.state.desc !=='')?this.state.desc:this.props.desc,
                        phCatID:'',
                    }]
                }
                this.handleChemisSave(data);
            }
        }

        // 代码
        onChangeCode = (e) => {
            this.setState({ 
                code: e.target.value,
            });
        }

        // 描述
        onChangeDesc = (e) => {
            this.setState({ 
                 desc: e.target.value,
            });
        }

        render() {
            const { getFieldDecorator } = this.props.form;
            let formItemLayout = {
                labelCol: { span: 7 },
                wrapperCol: { span: 17 }
            };
            let searchColConfig = {
                xs: { span: 24 },
                sm: { span: 20 },
                md: { span: 20 },
                lg: { span: 20 }
            }
            return (
                <Modal
                    visible={this.state.visible}
                    title={this.props.title}
                    okText="确定"
                    onCancel={this.handleCancel}
                    onOk={this.handleCreate}
                    centered={true}
                >
                    <Form layout="vertical">
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label={this.props.phCatDescLabel}>
                                    {getFieldDecorator('PhCatDesc', {
                                        initialValue:this.props.phCatDesc,
                                        rules: [{ required: false, message: '请选择' }]
                                        })(
                                            <Input
                                                disabled={true}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label={this.props.oldDescLabel}>
                                    {getFieldDecorator('OldDesc', {
                                        initialValue:this.props.oldDesc,
                                        rules: [{ required: false, message: '请选择' }]
                                        })(
                                            <Input
                                                disabled={true}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label={this.props.codeLabel}>
                                    {getFieldDecorator('Code', {
                                        initialValue:this.props.code,
                                        rules: [{ required: true, message: '请选择' }]
                                        })(
                                            <Input 
                                                onChange={this.onChangeCode}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label={this.props.descLabel}>
                                    {getFieldDecorator('Descripts', {
                                        initialValue:this.props.desc,
                                        rules: [{ required: true, message: '请选择' }]
                                        })(
                                            <Input 
                                                onChange={this.onChangeDesc}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    }
);
export default FormHandel;

FormHandel.propTypes = {
    // 验证userInfo的属性
    userInfo: PropTypes.object
  }