/**
 *健康管理记录--随访记录

 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Tabs,
    DatePicker, Button, Popconfirm, Icon, Divider, message, Modal,
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import RangeDatePicker from 'components/rangePicker/index';
import store from 'store';
import moment from 'moment';
import '../style/Secondary.less';
import HypertensionPageTabPane from './HypertensionPageTabPane';
import DiabetesPageTabPane from './DiabetesPageTabPane';

const { RangePicker } = DatePicker;
const TabPane = Tabs.TabPane;

class FollowUpRecords extends React.Component {
    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'))
        var patID = JSON.parse(sessionStorage.getItem('patID'))
        this.state = {
            data: [],
            activeKey: '1',
            followUpData: [], //随访数据
            patID: patID,
            userData: userData,
        };
        // 随访记录
        this.columns = [
            {
                key: 1,
                title: '计划日期',
                dataIndex: 'planDate',
                align: "center",
                width: '35%'
            },
            {
                key: 2,
                title: '随访日期',
                dataIndex: 'visitDate',
                align: "center",
                width: '35%'
            },
            {
                key: 3,
                title: '随访医生',
                dataIndex: 'docDesc',
                align: "center",
                width: '30%'
            }, {
                key: 4,
                title: '状态',
                dataIndex: 'visitStatusDesc',
                align: "center",
                width: '30%'
            }, {
                key: 5,
                title: '操作',
                dataIndex: 'opertion',
                align: "center",
                width: '30%',
                render: (text, data) => {
                    return <Popconfirm title="确定要删除吗?" onConfirm={this.handleDel.bind(this, data)} >
                        <span style={{ cursor: 'pointer', color: 'red' }}>删除</span></Popconfirm>
                }
            }
        ];
    }

    handleDel(data) {
        var params = {
            params: [{
                visitRecordID: data.ID,
                userID: this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070071",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('删除成功')
                    this.loadData()
                }
            }
        });
    }

    componentDidMount() {
        this.loadData()
    }

    loadData() {
        var params = {
            params: [{
                patID: this.state.patID,
                dateFrom: this.state.regDateFrom ? moment(this.state.regDateFrom).format(dayFormat) : '',
                dateTo: this.state.regDateFrom ? moment(this.state.regDateTo).format(dayFormat) : '',
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070058",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        followUpData: res.result.data
                    })
                }
            }
        });
    }

    changeActiveKey(e) {
        this.setState({
            activeKey: e,
            code: undefined
        })
    };

    hypertRef = (ref) => {
        this.onHypert = ref
    }

    handleSaveHypert() {
        this.onHypert.handleSaveHypert()
    }

    startChange(e) {
        this.setState({
            regDateFrom: e ? moment(e).format(dayFormat) : ''
        })
    }

    endChange(e) {
        this.setState({
            regDateTo: e ? moment(e).format(dayFormat) : ''
        })
    }

    clearInput() {
        this.setState({
            code: undefined,
            dataSource: {}
        })
    }

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                if (!Util.isEmpty(this.state.code) && this.state.code == record.ID) {
                    this.setState({
                        code: '',
                    });
                } else {
                    this.setState({
                        code: record.ID,
                        dataSource: '',
                    }, () => {
                        this.loadRightData()
                    });
                }

            }
        };
    }

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

    loadRightData() {
        var params = {
            params: [{
                visitRecordID: this.state.code,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070068",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    if (res.result.assessCatCode == 'a18') {
                        this.setState({
                            dataSource: res.result,
                            activeKey: '2'
                        })
                    } else {
                        this.setState({
                            dataSource: res.result,
                            activeKey: '1'
                        })
                    }
                }
            }
        });
    }

    render() {

        return <div className='FollowUpRecords' style={{ background: 'white' }}>
            <Row style={{ padding: '0 5px', borderTop: '1px solid #e8e8e8' }}>
                <Col style={{ width: '20%', float: 'left', height: store.getState().tableHeight.y + 75 + 'px', background: '#fff' }}>
                    <Col className='followUpTime'>
                        <RangeDatePicker label={'随访时间'} format='YYYY-MM-DD' width={'81%'}
                            startDate={this.state.regDateFrom} endDate={this.state.regDateTo}
                            startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                    </Col>
                    <div style={{ textAlign: 'right' }}><Button size='small' type='primary' onClick={this.loadData.bind(this)}>查询</Button></div>
                    <Col>
                        <Table
                            columns={this.columns}
                            dataSource={this.state.followUpData}
                            pagination={false}
                            onRow={this.onClickRow} bordered
                            rowClassName={this.setRowClassName}
                            scroll={{ x: '100%', y: store.getState().tableHeight.y + 'px' }}
                            rowKey={record => record.ID}
                            className='check'
                        />
                    </Col>
                </Col>
                <Col style={{
                    width: '78%', float: 'left', borderBottom: '1px solid #e8e8e8',
                    height: store.getState().tableHeight.y + 20 + 'px', marginLeft: '10px', overflow: 'auto'
                }}
                    className='followUpForm'>
                    <Tabs activeKey={!Util.isEmpty(this.props.titleData) && Util.isEmpty(this.props.titleData.hypertension) ? '2'
                        : this.state.activeKey} onChange={this.changeActiveKey.bind(this)}>
                        {!Util.isEmpty(this.props.titleData) && !Util.isEmpty(this.props.titleData.hypertension) ?
                            <TabPane tab='高血压随访' key='1'>
                                <HypertensionPageTabPane onRef={this.hypertRef} loadData={this.loadData.bind(this)}
                                    codeData={this.state.code}
                                    dataSource={this.state.dataSource}
                                    clearInput={this.clearInput.bind(this)} />
                            </TabPane> : null}
                        {!Util.isEmpty(this.props.titleData) && !Util.isEmpty(this.props.titleData.diabetes) ?
                            <TabPane tab='糖尿病随访' key='2'>
                                <DiabetesPageTabPane loadData={this.loadData.bind(this)}
                                    dataSource={this.state.dataSource}
                                    clearInput={this.clearInput.bind(this)} />
                            </TabPane> : null}
                    </Tabs>
                </Col>
            </Row>
            {/* <div style={{ textAlign: 'center', marginTop: 5 }}>
                <Button type='danger'>删除</Button>
                <Button style={{ marginLeft: 10 }}>新增随访</Button>
                <Button style={{ marginLeft: 10 }}>打印</Button>
                <Button type='primary' style={{ marginLeft: 10 }} onClick={this.handleSaveHypert.bind(this)}>保存</Button>
            </div> */}
        </div>
    }

}

export default FollowUpRecords;
