/**
 * 新建治疗申请
 */
import React from 'react';
import {
    Modal, Row, Col, Select, Card, Radio, Input, Button, Tree, Icon, Tag, Table,
    Divider, message, DatePicker, TimePicker
} from 'antd';
import { Util, dayFormat, hourFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ReadCard from 'components/readcard/ReadCard';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const confirm = Modal.confirm;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

class ShowCompleteTreatModal extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var date = new Date()
        this.state = {
            userData: userData,
            radioValue: '1',
            ids: [],
            dataSource: [],
            bookScheduleID: [],
            startDate: moment(date).format(dayFormat),
            endDate: moment(date).format(dayFormat),
            startTime: moment(date).format(hourFormat),
            endTime: moment(date).format(hourFormat),
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            var date = new Date()
            this.setState({
                cureAppID: nextProp.cureAppID,
                titleData: nextProp.patientData,
                startDate: moment(date).format(dayFormat),
                endDate: moment(date).format(dayFormat),
                startTime: moment(date).format(hourFormat),
                endTime: moment(date).format(hourFormat),
            }, () => {
                this.loadCompleteList()
                this.autoCheckTime()
            })
        } else if (this.props.isShow === false) {
            this.clearInput()
        }
    }

    loadCompleteList() {
        var params = {
            params: [{
                cureAppID: this.state.cureAppID
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040166",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    var dataSource = []
                    var source = res.result.data
                    if (!Util.isEmpty(source)) {
                        for (var i = 0; i < source.length; i++) {
                            dataSource.push({
                                ...source[i],
                                value: source[i].evaluationDefaultValue
                            })
                        }
                    }
                    this.setState({
                        completeList: dataSource
                    })
                }
            }
        });
    }

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

    clearInput() {
        this.setState({
            curePlan: undefined,
            note: undefined
        })
    }

    //鼠标移动添加样式
    addMouseOverStyle(name, e) {
        this.setState({
            addMouseStyle: true,
            indexStyle: name
        })
    }
    addMouseLeaveStyle() {
        this.setState({
            addMouseStyle: false,
            indexStyle: ''
        })
    }

    changeDateTime(name, e) {
        this.setState({
            [name]: e ? moment(e).format(dayFormat) : ''
        }, () => {
            this.autoCheckTime()
        })
    }

    autoCheckTime() {
        var params = {
            params: [{
                StartDate: this.state.startDate,
                EndDate: this.state.endDate,
                StartTime: this.state.startTime,
                EndTime: this.state.endTime
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040179",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({
                        timeTotal: res.dateTime
                    })
                }
            }
        });
    }

    changeHoutTime(name, e) {
        this.setState({
            [name]: e ? moment(e).format(hourFormat) : ''
        }, () => {
            this.autoCheckTime()
        })
    }

    handleSelectChange(id, type, e,option) {
        var { completeList } = this.state;
        for (var i = 0; i < completeList.length; i++) {
            if (id == completeList[i].ID) {
                this.state.completeList[i]['value'] = type == 'text' ? e.target.value : (option?option.props.children:'')
                this.setState({})
            }
        }
    }

    onSubmit() {
        var { cureAppID, startDate, endDate, startTime, endTime, completeList, curePlan, note } = this.state;
        if(Util.isEmpty(note)){
            message.error('治疗备注不能为空')
            return
        }
        if(Util.isEmpty(curePlan)){
            message.error('治疗备注不能为空')
            return
        }
        var { onSubmit } = this.props;
        onSubmit && onSubmit(cureAppID, startDate, endDate, startTime, endTime, completeList, curePlan, note)
    }

    render() {
        var { completeList } = this.state;

        var completeListOption = []
        completeList && completeList.map((item, index) => {
            if (item.fieldTypeCode == 'Input' || item.fieldTypeCode == 'InputNumber') {
                completeListOption.push(<Col span={12} style={{ padding: '3px 0' }} key={index}><span>{item.fieldDesc}：</span>
                    <Input value={item.value} style={{ width: '70%' }}
                        onChange={this.handleSelectChange.bind(this, item.ID, 'text')} /></Col>)
            } else if (item.fieldTypeCode == 'Text') {
                completeListOption.push(<Col span={12} style={{ padding: '3px 0' }} key={index}><span>{item.fieldDesc}：</span>
                    <TextArea value={item.value} style={{ width: '70%' }} rows={1}
                        onChange={this.handleSelectChange.bind(this, item.ID, 'text')} /></Col>)
            } else if (item.fieldTypeCode == 'Select' || item.fieldTypeCode == 'SelectBox') {
                var selectOption = []
                var selectData = item.data
                selectData && selectData.map((data, code) => {
                    selectOption.push(<Option key={code} value={data.id}>{data.descripts}</Option>)
                })
                completeListOption.push(<Col span={12} style={{ padding: '3px 0' }} ><span>{item.fieldDesc}：</span>
                    <Select value={item.value} style={{ width: '70%' }}
                        onChange={this.handleSelectChange.bind(this, item.ID, 'select')}>{selectOption}</Select></Col>)
            }
        })

        return <div className='show-application-modal'>
            <Modal className='complete-treat-modal'
                title={'请录入治疗信息'}
                maskClosable={false}
                visible={this.props.isShow}
                onOk={this.onSubmit.bind(this)}
                okText='完成治疗'
                cancelText='打印'
                onCancel={this.closeModal.bind(this)}>
                <Card>
                    <div style={{ width: '50%', borderRight: '1px solid #EEEEEE', height: 79, display: 'flex', float: 'left' }}>
                        <div className={this.state.titleData && this.state.titleData.patSexCode == '1' ?
                            'splice-boy' : (this.state.titleData && this.state.titleData.patSexCode == '2' ? 'splice-girl' : 'splice-other')}></div>
                        <div style={{ height: 79, borderRight: '1px solid #EEEEEE' }}></div>
                        {!Util.isEmpty(this.state.titleData) ? <div style={{ fontSize: '16px' }}>
                            {/* <div style={{ padding: '10px 0 0 20px' }}></div> */}
                            <div style={{ padding: '10px 0 0 20px' }}>
                                <span style={{ color: '#333333', fontWeight: 'bold', cursor: 'pointer' }}>
                                    {this.state.titleData ? this.state.titleData.patName || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.patSexDesc || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.patAge || '--' : '--'}</span><Divider type="vertical" />
                                <span><Icon className='patNo-splice' />{this.state.titleData ? this.state.titleData.patNo || '--' : '--'}</span>
                            </div>
                            <div style={{ fontWeight: 400, color: '#666666', fontSize: '16px', padding: '10px 0 0 20px' }}>
                                <span><Icon className='statusdesc-splice' />{this.state.titleData ? this.state.titleData.patSocialStatusDesc || '--' : '--'}</span><Divider type="vertical" />
                                <span><Icon className='typeDesc-splice' />{this.state.titleData ? this.state.titleData.patTypeDesc || '--' : '--'}</span><Divider type="vertical" />
                                <span>{/**{this.setMessage('DoctorAdviceModalAccount', 'descripts')} */}
                                    <span style={{ color: '#1999db' }}><Icon className='account-splice' />{this.state.titleData ? this.state.titleData.accountBalance || '--' : 0}</span> </span>
                            </div>
                        </div> : <span style={{ color: '#999999', lineHeight: '79px', marginLeft: '20%' }}>暂无相关数据～</span>}
                    </div>
                    <div style={{ marginLeft: 10, marginTop: 10 }}>
                        治疗项目：<span>{this.state.titleData ? this.state.titleData.medDesc || '--' : '--'}</span><br />
                        <span style={{ marginTop: 10 }}>诊断：<span>{this.state.titleData ? this.state.titleData.diagnosis || '--' : '--'}</span></span>
                    </div>
                </Card>

                <Card style={{ marginTop: 5 }}>
                    <div>
                        <div style={{ float: 'left', width: '50%' }}>
                            主诉：<TextArea rows='2' disabled={true}></TextArea>
                        </div>
                        <div style={{ float: 'right', width: '49.8%' }}>
                            现病史：<TextArea rows='2' disabled={true}></TextArea>
                        </div>
                    </div>
                    <div>
                        <div style={{ float: 'left', width: '50%' }}>
                            治疗备注：<TextArea rows='2' value={this.state.note} onChange={Util.commonInputChange.bind(this, 'note')}></TextArea>
                        </div>
                        <div style={{ float: 'right', width: '49.8%' }}>
                            治疗计划：<TextArea rows='2' value={this.state.curePlan} onChange={Util.commonInputChange.bind(this, 'curePlan')}></TextArea>
                        </div>
                    </div>
                </Card>

                <Card style={{ marginTop: 5 }}>
                    <Row>
                        <Col span={11}>
                            治疗开始时间：<DatePicker value={this.state.startDate ? moment(this.state.startDate, dayFormat) : ''} placeholder='请选择开始时间'
                                onChange={this.changeDateTime.bind(this, 'startDate')} />
                            <TimePicker value={this.state.startTime ? moment(this.state.startTime, hourFormat) : ''} format='HH:mm' placeholder='时间'
                                onChange={this.changeHoutTime.bind(this, 'startTime')} />
                        </Col>
                        <Col span={11}>
                            治疗结束时间：<DatePicker value={this.state.endDate ? moment(this.state.endDate, dayFormat) : ''} placeholder='请选择结束时间'
                                onChange={this.changeDateTime.bind(this, 'endDate')} />
                            <TimePicker value={this.state.endTime ? moment(this.state.endTime, hourFormat) : ''} format='HH:mm' placeholder='时间'
                                onChange={this.changeHoutTime.bind(this, 'endTime')} />
                        </Col>
                    </Row>
                    <Row style={{ marginTop: 5 }}>
                        <Col span={7}>
                            治疗用时：<Input placeholder='请输入治疗用时' style={{ width: '70%' }} disabled={true}
                                value={this.state.timeTotal || '--'} />
                        </Col>
                        <Col span={7}>
                            治疗医生：<Input placeholder='请输入治疗医生' style={{ width: '70%' }} disabled={true}
                                value={this.state.userData.userName} />
                        </Col>
                    </Row>
                </Card>
                <Card style={{ marginTop: 5 }}>
                    <Row style={{ textAlign: 'right', marginRight: '20px' }}>{completeListOption}</Row>
                    {/* <div>
                        <span>
                            <span style={{ float: 'left' }}>治疗效果：</span>
                            <span style={{ float: 'right' }}>
                                <span style={{ cursor: 'pointer' }} className={this.state.indexStyle == '1' ? 'mouse-add-Style' : ''}
                                    onMouseLeave={this.addMouseLeaveStyle.bind(this)}
                                    onMouseOver={this.addMouseOverStyle.bind(this, '1')}>保存模板</span>
                                <span style={{ margin: '0 10px', cursor: 'pointer' }} className={this.state.indexStyle == '2' ? 'mouse-add-Style' : ''}
                                    onMouseLeave={this.addMouseLeaveStyle.bind(this)}
                                    onMouseOver={this.addMouseOverStyle.bind(this, '2')}>调用模板</span></span>
                        </span>
                        <TextArea rows='3'></TextArea>
                    </div>
                    <div>
                        <span>
                            <span style={{ float: 'left' }}>治疗小结：</span>
                            <span style={{ float: 'right' }}><span style={{ cursor: 'pointer' }} className={this.state.indexStyle == '3' ? 'mouse-add-Style' : ''}
                                onMouseLeave={this.addMouseLeaveStyle.bind(this)}
                                onMouseOver={this.addMouseOverStyle.bind(this, '3')}>保存模板</span>
                                <span style={{ margin: '0 10px', cursor: 'pointer' }} className={this.state.indexStyle == '4' ? 'mouse-add-Style' : ''}
                                    onMouseLeave={this.addMouseLeaveStyle.bind(this)}
                                    onMouseOver={this.addMouseOverStyle.bind(this, '4')}>调用模板</span></span>
                        </span>
                        <TextArea rows='3'></TextArea>
                    </div>
                    <div>
                        <span>
                            <span style={{ float: 'left' }}>备注：</span>
                            <span style={{ float: 'right' }}><span style={{ cursor: 'pointer' }} className={this.state.indexStyle == '5' ? 'mouse-add-Style' : ''}
                                onMouseLeave={this.addMouseLeaveStyle.bind(this)}
                                onMouseOver={this.addMouseOverStyle.bind(this, '5')}>保存模板</span>
                                <span style={{ margin: '0 10px', cursor: 'pointer' }} className={this.state.indexStyle == '6' ? 'mouse-add-Style' : ''}
                                    onMouseLeave={this.addMouseLeaveStyle.bind(this)}
                                    onMouseOver={this.addMouseOverStyle.bind(this, '6')}>调用模板</span></span>
                        </span>
                        <TextArea rows='3'></TextArea>
                    </div> */}
                </Card>
            </Modal>
        </div>
    }
}

export default ShowCompleteTreatModal;