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';
import Registered from './Registered';

const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg';
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
class Login extends React.Component {
  state = {
    showBox: 'login', //展示当前表单
    url: '', //背景图片
    loading: false,
    loading2: false,
  };

  componentDidMount() {
    const isLogin = this.props.appStore;
    if (isLogin) {
      this.props.history.go(1); //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
      // this.props.appStore.toggleLogin(false) //也可以设置退出登录
    }
    // this.initPage()
    // preloadingImages(imgs)  //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
  }

  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>我们的数据平台专注于挖掘包括药物和配体结构、蛋白质结构和突变数据在内的 GPCR 数据、Kinase 数据，并整合了蛋白结构-配体作用数据，以及开发知识图谱和计算工具来加速药物发现。</div>
            <div> 我们的抗体平台专注于挖掘抗原表位序列和结构，抗体CDR序列，抗原和抗体相互作用的数据，并通过机器学习和计算机模拟理性设计发现高质量的抗体药物。</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 platform focuses on mining available GPCR knowledge and Kinase knowledge including corresponding drugs and ligands structure, protein structures and mutation data, involving
              protein-ligand interaction data, creating knowledge graph and developing computational tools to accelerate drug discovery.
            </div>
            <div>
              Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various
              computational tools to discover high quality antibody drugs.
            </div>
          </div>
          {loading ? (
            <div>
              <h3 style={styles.loadingTitle} className='animated bounceInLeft'>
                载入中...
              </h3>
              <Loading2 />
            </div>
          ) : (
            <div>
              <div id='backgroundBox' style={styles.backgroundBox} />
              <div className='container'>
                <LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
                <RegisterForm activeKey={'3'} className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
                <Registered className={showBox === 'Registered' ? 'box2 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;
