import React from 'react';
import BGParticle from '../../utils/BGParticle';
import { notification } from 'antd';
import './style.css';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import Loading2 from '../../components/Loading2';
import { preloadingImages } from '../../utils/utils';
import LogoTitlte from '../../components/LogoTitlte/index';
import 'animate.css';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';

const url = '';
const imgs = [
  // 'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
  // 'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
  // 'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
  // 'http://47.99.130.140/imgs/photo.jpg',
];

@withRouter //更新的作用
@inject('appStore') //接收
@observer //组件变为响应式
//这三步会把对应的store挂在props上
class Login extends React.Component {
  state = {
    showBox: 'login', //展示当前表单
    url: '', //背景图片
    loading: false,
    loading2: false,
  };

  componentDidMount() {
    this.props.appStore.toggleLogin(true, { username: 'username' });
    // 启动跳转到/Kinase
    const { from } = this.props.location.state || { from: { pathname: '/Kinase' } }
    // const { from } = this.props.location.state || { from: { pathname: '/login' } };
    this.props.history.push(from);
  }

  componentWillUnmount() {
    this.particle && this.particle.destory();
    notification.destroy();
  }
  //载入页面时的一些处理
  initPage = () => {
    this.setState({
      loading: true,
    });
    this.props.appStore.initUsers();
    this.loadImageAsync(url)
      .then((url) => {
        this.setState({
          loading: false,
          url,
        });
      })
      .then(() => {
        //为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
        this.particle = new BGParticle('backgroundBox');
        this.particle.init();
        // notification.open({
        //   message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
        //   duration:0,
        //   className:'login-notification'
        // })
      });
  };
  //切换showbox
  switchShowBox = (box) => {
    this.setState({
      showBox: box,
    });
  };

  //登录的背景图太大，等载入完后再显示，实际上是图片预加载，
  loadImageAsync(url) {
    return new Promise(function(resolve, reject) {
      const image = new Image();
      image.onload = function() {
        resolve(url);
      };
      image.onerror = function() {
        console.log('图片载入错误');
      };
      image.src = url;
    });
  }

  render() {
    const { showBox, loading } = this.state;
    return (
      <div className='index-div'>
        <LogoTitlte />
        <div id='login-page'>
          <div className='home-page-div'>
            <div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
            <div>我们的Kinase平台专注于挖掘包括药物和配体结构、蛋白质结构在内的Kinase数据，并开发计算工具来加速Kinase药物发现。</div>
            <div>
              {' '}
              Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal
              chemists to make intelligence drug discovery decisions.
            </div>
            <div>
              Our Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to
              accelerate Kinase drug discovery.
            </div>
          </div>
          {
            <div>
              <div id='backgroundBox' style={styles.backgroundBox} />
              <div className='container'>
                <LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
                <RegisterForm className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
              </div>
            </div>
          }
        </div>
      </div>
    );
  }
}

const styles = {
  backgroundBox: {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100vw',
    height: '100vh',
    // backgroundImage: `url(${url})`,
    backgroundSize: 'cover',
    transition: 'all .5s',
    // backgroundColor: '#4FA1D9'
  },
  focus: {
    // transform: 'scale(0.7)',
    width: '20px',
    opacity: 1,
  },
  loadingBox: {
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%,-50%)',
  },
  loadingTitle: {
    position: 'fixed',
    top: '50%',
    left: '50%',
    marginLeft: -45,
    marginTop: -18,
    color: '#000',
    fontWeight: 500,
    fontSize: 24,
  },
};

export default Login;
