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 = '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></LogoTitlte>
        <div id='login-page'>
        <div className='home-page-div'>
        <div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</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 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
                    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
