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 () {


    this.props.appStore.toggleLogin(true, { username: 'username' })
    const { from } = this.props.location.state || { from: { pathname: '/home' } }
    this.props.history.push(from)

    var baseURL = 'http://52.83.169.190:8005'
    var baseURL = 'http://52.83.169.190:8005'


  }

  componentWillUnmount () {
    var baseURL = 'http://52.83.169.190:8005'
    var baseURL = 'http://52.83.169.190:8005'
    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> 我们的数据平台专注于挖掘包括药物和配体结构、蛋白质结构和突变数据在内的 GPCR 数据、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 intelligent 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, creating knowledge graph and developing computational tools to accelerate drug discovery.</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
