import React from 'react';

/**
 * @刘丹: 向上滚动
 */
class ScrollTop extends React.Component {
  constructor() {
    super();
    this.state = {
      isScroll: false,
      height: '',
      ref: React.createRef(),
    };
  }
  componentDidMount() {
    if (this.state.ref.current) {
      this.initHeight();
    }
  }
  componentDidUpdate(prev) {
    if (prev.text !== this.props.text && this.state.ref.current) {
      this.initHeight();
    }   
  }
  initHeight = () => {
    const scrolH = this.state.ref.current.parentNode.parentNode.offsetHeight;
    const curH = this.state.ref.current.offsetHeight;
    this.setState({
      height: (curH - scrolH  + 10) + 'px',
      isScroll: curH > scrolH,
    });
  };
  render() {
    return (
      <div className='marqueeTop-parent' style={{height: this.state.height}}>
        <div ref={ this.state.ref }  className={this.state.isScroll
        ? this.props.isFast ? 'marqueeTop fast' : 'marqueeTop'
        : ''}>
          {this.props.children}
        </div>
      </div>
     
    );
  }
}

export default ScrollTop;
