//事件登记
import React, { Component } from 'react';
import { Table, Row, Col, Button, Select, DatePicker, TimePicker, Popconfirm, message } from 'antd';
import moment from 'moment';
import PatientInfo from '../Patient/PatientInfo';
import { $http } from '../../../containers/config/https';
import './CSS/VitalSigns.less';
import store from 'store';
const { Option } = Select

export default class EventDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            eventData: [],
            tableData: [],
            patEventID: '',
            patEventStatusID: '',
            patEventStartDate: moment().format('YYYY-MM-DD'),
            patEventStartTime: moment().format('HH:mm:ss'),
            admID: '',
            rowClassName: '',
            saveFlag: false,
            patEventSource: false
        }
        this.columns = [
            {
                key: 1,
                title: '日期',
                dataIndex: 'patEventStartDate',
                align: "center",
                width: '20%'
            }, {
                key: 2,
                title: '时间',
                dataIndex: 'patEventStartTime',
                align: "center",
                width: '20%'
            }, {
                key: 3,
                title: '类型',
                dataIndex: 'patEventDesc',
                align: "center",
                width: '20%'
            }, {
                key: 4,
                title: '用户',
                dataIndex: 'user',
                align: "center",
                width: '20%'
            }, {
                key: 5,
                title: '操作',
                dataIndex: 'operation',
                align: "center",
                width: '20%',
                render: (text, record) => (
                    <span>
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={(e) => this.handleDelete(record, e)} onClick={this.handlePopconfirm} onCancel={this.handlePopconfirm}>
                            <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                        </Popconfirm>
                    </span>
                )
            }
        ];
    }
    componentDidMount() {
        let leftList = document.querySelectorAll('.vitalHeight  .ant-table-body');
        if (leftList.length > 0) {
            leftList[0].style.height = store.getState().tableHeight.y + 75 + 'px';
        }
        // 加载下拉事件
        this.getEnentData();
    }
    // 切换患者时重新加载数据
    componentWillReceiveProps(nextprops) {
        if (nextprops.admID !== this.state.admID) {
            this.setState({
                admID: nextprops.admID,
                patEventSource: false
            }, () => {
                this.getTableData();
            })

        }
    }
    // 点击删除时阻止事件冒泡
    handlePopconfirm = (e) => {
        e.stopPropagation();
    }
    // 选中行效果
    setRowClassName = (record) => {
        return record.patEventID === this.state.patEventID ? 'clickRowStyle' : '';
    }

    // 获取下拉事件
    getEnentData = () => {
        let data = {
            "params": []
        };

        $http.post('urlDeault', this, {
            code: "04040010",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        eventData: res.data,
                    });
                }
            },
            error: function (error) {
                message.error('失败：' + error);
            }
        });
    }
    // 获取患者事件数据
    getTableData = () => {
        let data = {
            "params": [{
                admID: this.state.admID
            }]
        };

        $http.post('urlDeault', this, {
            code: "04040015",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        tableData: res.result.Data,
                    });
                }
            },
            error: function (error) {
                message.error('失败：' + error);
            }
        });
    }
    // 保存
    handelSave = () => {
        this.setState({
            saveFlag: true
        });
        let { patEventID, patEventStatusID, patEventStartDate, patEventStartTime } = this.state;
        let data = {
            "params": [{
                admID: this.props.admID,
                patEventID,
                patEventStatusID,
                patEventStartDate,
                patEventStartTime,
                patEventType: '1',
                patEventSource: '0'
            }]
        }; 
        if (data.params[0].admID === '') {
            message.error('请选择患者');
            return;
        };
        if (data.params[0].patEventStatusID === '') {
            message.error('请选择事件');
            return;
        }

        $http.post('urlDeault', this, {
            code: "04040013",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success('保存成功');
                    this.getTableData();
                    this.resetForm();
                }
                this.setState({
                    saveFlag: true
                })
            },
            error: function (error) {
                message.error('保存失败：' + error);
                this.setState({
                    saveFlag: true
                })
            }
        });
    }
    // 删除事件
    handleDelete = (record, e) => {
        e.preventDefault();
        let data = {
            "params": [{
                patEventID: record.patEventID
            }]
        };

        $http.post('urlDeault', this, {
            code: "04040014",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.getTableData();
                    this.resetForm();
                }
            },
            error: function (error) {
                message.error('删除失败：' + error);
            }
        });
    }
    // 清空表单
    resetForm = () => {
        this.setState({
            patEventID: '',
            // patEventStartDate: moment().format('YYYY-MM-DD'),
            // patEventStartTime: moment().format('HH:mm:ss'),
            patEventStatusID: ''
        })
    }
    render() {
        const tableHeight = store.getState().tableHeight.y;
        return (
            <div>
                <Row style={{ width: '100%', height: '36px', textAlign: 'left', lineHeight: '36px', borderBottom: '1px solid #cccccc' }}>
                    <PatientInfo admID={this.props.admID} />
                </Row>
                {/* <Divider style={{height:'2px', marginTop:'0', marginBottom:'5px'}} dashed /> */}
                <br/>
                <div style={{ padding:'0 24px',marginTop:'10px'}}>
                    <div>
                        <Row style={{ height: '52px', lineHeight: '52px',padding:'0px 18px',background:'#F5F4F4',border:'1px solid rgba(225,225,225)'}}>
                            开始日期：<DatePicker
                                style={{ width: '150px', margin: '0px 15px 0 0' }}
                                value={this.state.patEventStartDate ? moment(this.state.patEventStartDate, 'YYYY-MM-DD') : null}
                                onChange={(date, dataString) => {
                                    this.setState({
                                        patEventStartDate: dataString
                                    })
                                }}
                            />
                            开始时间：<TimePicker
                                style={{ width: '150px', margin: '0px 15px 0 0' }}
                                value={this.state.patEventStartTime ? moment(this.state.patEventStartTime, 'HH:mm:ss') : null}
                                onChange={(time, timeString) => {
                                    this.setState({
                                        patEventStartTime: timeString
                                    })
                                }}
                            />

                            事件：<Select
                                style={{ width: '150px', margin: '0px 15px 0 0' }}
                                value={this.state.patEventStatusID}
                                showSearch
                                optionFilterProp="title"
                                placeholder="请选择事件"
                                onChange={(value, Option) => {
                                    this.setState({
                                        patEventStatusID: value
                                    })
                                }}
                                disabled={this.state.patEventSource}
                                allowClear
                            >
                                {this.state.eventData.map(item => {
                                    return <Option value={item.id} key={item.id} title={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                })}
                            </Select>

                            <Button type="primary" style={{ margin: '0px 15px 0 0' }} onClick={this.handelSave} >保存</Button>
                        </Row>
                        <Table
                            scroll={{ x: 1000, y: store.getState().tableHeight.y + 85 }}
                            style={{ height: (store.getState().tableHeight.y + 10) }}
                            className='vitalHeight'
                            bordered
                            columns={this.columns}
                            dataSource={this.state.tableData}
                            rowClassName={this.setRowClassName}
                            pagination={false}
                            rowKey={(row) => {
                                return row.patEventID;
                            }}
                            onRow={(record) => {
                                return {
                                    onClick: (event) => {
                                        if (this.state.patEventID === '') {
                                            // 保存行数据以及ID
                                            this.setState({
                                                patEventID: record.patEventID,
                                                patEventStartDate: record.patEventStartDate,
                                                patEventStartTime: record.patEventStartTime,
                                                patEventStatusID: record.patEventStatusID,
                                            }, () => {
                                                if (record.patEventSource === '1') {
                                                    this.setState({
                                                        patEventSource: true
                                                    })
                                                } else {
                                                    this.setState({
                                                        patEventSource: false
                                                    })
                                                }
                                            })
                                        } else {
                                            if (this.state.patEventID !== record.patEventID) {
                                                this.setState({
                                                    patEventID: record.patEventID,
                                                    patEventStartDate: record.patEventStartDate,
                                                    patEventStartTime: record.patEventStartTime,
                                                    patEventStatusID: record.patEventStatusID
                                                }, () => {
                                                    if (record.patEventSource === '1') {
                                                        this.setState({
                                                            patEventSource: true
                                                        })
                                                    } else {
                                                        this.setState({
                                                            patEventSource: false
                                                        })
                                                    }
                                                })
                                            } else {
                                                this.resetForm()
                                            }
                                        }
                                    },
                                };
                            }}
                        >
                        </Table>
                    </div>
                </div>

            </div>
        )
    }
}