/*
* 预约治疗
* */

import React, { Component } from 'react';
import { Input, Form, Select, Modal, Button, Divider, Icon } from 'antd';
import { Util } from 'tools/index';
import { $http } from 'containers/config/https';
import '../style/index.less';
import { dayFormat } from 'tools/index';
import moment from 'moment';

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

class ShowToOrderModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            rowId: 0
        }
    }

    static getDerivedStateFromProps(nextProp, nextState) {
        var cureAppID = nextProp.cureAppID;
        var rowData = nextProp.orderData;
        var patientData = nextProp.patientData;
        // 当传入的type发生变化的时候，更新state
        if (cureAppID !== nextState.cureAppID) {
            return {
                cureAppID,
                patientData,
                rowData
            };
        }
        // 否则，对于state不进行任何操作
        return null;
    }


    componentDidMount() {

    }

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

    //清空输入框
    cleanInput() {
        this.setState({
            newCode: false,
            rowId: 0
        })
        this.props.form.resetFields();
    }

    //提交
    onSubmit() {
        let { validateFields } = this.props.form;
        validateFields({ force: true }, (err, params) => {
            if (err) {
                return;
            }
            let { onSubmit } = this.props;

            onSubmit && onSubmit(this.state.repaywinfo, this.state.code);
        });
    }

    //双击去预约
    submitOrder(data) {
        let { onSubmit } = this.props;

        onSubmit && onSubmit(data.id);
    }

    changeHopsitalId(name, e) {
        var id = '';
        if (e) {
            id = e.substring(e.indexOf('^') + 1)
        }
        this.setState({
            [name]: id
        })
    }

    addBackground(data, index) {
        this.setState({
            rowId: index,
            code: data.id
        })
    }

    addElement(data, index, e) {
        if (e.keyCode == '13') {
            this.submitOrder(data)
        } else if (e.keyCode == '37') {//左方向键
            if (parseInt(this.state.rowId) - 1 < 0) {
                this.setState({//当向左移动已无数据时，默认第一个数据
                    rowId: '0'
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) - 1
                })
            }
        } else if (e.keyCode == '38') {//上方向键
            if (parseInt(this.state.rowId) - 4 < 0) {
                this.setState({//当上移已无数据时，默认当前数据
                    rowId: index
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) - 4
                })
            }
        } else if (e.keyCode == '39') {//右方向键schedulData
            if (parseInt(this.state.rowId) + 1 == this.props.orderData.resDetail.length) {
                this.setState({//当右移大于当前数据的长度时，默认当前数据
                    rowId: index
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) + 1
                })
            }
        } else if (e.keyCode == '40') {//下方向键
            if (parseInt(this.state.rowId) + 4 >= this.props.orderData.resDetail.length) {
                this.setState({//当下移大于当前数据的长度时，默认当前数据
                    rowId: index
                })
            } else {
                this.setState({
                    rowId: parseInt(this.state.rowId) + 4
                })
            }
        }
    }

    render() {
        var loadOrderNum = []
        if (!Util.isEmpty(this.props.orderData)) {
            var resDetail = this.props.orderData.resDetail;
            resDetail && resDetail.map((item, index) => {
                loadOrderNum.push(
                    <div className='order-table-body' style={{ cursor: 'pointer' }}
                        onKeyDown={this.addElement.bind(this, item, index)} tabIndex={'-1'}
                        onClick={this.addBackground.bind(this, item, index)} onDoubleClick={this.submitOrder.bind(this, item)}>
                        <div style={{ display: 'flex' }}><div className={item.workStatusCode == 'S' ? 'stop-order-num' :
                            (item.workStatusCode == 'F' ? 'full-order-num' : '')}></div>
                            <div className={item.workStatusCode == 'N' ? 'order-table-disable' : 'order-table-title'}>{item.timeDetail}</div></div>
                        <div style={{ background: index == this.state.rowId ? '#bfe6f8' : '' }}><div>已用号源/总号源</div>
                            {index == this.state.rowId ? <div style={{ display: 'flex', marginLeft: 50 }}>{item.regResources}
                                <Button autoFocus={true} style={{ border: '0', height: 10, background: '#bfe6f8' }}></Button></div> :
                                <div>{item.regResources}</div>}
                        </div>
                    </div>
                )
            })
        }

        return <div>
            <Modal className='show-order-modal'
                title={'预约治疗'}
                maskClosable={false}
                visible={this.props.isShow}
                onCancel={this.closeModal.bind(this)}
                onOk={this.onSubmit.bind(this)}>
                <div style={{ height: 79, display: 'flex', marginLeft: '20%' }}>
                    <div className={this.state.patientData && this.state.patientData.patSexCode == '1' ?
                        'splice-boy' : (this.state.patientData && this.state.patientData.patSexCode == '2' ? 'splice-girl' : 'splice-other')}></div>
                    <div style={{ height: 79, borderRight: '1px solid #EEEEEE' }}></div>
                    {!Util.isEmpty(this.state.patientData) ? <div style={{ fontSize: '16px' }}>
                        <div style={{ padding: '10px 0 0 10px' }}>
                            <span style={{ color: '#333333', fontWeight: 'bold' }}>{this.state.patientData ? this.state.patientData.patName || '--' : '--'}</span><Divider type="vertical" />
                            <span>{this.state.patientData ? this.state.patientData.patSexDesc || '--' : '--'}</span><Divider type="vertical" />
                            <span>{this.state.patientData ? this.state.patientData.patAge || '--' : '--'}</span><Divider type="vertical" />
                            <span><Icon className='patNo-splice' />{this.state.patientData ? this.state.patientData.patNo || '--' : '--'}</span>
                        </div>
                        <div style={{ fontWeight: 400, color: '#666666', fontSize: '16px', padding: '10px 0 0 10px' }}>
                            <span><Icon className='statusdesc-splice' />{this.state.patientData ? this.state.patientData.patSocialStatusDesc || '--' : '--'}</span><Divider type="vertical" />
                            <span><Icon className='typeDesc-splice' />{this.state.patientData ? this.state.patientData.patTypeDesc || '--' : '--'}</span><Divider type="vertical" />
                            <span>
                                <span style={{ color: '#1999db' }}><Icon className='account-splice' />{this.state.patientData ? this.state.patientData.accountBalance || '--' : 0}</span> </span>
                        </div>
                    </div> : <span style={{ color: '#999999', lineHeight: '79px', marginLeft: '20%' }}>{'暂无相关数据～'}</span>}
                </div>
                <div className='order-num-table'>
                    {loadOrderNum}
                </div>
            </Modal></div>
    }
}

export default Form.create()(ShowToOrderModal);