// 药理学分类维护
import React from 'react';
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 = () => {
            this.setState({
                visible: false,
            });
            this.resetFields();
        }
        // 重置表单
        resetFields() {
            this.props.form.resetFields(); //清空所有
        }
        
        handleSave = (data) => {
            //console.log(data)
            $http.post('url', this, {
                code: '02020002',
                data: data,
                success: function (res) {   
                    //console.log(res)
                    if (+res.errorCode === 0 ) {
                        message.success('保存成功');
                        // 新增或编辑成功重置form表单
                        this.resetFields();
                        // 关闭弹框
                        this.handleCancel();
                        if(this.props.flag === 'modify'){
                            this.props.handelThis.setState({
                                phCatCode:(this.state.code && this.state.code!=='')? this.state.code : this.props.phcatcode,
                                phCatDesc:(this.state.desc && this.state.desc!=='')? this.state.desc : this.props.phcatdesc,
                            })
                        }
                        // 刷新列表数据
                        this.props.handelThis.handlePhCatQuery();
                    } else {

                    }
                }
            })
        }

        // 确定
        handleCreate = () => {
            let data = {}
            let { flag } = this.props;
            
            if (flag === 'add') {
                data={
                    params: [{
                        phCatID:'',
                        phCatCode:this.state.code? this.state.code : this.props.phcatcode,
                        phCatDesc:this.state.desc? this.state.desc : this.props.phcatdesc,
                        phCatParID:this.props.phcatid,
                    }]
                }
                this.handleSave(data);
            } else if (flag === 'modify') {
                data={
                    params: [{
                        phCatID:this.props.phcatid,
                        phCatCode:(this.state.code && this.state.code!=='')? this.state.code : this.props.phcatcode,
                        phCatDesc:(this.state.desc && this.state.desc!=='')? this.state.desc : this.props.phcatdesc,
                        phCatParID:'',
                    }]
                }
                this.handleSave(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: 5 },
                wrapperCol: { span: 19 }
            };
            let searchColConfig = {
                xs: { span: 24 },
                sm: { span: 20 },
                md: { span: 20 },
                lg: { span: 20 }
            }
            let modifyflag = this.props.flag==='modify'? '1' : ''
            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.fristLabel}>
                                    {getFieldDecorator('LastCat', {
                                        initialValue:this.props.phcatdesc,
                                        rules: [{ required: false, message: '请选择' }]
                                        })(
                                            <Input
                                                disabled={true}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label={this.props.codeLabel}>
                                    {getFieldDecorator('Code', {
                                        initialValue:modifyflag? this.props.phcatcode:'',
                                        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:modifyflag? this.props.phcatdesc:'',
                                        rules: [{ required: true, message: '请选择' }]
                                        })(
                                            <Input 
                                                onChange={this.onChangeDesc}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    }
);
export default FormHandel;