import React, { Component } from 'react';

import MainSuit from '@containers/MainSuit';
import CurrentIll from '@containers/CurrentIll';
import OtherHistory from '@containers/OtherHistory';
import CheckBody from '@containers/CheckBody';
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 {getWindowInnerHeight,getWindowInnerWidth,windowEventHandler} from '@utils/tools';

class EMRContainer extends Component {
    constructor(props){
        super(props);
        this.$cont = React.createRef();
        this.$div = React.createRef();
        this.setHighter = this.setHighter.bind(this);
    }
    componentDidMount(){
        // const {initHospital} = this.props;
        // initHospital()
        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:'460px',
                          zIndex:'15',
                          width:'14px',
                          background:'#f1f1f1'};
        const barStyle={background:'#777',width:'100%',marginLeft:'0'};
        return <div className={style['EMR-container']}
                    ref={this.$cont} id="addScrollEvent">
          <ScrollArea speed={1}
                      horizontal={false}
                      className={style["area"]}
                      verticalContainerStyle={contStyle}
                      verticalScrollbarStyle={barStyle}
                      contentClassName="content">
            <InfoTitle></InfoTitle>
            <div className={style['inner']} id="EmrContainer" ref={this.$div}>
                <MainSuit></MainSuit>
                <CurrentIll></CurrentIll>
                <OtherHistory></OtherHistory>
                <div>
                  <CheckBody setHighter={this.setHighter}></CheckBody>
                </div>
                <Inspect setHighter={this.setHighter}></Inspect>
                <AssistCheck setHighter={this.setHighter}></AssistCheck>
                <Diagnosis setHighter={this.setHighter}></Diagnosis>
                <AdviceContainer></AdviceContainer>
            </div>
            <OperationContainer></OperationContainer>
          </ScrollArea>
        </div>
    }
}
export default EMRContainer;