// 处方通用名维护
import React from 'react';
import { Modal, Form, Input, Row ,Col ,message ,Select } from 'antd';
import { $http } from '../../../containers/config/https';
const Option = Select.Option;
const FormItem = Form.Item;

const FormHandel = Form.create()(
    class extends React.Component {
        state = { 
            visible: false,
            chemistryData:[],
            formData:[],
        };
        componentDidMount() {
          this.props.onRef(this);
          this.loadInfo(); //获取下拉框信息
        }

        //获取下拉框信息
        loadInfo(){
            var params = [{}]
            $http.post('urlS', this, {
                code: "02020006",
                data: params,
                success: function (res) {
                    // console.log(res)
                    if (res.errorCode === '0') {
                        //console.log('chemistry.length:'+res.chemistry.length)
                        for(var i = 0; i < res.chemistry.length; i++) {
                            //console.log(res.chemistry[i])
                            this.state.chemistryData.push(<Option value={res.chemistry[i].id} key={i}>{res.chemistry[i].descripts}</Option>)
                        }
                        for(var j = 0; j < res.form.length; j++) {
                            // console.log(res.form[j])
                            this.state.formData.push(<Option value={res.form[j].id} key={j}>{res.form[j].descripts}</Option>)
                        }
                    }
                }
            });
        }


        ///处理多个select下拉的公共方法
        selectOnChange=(name,value,option)=>{
            if(value){
                this.setState({
                    [name]:value,
                })
            }else{
                this.setState({
                    [name]:'',
                })
            }
        }

        // 显示弹出层
        showModal = () => {
            this.setState({
                visible: true,
            });
        }
        // 取消
        handleCancel = () => {
            this.setState({
                visible: false,
            });
            this.resetFields();
        }
        // 重置表单
        resetFields() {
            // console.log("触发了")
            this.props.form.resetFields(); //清空所有
        }
        
        handleSave = (data) => {
            // console.log(data)
            $http.post('url', this, {
                code: '02020007',
                data: data,
                success: function (res) {   
                    console.log(res)
                    if (+res.errorCode === 0 ) {
                        message.success('保存成功');
                        // 新增或编辑成功重置form表单
                        this.resetFields();
                        // 关闭弹框
                        this.handleCancel();
                        if(this.props.flag === 'modifyGeneric'){
                            this.props.handelThis.setState({
                                selectCode:(this.state.code && this.state.code !=='')?this.state.code:this.props.code,
                                selectDesc:(this.state.desc && this.state.desc !=='')?this.state.desc:this.props.desc,
                                selectChemisDr:(this.state.selectChemistry||this.state.selectChemistry==='')?this.state.selectChemistry:this.props.chemisDr,
                                selectFormDr:(this.state.selectForm||this.state.selectForm==='')?this.state.selectForm:this.props.formDr,
                            })
                        }
                        this.setState({
                            code:'',
                            desc:'',
                        })
                        // 刷新列表数据
                        this.props.handelThis.handleAllQuery();
                    } else {

                    }
                }
            })
        }

        // 确定
        handleCreate = () => {
            let data = {}
            let { flag } = this.props;
            if (flag === 'addGeneric') {
                data={
                    params: [{
                        generID:'',
                        generCode:this.state.code,
                        generDesc:this.state.desc,
                        chemicID:(this.state.selectChemistry||this.state.selectChemistry==='')?this.state.selectChemistry:this.props.chemisDr,
                        formID:(this.state.selectForm||this.state.selectForm==='')?this.state.selectForm:this.props.formDr,
                    }]
                }
                this.handleSave(data);
            } else if (flag === 'modifyGeneric') {
                data={
                    params: [{
                        generID:this.props.ID,
                        generCode:(this.state.code && this.state.code !=='')?this.state.code:this.props.code,
                        generDesc:(this.state.desc && this.state.desc !=='')?this.state.desc:this.props.desc,
                        chemicID:(this.state.selectChemistry||this.state.selectChemistry==='')?this.state.selectChemistry:this.props.chemisDr,
                        formID:(this.state.selectForm||this.state.selectForm==='')?this.state.selectForm:this.props.formDr,
                    }]
                }
                this.handleSave(data);
            }
        }

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

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

        render() {
            //console.log(this.props)
            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='化学通用名'>
                                    {getFieldDecorator('Chemistry', {
                                        initialValue:this.props.chemisDr,
                                        rules: [{ required: false, message: '请选择' }]
                                        })(
                                            <Select
                                                allowClear={true}
                                                showSearch 
                                                optionFilterProp="children" 
                                                onChange={this.selectOnChange.bind(this,"selectChemistry")}
                                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            >
                                            {this.state.chemistryData}
                                            </Select>
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label='剂型'>
                                    {getFieldDecorator('Form', {
                                        initialValue:this.props.formDr,
                                        rules: [{ required: false, message: '请选择' }]
                                        })(
                                            <Select
                                                allowClear={true}
                                                showSearch 
                                                optionFilterProp="children" 
                                                onChange={this.selectOnChange.bind(this,"selectForm")}
                                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            >
                                            {this.state.formData}
                                            </Select>
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label='改前处方通用名'>
                                    {getFieldDecorator('OldDesc', {
                                        initialValue:this.props.oldDesc,
                                        rules: [{ required: false, message: '请选择' }]
                                        })(
                                            <Input
                                                disabled={true}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={40}>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label='处方通用名代码'>
                                    {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='处方通用名描述'>
                                    {getFieldDecorator('Descripts', {
                                        initialValue:this.props.desc,
                                        rules: [{ required: true, message: '请选择' }]
                                        })(
                                            <Input 
                                                onChange={this.onChangeDesc}
                                            />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    }
);
export default FormHandel;