import React, { Component } from 'react';
import styles from './index.less';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      style: {},
    };
  }
  componentWillMount = () => {};
  componentDidMount = () => {
    this.barrage();
  };

  componentWillUnmount = () => {
    this.setState({
      style: {},
    });
  };

  barrage = () => {
    const y = 0.9 + 7.8 * Math.random().toFixed(2);
    const animationDuration = Math.random().toFixed(2) * 2 + 4;
    const animationDelay = 10 * Math.random().toFixed(2);
    const _this = this;
    let style = {
      top: `${y}rem`,
      animationDuration: `${animationDuration}s`,
      animationDelay: `${animationDelay}s`,
      animationPlayState: 'running',
    };
    _this.setState({
      style,
    });
    const key = setTimeout(function() {
      clearTimeout(key);
      _this.setState({
        style: {
          animation: 'none',
        },
      });
      const key2 = setTimeout(function() {
        clearTimeout(key2);
        _this.barrage();
      }, 100);
    }, animationDuration * 1000 + animationDelay * 1000 + 100);
  };

  render() {
    const { x, style } = this.state;
    return (
      <div className={styles.p} style={style}>
        {this.props.title}
      </div>
    );
  }
}

export default Index;