newICSS/src/components/BlockEmrCont/index.jsx

import React, { Component } from 'react';
import Diagnosis from '@containers/Diagnosis';
import Inspect from '@containers/Inspect';
import AssistCheck from '@containers/AssistCheck';
import OperationContainer from '../../containers/OperationContainer'
import style from './index.less';
import AdviceContainer from '../../containers/AdviceContainer';
import InfoTitle from '@components/InfoTitle'
import ScrollArea from 'react-scrollbar';
import MainSuit from './MainSuit';
import CurrentIll from './CurrentIll';
import OtherHistory from './OtherHistory';
import CheckBody from './CheckBody';
import {getWindowInnerHeight,getWindowInnerWidth,windowEventHandler} from '@utils/tools';

class BlockEMRCont extends Component {
  constructor(props){
    super(props);
    this.$cont = React.createRef();
    this.$div = React.createRef();
    this.setHighter = this.setHighter.bind(this);
  }
  componentDidMount(){
    const height = getWindowInnerHeight() - 175;
    const width = getWindowInnerWidth() - 20;
    this.$cont.current.style.height = height+"px";
    this.$cont.current.style.minWidth = width + "px";
    windowEventHandler('resize', ()=>{
      const height = getWindowInnerHeight() - 175;
      const width = getWindowInnerWidth() - 20;
      if(this.$cont.current){
        this.$cont.current.style.height = height + "px";
        this.$cont.current.style.minWidth = width + "px";
      }
    });
  }

  setHighter(ht){
    // console.log(this.$div.current.scrollHeight);
    if(this.$div.current){
      this.$div.current.style.paddingBottom = ht+'px';
    }
  }
  render() {
    const contStyle={
      opacity:'0.4',
      top:'1px',
      right:'0px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%',marginLeft:'0'};
    return <div className={style['EMR-container']}
                ref={this.$cont} id="addBlockScrollEvent">
      <InfoTitle hideHistory={true}></InfoTitle>
      <ScrollArea speed={1}
                  horizontal={false}
                  className={style["area"]}
                  verticalContainerStyle={contStyle}
                  verticalScrollbarStyle={barStyle}
                  contentClassName="content">
        <div className={style['inner']} id="EmrBlockContainer" ref={this.$div}>
          <MainSuit></MainSuit>
          <CurrentIll></CurrentIll>
          <OtherHistory></OtherHistory>
          <CheckBody></CheckBody>
          <Inspect setHighter={this.setHighter}></Inspect>
          <AssistCheck setHighter={this.setHighter}></AssistCheck>
          <Diagnosis setHighter={this.setHighter} hideChronic={true}></Diagnosis>
          <AdviceContainer></AdviceContainer>
        </div>
      </ScrollArea>
      <OperationContainer hideLabel={true}></OperationContainer>
    </div>
  }
}
export default BlockEMRCont;