import React from 'react';
import { inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import Login from './Login';
import './index.less';

@withRouter
@inject('init')
export default class PageContent extends React.Component {
  state = { title: '登录Moria平台' }

  componentDidMount() {
    this.initPage(true);
  }

  componentWillReceiveProps() {
    this.initPage();
  }

  initPage = isFirst => {
    if (!isFirst) {
      const oldTitle = document.querySelector('.title');
      oldTitle.className = 'title to-up';
      const oldFormItemList = document.querySelectorAll('.ant-form-item');
      oldFormItemList.forEach((element, index) => {
        setTimeout(() => {
          element.style.opacity = '';
          element.className = `${element.className} to-up`;
        }, 50 * (index + 1));
      });
    }
    setTimeout(() => {
      this.showTitleAnimate();
      this.showFormAnimate();
    }, 600);
  }

  showTitleAnimate = () => {
    const title = document.querySelector('.title');
    title.className = title.className.replace('to-up', '');
    title.className = 'title to-bottom';
    setTimeout(() => {
      title.className = title.className.replace('to-bottom', 'normal');
    }, 20 + 50);
  }

  showFormAnimate = () => {
    const formItemList = document.querySelectorAll('.ant-form-item');
    formItemList.forEach((element, index) => {
      element.className = element.className.replace('to-up', '');
      element.className = `${element.className} to-bottom`;
      setTimeout(() => {
        element.className = element.className.replace('to-bottom', 'normal');
        element.style.opacity = 1;
      }, 20 + 50 * (index + 1));
    });
  }

  render() {
    return (
      <div className={`init-page-content ${this.state.style}`}>
        <div className="title">
          <span>{this.state.title}</span>
        </div>
        <Login />
      </div>
    );
  }
}

// const PageContent = props => {
//   const { pageType } = props;
//   return (
//     <div>
//       {pageType === 1 && <p>123</p>}
//       {pageType === 2 && <p>456</p>}
//       {pageType === 3 && <p>789</p>}
//     </div>);
// };

// export default PageContent;