/*
* 预约
* */

import React, { Component } from 'react';
import { Form, Select, Modal, Button, Divider } 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;

class CancelOrderModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rowId: 0
        }
    }

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

    componentDidMount() {
        this.loadDepartHospital();
        this.loadPayWay();
        this.initData();

    }

    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }

    initData() {
        this.columns = [
            {
                title: '时间段',
                dataIndex: 'timeRange',
                width: 120,
                align: 'center'
            }, {
                title: '时间',
                dataIndex: 'timeDetail',
                width: 120,
                align: 'center'
            }, {
                title: '已用号源',
                dataIndex: 'regResources',
                width: 120,
                align: 'center'
            },
        ]
    }

    loadDepartHospital() {
        var params = {
            params: [{
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040060",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        contractUnitData: res.contractUnit
                    })
                }
            }
        });
    }

    loadPayWay() {
        var params = {
            params: [{}]
        }
        $http.post('urlDeault', this, {
            code: "03040009",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        payWay: res.data
                    })
                }
            }
        });
    }

    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 key={index} className="order-table-body" 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>
                )
            })
        }

        var contractUnitOption = []
        this.state.contractUnitData && this.state.contractUnitData.map((item, index) => {
            contractUnitOption.push(<Option key={index} value={item.descripts + '^' + item.id}>{item.descripts}</Option>)
        })

        //支付方式
        var payWayOption = []
        this.state.payWay && this.state.payWay.map((item, index) => {
            payWayOption.push(<Option key={index} value={item.id}>{item.descripts}</Option>)
        })

        return <div>
            <Modal className='registr-modal'
                title={'请选择预约时间'}
                maskClosable={false}
                visible={this.props.isShow}
                onCancel={this.closeModal.bind(this)}
                onOk={this.onSubmit.bind(this)}>
                <div>
                    <div style={{ display: 'flex' }}><div className='border-radius-registr'></div>
                        <div style={{ marginLeft: 10, fontWeight: 'bold' }}>预约信息</div></div>
                    <span>{this.props.orderData ? this.props.orderData.patInfo.patNo : undefined}</span><Divider type="vertical" />
                    <span>{this.props.bookName ? this.props.bookName :
                        (this.props.orderData ? this.props.orderData.patInfo.patName : '')}</span><Divider type="vertical" />
                    <span>{this.props.bookSex ? this.props.bookSex :
                        (this.props.orderData ? this.props.orderData.patInfo.patSexDesc : '')}</span><Divider type="vertical" />
                    <span>{this.props.orderData ? this.props.orderData.patInfo.patAge : undefined}</span><Divider type="vertical" />
                    <span>居民身份证&nbsp;&nbsp;{this.props.credNo ? this.props.credNo :
                        (this.props.orderData ? this.props.orderData.patInfo.patCredNo : '')}</span><Divider type="vertical" />
                    <span>{this.props.mobilephone ? this.props.mobilephone :
                        (this.props.orderData ? this.props.orderData.patInfo.patMobile : '')}</span>
                </div>
                <div style={{ marginTop: 20 }}>
                    <div style={{ float: 'left', marginLeft: 30 }}>
                        <span><span style={{ background: '#F5F4F4' }}>预约科室：</span>
                            <span>{Util.isEmpty(this.props.recordData) ? undefined : this.props.recordData.locDescripts}</span>
                        </span><br />

                        <span><span style={{ background: '#F5F4F4' }}>预约日期：</span>
                            <span>{Util.isEmpty(this.props.recordData) ? undefined : moment(this.props.date).format(dayFormat)}</span>
                        </span>
                    </div>

                    <div style={{ float: 'right', marginRight: 50 }}>
                        <span><span style={{ background: '#F5F4F4' }}>预约医生：</span>
                            <span>{Util.isEmpty(this.props.recordData) ? undefined : this.props.recordData.docName}</span>
                        </span><br />
                        <span><span style={{ background: '#F5F4F4' }}>总费用(元)：</span>
                            <span style={{ color: '#FA8C16' }}>{Util.isEmpty(this.props.recordData) ? undefined : this.props.recordData.price}</span>
                        </span>
                    </div>
                </div><br />
                {/* <div style={{ marginTop: 5 }} className='order-table'>
                    <Table columns={this.columns} dataSource={this.props.orderData?this.props.orderData.resDetail:[]}
                        tabIndex={this.state.rowId}
                        onRow={this.onClickRow}
                        rowClassName={this.setRowClassName}
                        rowKey={(data) => {
                            return data.id
                        }}
                        pagination={false}>
                    </Table> */}
                {this.props.bookStatus ? null : <div className='order-num-table'>
                    {loadOrderNum}
                </div>}
            </Modal>
        </div>
    }
};

export default Form.create()(CancelOrderModal);