/*
 * Create:      柿子
 * CreateDate:  2023/12/27
 * Describe：   病人基本信息组件【患者信息】
 * */
import React, { Component } from 'react';
import { Tooltip } from 'antd';
import { Util } from 'tools';
import './style/index.less';

class PatientInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayColumnsObj: {}, // 展示列 - 区分 门诊[OutPatInfoDetail] 住院[InPatInfoDetail]
      patInfo: {},
      diagMaxWidth: 100
    };
    this.patientInfoRef = React.createRef();
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (JSON.stringify(nextProps.patInfo) !== JSON.stringify(prevState.patInfo)) {
      return {
        patInfo: nextProps.patInfo
      }
    }
    return null
  }

  componentDidMount() {
    this.props && this.props.onRef && this.props.onRef(this);
    this.getDisplayColumns();
    setTimeout(() => {
      this.getChildrenWidth();
    }, 300)
  };

  // 获取展示列
  getDisplayColumns = async () => {
    try {
      let res = await React.$asyncPost(this, '04020019');
      this.setState({ displayColumnsObj: res?.result || {} });
    } catch (error) {
      console.log(error);
    }
  };

  renderDisplayColumns = () => {
    const { patInfo, displayColumnsObj } = this.state;
    let columns = patInfo?.admTypeCode === 'I' ? (displayColumnsObj?.inPatInfoColumn || []) : (displayColumnsObj?.outPatInfoColumn || []);
    this.childrenRef = columns && columns.map((item) => item.dataIndex !== 'admDiag' ? React.createRef() : null);
    return columns;
  };

  // 获取适配宽度
  getChildrenWidth = () => {
    let width = 0;
    let patientInfoWidth = this.patientInfoRef?.current?.offsetWidth || 0;
    this.childrenRef.forEach(ref => {
      if (ref && ref.current) {
        width += (ref.current.offsetWidth + 18);  // 输出该div元素的宽度
      }
    });
    this.setState({ diagMaxWidth: patientInfoWidth > width + 168 ? patientInfoWidth - (width + 48) : 100 });
  };

  render() {
    const { patInfo, diagMaxWidth } = this.state;
    return (
      <div className="ns-patient-info flex-wrap" ref={this.patientInfoRef}>
        {this.renderDisplayColumns().map((item, index) => {
          let icon = Util.getValueByUrlStr(item?.linkMethod || '', 'iconName');
          return (
            <div key={index} className="flex-align-items" ref={this.childrenRef[index]}>
              <Tooltip title={item?.title || ''}>
                <i
                  style={{ fontSize: item?.code?.indexOf('patSex') > -1 ? '18px' : '', color: item?.code?.indexOf('patName') > -1 ? (patInfo?.patSexDesc === '男' ? '#0095FF' : (patInfo?.patSexDesc === '女' ? '#FF4800' : '')) : '' }}
                  className={'iconfont ' + (item?.code?.indexOf('patSex') > -1 ? (patInfo[item.code] === '男' ? 'icon-boys' : (patInfo[item.code] === '女' ? 'icon-girl' : 'icon-both-sex')) : (icon || 'icon-personnel'))}
                ></i>
              </Tooltip>
              {item?.dataIndex === 'admDiag' ? ( // 诊断
                <span
                  style={{ maxWidth: diagMaxWidth + 'px', display: 'inline-block' }}
                  className="ellipsis"
                >
                  <Tooltip placement="topLeft" title={patInfo[item.code]}>
                    {patInfo[item.code]}
                  </Tooltip>
                </span>
              ) : (
                <span>
                  {patInfo[item.code]}
                </span>
              )}
            </div>
          )
        })}
      </div >
    )
  }
};

export default PatientInfo;