/*
* 待处理异常
* */

import React, { Component } from 'react';
import {
    Input, Form, Select, Modal, Button, Progress, Upload, message, Icon, Table, Tooltip,
    Card, Row, Col, DatePicker, Popconfirm, Checkbox, Radio, Divider
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import RangeDatePicker from 'components/rangePicker/index';
import ShowCommonChartsModal from './ShowCommonChartsModal';
import ShowCommonInformationPage from './ShowCommonInformationPage';
import ShowDealExceptionModal from './ShowDealExceptionModal';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const Search = Input.Search;
const FormItem = Form.Item;
const { TextArea } = Input;

class ShowPeddingExceptionModal extends Component {

    constructor(props) {
        super(props);
        var date = new Date();
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            leftData: [],
            rightData: [],
            userData: userData,
            ids: [],
            statusCode: '3'
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            this.loadData()
        } else if (this.props.isShow === false) {
            this.cleanInput();
        }
    }

    componentDidMount() {
        this.initData()
    }

    initData() {
        this.leftColumns = [
            {
                title: '内容',
                dataIndex: 'title',
                width: 200,
                align: 'left',
                render: (text, data) => {
                    return <div>
                        <div>
                            <span style={{ fontSize: '16px', color: 'black' }}>{data.patName || '--'}</span><Divider type="vertical" />
                            <span style={{ color: '#666666' }}>{data.colDate}</span>
                        </div>
                        <div style={{ marginTop: 5 }}>
                            <div className='exception-text-ellipisis'><Tooltip title={data.detail}>{data.detail || '--'}</Tooltip></div>
                        </div>
                    </div>
                }
            }
        ],
            this.columns = [
                {
                    title: '测量时间',
                    dataIndex: 'collectDate',
                    width: 100,
                    align: 'left',
                    render: (text, data) => {
                        return <span>{data.collectDate + data.collectTime}</span>
                    }
                },
                {
                    title: '血压',
                    dataIndex: '1',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '2',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '3',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '4',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '5',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '6',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '7',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '8',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '血压',
                    dataIndex: '9',
                    width: 100,
                    align: 'left',
                }
            ]
    }

    loadData() {
        var params = {
            params: [
                {
                    docID: this.state.userData.userID,
                    hospID: this.state.userData.hospID
                }
            ]
        }
        $http.post('urlDeault', this, {
            code: "03070027",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result.detailString,
                        patID: res.result.detailString ? res.result.detailString[0].patID : '',
                        recordIndex: res.result.detailString ? res.result.detailString[0].patID : '',
                    }, () => {
                        this.loadExceptionList()
                        this.ChildPage.loadData()
                    })
                }
            }
        });
    }

    loadExceptionList() {
        var date = new Date()
        var params = {
            params: [
                {
                    patID: this.state.patID,
                    dateFrom: this.state.regDateFrom ? moment(this.state.regDateFrom).format(dayFormat) : moment(date).format(dayFormat),
                    dateTo: this.state.regDateTo ? moment(this.state.regDateTo).format(dayFormat) : moment(date).format(dayFormat),
                    statusCode: this.state.statusCode
                }
            ]
        }
        $http.post('urlDeault', this, {
            code: "03070024",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    // var table = res.result.list
                    // for()
                    this.setState({
                        exceptionData: res.result.list,
                        columns: res.result.table,
                        loadCharts: false
                    })
                }
            }
        });
    }

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

    //清空输入框
    cleanInput() {
        this.props.form.resetFields();
        this.setState({
            detailData: {},
            patID: undefined,
            loadCharts: false,
            ids: []
        })
    }

    startChange(date) {
        this.setState({
            regDateFrom: date,
            loadCharts: false
        })
    }

    endChange(date) {
        this.setState({
            regDateTo: date,
            loadCharts: false
        })
    }

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


    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    recordID: record.patID,
                    recordIndex: record.patID,
                    patID: record.patID,
                    loadCharts: false
                }, () => {
                    this.loadExceptionList()
                })
            },
        };
    }


    //提交
    onSubmit() {
        let { onSubmit } = this.props;
        onSubmit && onSubmit(this.state.data, this.state.newCode);
    }

    onSelectChange(ids) {
        this.setState({
            ids:ids,
            loadCharts: false
        })
    }

    loadDate(name) {
        if (name == 'week') {
            this.setState({
                regDateFrom: moment().week(moment().week()).startOf('week').format(dayFormat),
                regDateTo: moment(moment().week(moment().week()).endOf('week').valueOf()).format(dayFormat),
            }, () => {
                this.loadExceptionList()
            })
        } else if (name == 'month') {
            this.setState({
                regDateFrom: moment(moment().month(moment().month()).startOf('month').valueOf()).format(dayFormat),
                regDateTo: moment(moment().month(moment().month()).endOf('month').valueOf()).format(dayFormat),
            }, () => {
                this.loadExceptionList()
            })
        } else if (name == 'year') {
            this.setState({
                regDateFrom: moment(moment().year(moment().year()).startOf('year').valueOf()).format(dayFormat),
                regDateTo: moment(moment().year(moment().year()).endOf('year').valueOf()).format(dayFormat),
            }, () => {
                this.loadExceptionList()
            })
        }
    }

    onRef = (ref) => {
        this.ChildPage = ref
    }
    chartRef = (ref) => {
        this.Childcharts = ref
    }

    showDealExceptionModal() {
        this.setState({
            isShowDealExceptionModal: true
        })
    }

    hideModal(name) {
        this.setState({
            [name]: false
        })
    }

    //异常处理
    onSubmitException(id, note) {
        var params = {
            params: [{
                visitRecordIDs: this.state.ids,
                exceptionMethodID: id,
                exceptionNote: note,
                exceptionUserID: this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070080",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('处理成功')
                    this.hideModal('isShowDealExceptionModal')
                    this.loadExceptionList()
                    this.setState({
                        ids: [],
                        loadCharts: true
                    })
                }
            }
        });
    }

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

        const rowSelection = {
            ids,
            onChange: this.onSelectChange.bind(this),
            selectedRowKeys: ids,
        }

        return <div>
            {/**处理异常 */}
            <ShowDealExceptionModal isShow={this.state.isShowDealExceptionModal}
                onSubmit={this.onSubmitException.bind(this)}
                onHide={this.hideModal.bind(this, 'isShowDealExceptionModal')}>
            </ShowDealExceptionModal>
            <Modal className='show-information-modal'
                title={'生命体征监测异常处理'}
                maskClosable={false}
                visible={this.props.isShow}
                footer={null}
                onCancel={this.closeModal.bind(this)}
                onOk={this.onSubmit.bind(this)}>
                <Card style={{ width: '25%', float: 'left', height: '68vh', overflow: 'auto' }} className='left-card-table'>
                    <Table columns={this.leftColumns} style={{ background: 'white' }}
                        dataSource={this.state.dataSource}
                        onRow={this.onClickRow} bordered
                        rowClassName={this.setRowClassName}
                        showHeader={false}
                        rowKey={(data) => {
                            return data.vitalSignID
                        }}
                        scroll={{ y: '66vh' }}
                        pagination={false}></Table>
                </Card>
                <Card style={{ width: '74.8%', float: 'right', height: '68vh', overflow: 'auto', background: '#F0F2F5' }}>
                    <Card style={{ height: '10vh' }}>
                        {this.state.patID ? <ShowCommonInformationPage patID={this.state.patID}
                            onRef={this.onRef} /> : null}
                    </Card>
                    <Card style={{ marginTop: 5 }}>
                        {this.state.patID ? <ShowCommonChartsModal patID={this.state.patID} loadCharts={this.state.loadCharts}
                            onRef={this.chartRef} /> : null}
                    </Card>
                    <Card style={{ marginTop: 5, height: '25vh' }}>
                        <div style={{ padding: '5px 0', height: '45px', lineHeight: '20px', borderBottom: '1px solid #e8e8e8' }}>
                            <Row>
                                <Col span={5}>
                                    <Radio.Group defaultValue="a" size='small' style={{ marginTop: 5 }}>
                                        <Radio.Button value="a" onClick={this.loadExceptionList.bind(this)}>今日</Radio.Button>
                                        <Radio.Button value="b" onClick={this.loadDate.bind(this, 'week')}>本周</Radio.Button>
                                        <Radio.Button value="c" onClick={this.loadDate.bind(this, 'month')}>本月</Radio.Button>
                                        <Radio.Button value="d" onClick={this.loadDate.bind(this, 'year')}>全年</Radio.Button>
                                    </Radio.Group>
                                </Col>
                                <Col span={10}>
                                    <RangeDatePicker label={'指定日期：'} format='YYYY-MM-DD' width={'80%'}
                                        startDate={this.state.regDateFrom} endDate={this.state.regDateTo}
                                        startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                                </Col>

                                <Col span={4}>
                                    状态：<Select style={{ width: '70%' }} onChange={Util.handleSelectChange.bind(this, 'statusCode')}
                                        value={this.state.statusCode}>
                                        <Option key='3' value='3'>全部</Option>
                                        <Option key='2' value='2'>异常</Option>
                                        <Option key='1' value='1'>未处理异常</Option>
                                    </Select>
                                </Col>
                                <Col span={4} style={{ marginTop: 5, marginLeft: 5 }}>
                                    <Button size='small' onClick={this.loadExceptionList.bind(this)}>查询</Button>
                                    <Button style={{ marginLeft: 5 }} size='small' disabled={Util.isEmpty(this.state.ids)}
                                        onClick={this.showDealExceptionModal.bind(this)}>处理异常</Button>
                                </Col>
                            </Row>


                            <Table columns={this.state.columns} style={{ marginTop: 5 }}
                                dataSource={this.state.exceptionData} bordered
                                rowKey={(data) => {
                                    return data.vitalSignID
                                }}
                                scroll={{ y: '20vh' }}
                                rowSelection={rowSelection}
                                pagination={false}>
                            </Table>
                        </div>
                    </Card>
                </Card>
            </Modal></div>
    }
}

export default Form.create()(ShowPeddingExceptionModal);