// 病人信息Header抬头

import React from 'react';
import { Row, Col, Divider, Icon } from 'antd';
import { Util } from 'tools/index';

export default class TipHeader extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userInfo: {},
            addUSerInfo: '',
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        // 该方法内禁止访问this
        if (('userInfo' in nextProps && (JSON.stringify(nextProps.userInfo) !== JSON.stringify(prevState.userInfo)))) {
            // 通过对比nextProps和prevState，返回一个用于更新状态的对象
            return {
                userInfo: nextProps.userInfo
            }
        }
        // 不需要更新状态，返回null
        return null
    }

    componentDidMount() {
        if (this.props.userInfo) {
            this.setState({
                userInfo: this.props.userInfo
            })
        }
        if (this.props.addUSerInfo) {
            this.setState({
                addUSerInfo: this.props.addUSerInfo || ''
            })
        }
    }

    sexDr = (patSexCode) => {
        let config = {
            '1': 'boy',
            '2': 'girl',
        }
        return config[patSexCode] || 'unkonw';
    }

    sexDrSpan = (patSexCode) => {
        let config = {
            '1': 'boySpan',
            '2': 'girlSpan',
        }
        return config[patSexCode] || 'unkonwSpan';
    }

    render() {
        const { userInfo } = this.state
        let windowHost = window.location && window.location.origin ? window.location.origin : (window.location && window.location.protocol ? (window.location.protocol + '//' + window.location.hostname) : "");
        let patientUrl = !Util.isEmpty(userInfo) ? userInfo.patImage : ''
        let patientImg = patientUrl ? (patientUrl.indexOf("http") !== -1 ? patientUrl : windowHost + patientUrl) : '';
        return (
            <div style={{ background: '#1999db' }}>
                <Row className="TipHeader" >
                    {/* <i className={this.sexDr(userInfo.patSexCode)} style={{ marginRight: '8px' ,float:'left'}}></i> */}
                    {!Util.isEmpty(patientUrl) ? <img className='splice-patient-img' src={patientImg} style={{ width: '70px', height: '92px', marginRight: '8px', float: 'left' }} /> : <div className={`${this.sexDr(userInfo.patSexCode)} imgBox`}></div>}
                    <div className='imgTitle' >
                        <span style={{ display: !Util.isNull(userInfo) ? 'none' : 'inline', padding: ' 0 24px', color: "#333", }} > <i className='unknow'></i> ——</span>
                        <Col style={{ display: Util.isNull(userInfo) ? 'none' : 'inline' }}>
                            <span style={{ fontWeight: 'bold', fontSize: '16px' }}>{userInfo.patName}</span>
                            <Divider type="vertical" style={{ margin: '0 10px', display: userInfo.patName && userInfo.patName !== '' ? 'inline-block' : 'none' }} />
                            <span>{userInfo.patSexDesc}</span>
                            <Divider type="vertical" style={{ margin: '0 10px', display: userInfo.patSexDesc && userInfo.patSexDesc !== '' ? 'inline-block' : 'none' }} />
                            <span style={{}}>{userInfo.patAge}</span>
                            <Icon style={{ marginLeft: '10px', color: '#CDCDCD' }} type="user" />
                            <span style={{ marginLeft: '10px' }}>{userInfo.patNo}</span>
                            <Icon style={{ marginLeft: '10px', color: '#CDCDCD' }} type="code-sandbox" />
                            <span style={{ marginLeft: '10px' }}>{userInfo.patTypeDesc}</span>
                            <Icon style={{ marginLeft: '10px', color: '#CDCDCD' }} type="tag" theme="filled" />
                            <span style={{ marginLeft: '10px' }}>{userInfo.patSocialStatusDesc}</span>
                            <i style={{ marginLeft: '10px', color: '#CDCDCD', fontStyle: 'normal' }} type="pay-circle">￥</i>
                            <span style={{ color: 'rgb(77, 193, 130)', marginLeft: '10px' }}>{userInfo.totalBalance}</span>
                            <span style={{ marginLeft: '10px' }}>{userInfo.inHospitalNo}</span>
                        </Col>
                        {this.state.addUSerInfo}
                    </div>
                </Row>
            </div >
        )
    }
}