/**
 * 公共组件弹框
 */
import React from 'react';
import { Modal, Table, Card, Tabs, Select, Input, Col } from 'antd';
import { Util, } from 'tools/index';
import { $http } from 'containers/config/https';
import store from 'store';
import '../style/index.less';

const TabPane = Tabs.TabPane;

class ShowComponentModal extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var patientData = JSON.parse(sessionStorage.getItem('patientData'));
        this.state = {
            userData: userData,
            patientData: patientData
        }
    }

    componentDidMount() {
        this.initData()
        this.loadData()
    }

    initData() {
        this.columns = [
            {
                title: '患者姓名',
                dataIndex: 'patName',
                width: 80,
                align: 'center',
            }, {
                title: '评估单名称',
                dataIndex: 'regValDesc',
                width: 100,
                align: 'center',
            }, {
                title: '就诊科室',
                dataIndex: 'locDesc',
                width: 100,
                align: 'center',
            }, {
                title: '就诊医生',
                dataIndex: 'docDesc',
                width: 80,
                align: 'center',
            }, {
                title: '就诊日期',
                dataIndex: 'admDate',
                width: 100,
                align: 'center',
            },
        ]
    }

    loadData() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                patID: this.state.patientData.patID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040043",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result,
                        admID: !Util.isEmpty(res.result) ? res.result[0].admID : '',
                        locID: !Util.isEmpty(res.result) ? res.result[0].locID : '',
                        regValFormID: !Util.isEmpty(res.result) ? res.result[0].regValFormID : '',
                    },()=>{
                        if(!Util.isEmpty(this.state.admID)){
                            this.loadConfigAssessmentSheet()
                        }
                    })
                }
            }
        });
    }

    loadConfigAssessmentSheet() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                locID: this.state.locID,
                admID: this.state.admID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040032",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        assmentSheetData: res.result,
                        activeKey: !Util.isEmpty(res.result) ? res.result[0].id : ''
                    })
                }
            }
        });
    }

    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    locID: record.locID,
                    admID: record.admID,
                    regValFormID: record.regValFormID,
                }, () => {
                    this.loadConfigAssessmentSheet()
                })
            }
        }
    }

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

    changeActiveKey(e) {
        this.setState({
            activeKey: e
        })
    }

    //渲染门诊挂号评估单数据
    loadSheetData() {
        var { assmentSheetData } = this.state;
        var assmentSheetOption = []
        var listData = []
        var selectData = []
        assmentSheetData && assmentSheetData.map((item, index) => {
            listData = item.field
            assmentSheetOption.push(<TabPane key={item.id} value={item.id} tab={item.title}>
                {/* <h4 style={{ marginLeft: 5, color: '#007AFF' }}>{item.title}</h4> */}
                {listData && listData.map((data, code) => {
                    if (data.fieldTypeCode == 'Select') {
                        selectData = data.fieldDataList
                    }
                    return <Col key={code} span={7} style={{ marginLeft: 10, display: 'flex', marginTop: 10 }}>
                        <div style={{ width: '39%', textAlign: 'right', marginTop: 5 }}>{data.descripts}：</div>
                        {
                            data.fieldTypeCode == 'Select' ?
                                <Select style={{ width: '60%' }} disabled value={data.value}>
                                    {
                                        selectData && selectData.map((source, ids) => {
                                            return <Option key={ids} value={source.descripts}>{source.descripts}</Option>
                                        })
                                    }
                                </Select> :
                                <Input style={{ width: '60%' }} disabled value={data.value} />
                        }
                    </Col>
                })}
                {/* <Button style={{ marginTop: 10 }} type='primary' onClick={this.handleSaveMeg.bind(this)}>保存</Button> */}
            </TabPane>)
        })
        return assmentSheetOption
    }


    render() {
        return <div className='hospital-component-modal' style={{ background: 'rgb(245, 247, 254)', height: '60vh' }}>
            <Card style={{ width: '40%', float: 'left', height: '60vh' }} title='患者评估单列表'>
                <Table columns={this.columns} bodyStyle={{ height: '50vh' }}
                    dataSource={this.state.dataSource}
                    loadData={this.loadData.bind(this)}
                    onRow={this.onClickRow} bordered
                    rowClassName={this.setRowClassName}
                    rowKey={(data) => {
                        return data.regValFormID
                    }}
                    scroll={{ y: '50vh' }}
                    pagination={false}>
                </Table>
            </Card>

            <Card style={{ width: '59.6%', float: 'right', height: '60vh' }} title='评估单详情'>
                <Tabs activeKey={this.state.activeKey} size='small' onChange={this.changeActiveKey.bind(this)}>{this.loadSheetData()}</Tabs>
            </Card>
        </div>
    }
}

export default ShowComponentModal;