/**
 *健康管理记录--诊疗记录

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

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

class MedicalRecordsTabPane extends React.Component {
    constructor(props) {
        super(props)
        var patID = JSON.parse(sessionStorage.getItem('patID'))
        this.state = {
            data: [],
            activeKey: '1',
            eventList:[],
            eventDetail:[], //表格数据
            eventDetailTop:{},
            patID: patID,
            startDate: '',
            endDate:'',
            // eventCode: '',
            showEventCode:'01',
            defaultValue: '',
            healthDataList1:[],
            healthDataList2:[],
            healthDataList3:[],
            healthDataList4:[],
        };
        // 医嘱
        this.columns = [
            {
                key: 1,
                title: '序号',
                dataIndex: 'seqNo',
                align: "center",
                width: '20%'
            },
            {
                key: 2,
                title: '医嘱内容',
                dataIndex: 'medItemDesc',
                align: "center",
                width: '60%'
            },
            {
                key: 3,
                title: '开始日期',
                dataIndex: 'orderDate',
                align: "center",
                width: '20%'
            },
            {
                key: 4,
                title: '结束日期',
                dataIndex: 'stopDate',
                align: "center",
                width: '20%'
            }
        ];
        // 检查
        this.columnsTable = [
            {
                key: 1,
                title: '序号',
                dataIndex: 'stkAdjNO',
                align: "center",
                width: '20%'
            },
            {
                key: 2,
                title: '项目名称',
                dataIndex: 'locDesc',
                align: "center",
                width: '50%'
            },
            {
                key: 3,
                title: '检验日期',
                dataIndex: 'createDate',
                align: "center",
                width: '30%'
            },
            {
                title: '操作',
                key: 4,
                fixed: 'right',
                align: "center",
                width: '100px',
                render: (text, record) => (
                    <span></span>
                ),
            }
        ];
        // 检查
        this.columnsRightTable = [
            {
                key: 1,
                title: '序号',
                dataIndex: 'stkAdjNO',
                align: "center",
                width: '50%'
            },
            {
                key: 2,
                title: '病历模块',
                dataIndex: 'locDesc',
                align: "center",
                width: '50%',
                render: (text, record) => (
                    <a>text</a>
                ),
            }
        ]
    }

    componentDidMount() {
        // let leftList = document.querySelectorAll('.Medical  .ant-table-header');
        // if(leftList.length>0){
        //     leftList[0].style.height = (store.getState().tableHeight.y)/3-84 + 'px';
        // }
        // let listData = document.querySelectorAll('.check  .ant-table-header');
        // if(listData.length>0){
        //     listData[0].style.height = (store.getState().tableHeight.y)/3-84 + 'px';
        // }
        // let ContentsData = document.querySelectorAll('.Contents  .ant-table-header');
        // if(ContentsData.length>0){
        //     ContentsData[0].style.height = (store.getState().tableHeight.y)/3-84 + 'px';
        // }
        this.healthEventList()
    }
    ///诊疗记录左侧列表
    healthEventList=()=>{
        var params = {
            params: [{
                patID:this.state.patID,   //病人ID
                startDate:this.state.startDate ? moment(this.state.startDate).format('YYYY-MM-DD'):'',
                endDate:this.state.endDate ? moment(this.state.endDate).format('YYYY-MM-DD'):'',
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070067",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        eventList: res.result.data,
                        showEventCode:res.result.data.length>0 ? res.result.data[0].eventCode : '01'
                    },(e)=>{
                        if(res.result.data.length>0){
                            this.healthEventDetail(e,res.result.data[0]);
                        }
                    })
                }
            }
        });
    };
    ///根据就诊ID获取详情
    healthEventDetail=(e,vul)=>{
        // e.stopPropagation();
        console.log(vul)
        this.setState({showEventCode: vul.eventCode})
        var params = {
            params: [{
                admID:vul.eventValue   //诊疗记录ID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070063",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        eventDetail: res.result.data,
                        eventDetailTop: res.result
                    })
                }
            }
        });
    };
    timeDate=(v)=>{
        this.setState({startDate:v[0],endDate: v[1]})
    };



    gitExaminationList=(vul)=>{
        this.setState({showEventCode: vul.eventCode})
        var params = {
            params: [{
                healthRecordID:vul.eventValue   //诊疗记录ID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070092",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        healthDataList1: res.result.CMGuidance,
                        healthDataList2: res.result.healthAssessment,
                        healthDataList3: res.result.healthGuidance,
                        healthDataList4: res.result.riskFactor,
                    },()=>{
                        if(res.result.CMGuidance.length>0){
                            for(var i=0; i<res.result.CMGuidance.length; i++){
                                let dataVal = document.getElementById('desc'+i);
                                dataVal.innerHTML = res.result.CMGuidance[i].desc
                            }
                        }
                    })
                }
            }
        });
    };
    changeActiveKey(e) {
        this.setState({
            activeKey: e,
            code: undefined
        })
    };

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



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

    loadRightData(val) {
        this.setState({showEventCode: val.eventCode})
        var params = {
            params: [{
                visitRecordID: this.state.defaultValue,
            }]
        }
        $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() {
        let {eventDetail, eventDetailTop, showEventCode}=this.state;
        return <div className='MedicalRecordsTabPane'>
            <Row>
                <div style={{height: store.getState().tableHeight.y+79 + 'px'}} className='medicalLeft'>
                    <Card
                        size="small"
                        title={<div className="card-title-left-icon"><div></div>健康管理记录</div>}
                    >
                        <div>
                            <Col span={19}>
                                时间 <span><RangePicker style={{width: '80%'}} onChange={this.timeDate} /></span>
                            </Col>
                            <Col span={4}>
                                <Button onClick={()=>this.healthEventList()}>查询</Button>
                            </Col>
                        </div>
                        <div style={{marginTop: '55px', height: '600px', overflow: 'auto'}}>
                            <Col>
                                <Timeline>
                                    {this.state.eventList.length>0&&this.state.eventList.map((item,key)=> {
                                        return <Timeline.Item key={key} className={item.eventValue == this.state.defaultValue ? 'active' : '' } onClick={(e)=>{
                                            this.setState({defaultValue: item.eventValue},()=>{
                                                if(item.eventCode == '01'){
                                                    this.healthEventDetail(e,item)
                                                }else if(item.eventCode == '02'){
                                                    this.gitExaminationList(item)
                                                }else if(item.eventCode == '03'){
                                                    this.loadRightData(item);
                                                }

                                            })
                                            }}>
                                            {/*className={()=>{this.classNameData(item)}}*/}
                                            <div  style={{cursor: 'pointer'}}><p>{item.dateTime}</p>
                                                <p>{item.eventDesc}</p></div>
                                        </Timeline.Item>
                                    })}
                                </Timeline>
                            </Col>
                        </div>
                    </Card>
                </div>
                {showEventCode == '01' &&
                <div style={{height: store.getState().tableHeight.y+79 + 'px'}} className='medicalRight'>
                    <Row className='row'>
                        <span className='Cause'>就诊： </span><span>{eventDetailTop.admDate} / {eventDetailTop.hospDesc} / {eventDetailTop.locDesc} / {eventDetailTop.docName}</span>
                    </Row>
                    <Row className='row'>
                        <span className='Cause'>诊断： </span><span>{eventDetailTop.diagnosisDesc}</span>
                    </Row>
                    <Row>
                        <span style={{ margin: '10px 0',display: 'inline-block'}}>医嘱</span>
                        <div style={{height: (store.getState().tableHeight.y)/2-84 + 'px'}}>
                            <Table
                                columns={this.columns}
                                dataSource={eventDetail.length>0 ? eventDetail : []}
                                pagination={false}
                                bordered
                                scroll={{x: 600,y: (store.getState().tableHeight.y)/3 + 'px'}}
                                rowKey={record => record.key}
                                className='Medical'
                            />
                        </div>
                    </Row>
                    <Row>
                        <span  style={{ margin: '10px 0',display: 'inline-block'}}>检查/检验/心电</span>
                        <div style={{height: (store.getState().tableHeight.y)/2-84 + 'px'}}>
                            <Table
                                columns={this.columnsTable}
                                dataSource={this.state.data}
                                pagination={false}
                                bordered
                                scroll={{x: 600, y: (store.getState().tableHeight.y)/3 + 'px'}}
                                rowKey={record => record.key}
                                className='check'
                            />
                        </div>
                    </Row>
                </div>
                }
                {showEventCode == '02' &&
                        <div style={{height: store.getState().tableHeight.y+79 + 'px'}} className='medicalRightC'>
                            {this.state.healthDataList2.length>0 &&
                                <div>
                                    <p style={{fontSize: '17px',fontwight: '700'}}>健康评价：</p>
                                    <div style={{marginLeft: '50px'}}>
                                        {this.state.healthDataList2.map((item,k)=>{
                                            return <p key={k}>{item.desc}</p>
                                        })}
                                    </div>
                                </div>
                            }
                            {this.state.healthDataList3.length>0 &&
                            <div>
                                <p style={{fontSize: '17px',fontwight: '700'}}>健康指导：</p>
                                <div style={{marginLeft: '50px'}}>
                                    {this.state.healthDataList3.map((item,k)=>{
                                        return <p key={k}>{item.desc}</p>
                                    })}
                                </div>
                            </div>
                            }
                            {this.state.healthDataList1.length>0 &&
                            <div>
                                <p style={{fontSize: '17px',fontwight: '700'}}>中医指导：</p>
                                <div style={{marginLeft: '50px'}}>
                                    {this.state.healthDataList1.map((item,k)=>{
                                        return <div key={k} id={'desc'+k}></div>
                                    })}
                                </div>
                            </div>
                            }
                            {this.state.healthDataList4.length>0 &&
                            <div >
                                <p style={{fontSize: '17px',fontwight: '700'}}>危险因素控制：</p>
                                <div style={{marginLeft: '50px'}}>
                                    {this.state.healthDataList4.map((item,k)=>{
                                        return <p key={k}>{item.desc}</p>
                                    })}
                                </div>
                            </div>
                            }
                            {this.state.healthDataList1.length == 0 && this.state.healthDataList2.length == 0 && this.state.healthDataList3.length == 0 && this.state.healthDataList4.length == 0 &&
                                <div>
                                    暂无数据
                                </div>
                            }

                        </div>
                }
                {showEventCode == '03' &&
                <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)}>
                            <TabPane tab='高血压随访' key='1'>
                                <HypertensionPageTabPane
                                    disStatus={true}
                                    onRef={this.hypertRef}
                                    codeData={this.state.showEventCode}
                                    dataSource={this.state.dataSource}
                                    clearInput={this.clearInput.bind(this)} />
                            </TabPane>

                            <TabPane tab='糖尿病随访' key='2'>
                                <DiabetesPageTabPane
                                    disStatus={true}
                                    dataSource={this.state.dataSource}
                                    clearInput={this.clearInput.bind(this)} />
                            </TabPane>
                    </Tabs>
                </Col>
                }

            </Row>
            </div>
    }

}

export default MedicalRecordsTabPane;
