import React from 'react';
import { Modal, Input, Form, Row, Col, Select, DatePicker, message} from 'antd';
import Moment from 'moment';
import { $http } from 'containers/config/https';

let {Option} = Select;

class CMOrderGroupModal extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            selectData: [], // 下拉框数据
            flag: 'add',
            userInfo: {}, // 编辑数据
        };
        this.myRef1 = React.createRef();
        this.myRef2 = React.createRef();
        this.myRef3 = React.createRef();
        this.myRef4 = React.createRef();
        this.myRef5 = React.createRef();
    }

    componentDidMount() {
        this.props.onRef(this);
    }

    componentWillReceiveProps(props) {
        if (this.state.selectData !== props.selectData) {
            this.setState({selectData: props.selectData})
        }
    }

    // 新增草药医嘱套
    handleOk = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values.cmOrderSetID = this.state.userInfo.cmOrderSetID ? this.state.userInfo.cmOrderSetID : '';
                values.cmOrderSetStartDate = values.cmOrderSetStartDate ? Moment(values.cmOrderSetStartDate).format('YYYY-MM-DD') : ""; // 生效日期
                values.cmOrderSetStopDate = values.cmOrderSetStopDate ? Moment(values.cmOrderSetStopDate).format('YYYY-MM-DD') : ""; // 失效日期
                let data = {
                    params: []
                }
                data.params.push(values)
                $http.post('urlADS', this, {
                    code: '03050025',
                    data: data,
                    success: function (res) {
                        if (+res.errorCode === 0) {
                            // 成功提示
                            if(this.state.flag === 'compile') {
                                message.success("编辑成功");
                                // 重置数据
                                this.handleCancel();
                            } else {
                                message.success("新增成功");
                                this.setState({visible: false}, () => {
                                    this.resetFields();
                                })
                            }
                            this.props.handleQuery()
                        }
                    }
                })
            }
        })
    }

    // 关闭模态框
    handleCancel = () => {
        this.setState({visible: false}, () => {
            if(this.state.flag === 'compile') {
                // 重置数据
                this.setState({userInfo: {}});
                this.resetFields();
            }
        })
    }

    // 打开模态框
    showModal = (flag, userInfo={}) => {
        this.setState({visible: true, flag, userInfo}, () => {
            setTimeout(() => {
                this.myRef1.current.focus();
            }, 300)
        })
    }

    // 重置表单
    resetFields() {
        this.props.form.resetFields();
    }

    // 获取拼英首字母
    getPinyinInitials = (title) => {
        let data = {
            params: [{
                descripts: title
            }]
        }
        $http.post('urlADS', this, {
            code: '01040117',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let str = title + "_" + res.result;
                    this.props.form.setFieldsValue({
                        cmOrderSetAlias: str
                    }, () => {
                        setTimeout(() => {
                            this.myRef2.current.focus();
                        }, 300)
                    })
                }
            }
        })
    }

    handleOnSelect = (num, e) => {
        switch(num){
            case 1:
                this.getPinyinInitials(e.target.value)
                break;
            case 2:
                setTimeout(() => {
                    this.myRef3.current.focus();
                }, 300)
                break;
            case 3:
                setTimeout(() => {
                    this.myRef4.current.focus();
                }, 300)
                break;
            default:
                setTimeout(() => {
                    this.myRef5.current.focus();
                }, 300)
        }
    }

    render() {
        let {selectData, userInfo, visible} = this.state;
        const { getFieldDecorator } = this.props.form;

        // 级别
        let authRangeOption = selectData.authRange&&selectData.authRange.map((item, index) => {
            return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        })
        return (
            <Modal
				title="添加成套医嘱（草药）"
				visible={visible}
				onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={600}
            >
            <div style={{width: '100%'}}>
                <Form className="depart-form">
                    <Form.Item label="名称：">
                        {getFieldDecorator('cmOrderSetDesc', {
                            initialValue: userInfo.cmOrderSetDesc ? userInfo.cmOrderSetDesc : undefined,
                            rules: [{ required: true, message: '名称不能为空' }]
                        })(
                            <Input placeholder="请输入" ref={this.myRef1} onPressEnter={(e) => this.handleOnSelect(1, e)} />
                        )}
                    </Form.Item>
                    <Form.Item label="别名：">
                        {getFieldDecorator('cmOrderSetAlias', {
                            initialValue: userInfo.cmOrderSetAlias ? userInfo.cmOrderSetAlias : undefined,
                        })(
                            <Input placeholder="请输入" ref={this.myRef2} onPressEnter={() => this.handleOnSelect(2)} />
                        )}
                    </Form.Item>
                    <Form.Item label="使用级别：">
                        {getFieldDecorator('cmOrderSetUserRangeID', {
                            initialValue: userInfo.cmOrderSetUserRangeID ? userInfo.cmOrderSetUserRangeID : undefined,
                            rules: [{ required: true, message: '使用级别不能为空' }]
                        })(
                            <Select showSearch optionFilterProp="seatchprop" placeholder="请选择" ref={this.myRef3} onChange={() => this.handleOnSelect(3)}>
                                {authRangeOption}
                            </Select>
                        )}
                    </Form.Item>
                    {/* <Form.Item label="添加到模板：">
                        {getFieldDecorator('locTypeID', {
                            initialValue: userInfo.locTypeID ? userInfo.locTypeID : undefined,
                        })(
                            <Select showSearch optionFilterProp="seatchprop" placeholder="请选择">
                                
                            </Select>
                        )}
                    </Form.Item> */}
                    <Form.Item label="生效日期：">
                        {getFieldDecorator('cmOrderSetStartDate', {
                            initialValue: userInfo.cmOrderSetStartDate ? Moment(userInfo.cmOrderSetStartDate) : Moment(),
                            rules: [{ required: true, message: '生效日期不能为空' }]
                        })(
                            <DatePicker style={{width: '100%'}} format="YYYY-MM-DD" allowClear ref={this.myRef4} onChange={() => this.handleOnSelect(4)} />
                        )}
                    </Form.Item>
                    <Form.Item label="失效日期：">
                        {getFieldDecorator('cmOrderSetStopDate', {
                            initialValue: userInfo.cmOrderSetStopDate ?  Moment(userInfo.cmOrderSetStopDate) : undefined,
                        })(
                            <DatePicker style={{width: '100%'}} format="YYYY-MM-DD" allowClear ref={this.myRef5} onChange={() => this.handleOnSelect(5)} />
                        )}
                    </Form.Item>
                </Form>
            </div>
        </Modal>
        )
    }
};
const CMOrderGroupModalForm = Form.create()(CMOrderGroupModal);
export default CMOrderGroupModalForm;