/**
 * 新建治疗申请
 */
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 store from 'store';
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 ShowHistoryListModal 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.initData()
                this.loadData()
                this.autoCheckTime()
            })
        } else if (this.props.isShow === false) {
            this.clearInput()
        }
    }

    initData() {
        this.columns = [
            {
                title: '要求治疗时间',
                dataIndex: 'reqDateTime',
                width: 150,
                align: 'center',
            }, {
                title: '实际治疗时间',
                dataIndex: 'execDateTime',
                width: 150,
                align: 'center',
            }, {
                title: '治疗医生',
                dataIndex: 'cureDoctorDesc',
                width: 150,
                align: 'center',
            }]
    }

    loadData() {
        var params = {
            params: [{
                ID: this.state.cureAppID
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040169",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    var data = res.result.dataArr
                    this.setState({
                        dataSource: res.result.dataArr,
                        totalPrice: res.result.totalPrice,
                        payPrice: res.result.unAmount,
                        unPayPrice: res.result.reAmount,
                        rowIds: !Util.isEmpty(data) ? data[0].ID : ''
                    }, () => {
                        this.loadCompleteList(!Util.isEmpty(data) ? data[0].ID : '')
                    })
                }
            }
        });
    }

    loadCompleteList(id) {
        var params = {
            params: [{
                ID: id
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040170",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    var source = res.result.dataArr
                    this.setState({
                        completeList: source,
                        startDate: source ? source[0].startDate : '',
                        endDate: source ? source[0].endDate : '',
                        startTime: source ? source[0].startTime : '',
                        endTime: source ? source[0].endTime : '',
                        note: source ? source[0].note : '',
                        curePlan: source ? source[0].curePlan : '',
                    })
                }
            }
        });
    }

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

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

    //鼠标移动添加样式
    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) {
        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 : e
                this.setState({})
            }
        }
    }

    //点击行，渲染当前行样式 
    setRowClassName = (record) => {
        return record.ID === this.state.rowIds ? 'clickRowStyle' : '';
    }

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    rowIds: record.ID,
                    patientData: record,
                    bookScheduleID: [],
                    ordDetailID: record.ordDetailID
                }, () => {
                    this.loadCompleteList(record.ID)
                })
            }
        };
    }

    onSubmit() {
        var { cureAppID, startDate, endDate, startTime, endTime, completeList, curePlan, note } = this.state;
        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='history-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>
                <div style={{ marginTop: 5 }}>
                    <div style={{ float: 'left', width: '30%' }}>
                        <Card>
                            <Table columns={this.columns} className='appoint-treat-table-body'
                                dataSource={this.state.dataSource}
                                onRow={this.onClickRow}
                                rowClassName={this.setRowClassName}
                                bordered
                                rowKey={(data) => {
                                    return data.ID
                                }}
                                scroll={{ y: '60vh' }}
                                pagination={false}></Table>
                        </Card>
                    </div>
                    <div style={{ float: 'right', width: '69.8%' }}>
                        <Card>
                            <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')} style={{ width: '13vh' }} />
                                    <TimePicker value={this.state.startTime ? moment(this.state.startTime, hourFormat) : ''} format='HH:mm' placeholder='时间'
                                        onChange={this.changeHoutTime.bind(this, 'startTime')} style={{ width: '8vh' }} />
                                </Col>
                                <Col span={11}>
                                    治疗结束时间：<DatePicker value={this.state.endDate ? moment(this.state.endDate, dayFormat) : ''} placeholder='请选择结束时间'
                                        onChange={this.changeDateTime.bind(this, 'endDate')} style={{ width: '13vh' }} />
                                    <TimePicker value={this.state.endTime ? moment(this.state.endTime, hourFormat) : ''} format='HH:mm' placeholder='时间'
                                        onChange={this.changeHoutTime.bind(this, 'endTime')} style={{ width: '8vh' }} />
                                </Col>
                            </Row>
                            <Row style={{ marginTop: 5 }}>
                                <Col span={10}>
                                    治疗用时：<Input placeholder='请输入治疗用时' style={{ width: '70%' }} disabled={true}
                                        value={this.state.timeTotal || '--'} />
                                </Col>
                                <Col span={10}>
                                    治疗医生：<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>

                        </Card>
                    </div>
                </div>
            </Modal>
        </div>
    }
}

export default ShowHistoryListModal;