import React from 'react'
import Loadable from 'react-loadable';
import Spinner from 'react-spinkit';

const MyLoadingComponent = ({pastDelay, error,retry}) => {
  // 加载中
  if (pastDelay) {
    return (<div style={{height:'100%',width: '100%', display:'flex',alignItems:'center',justifyContent:'center',zIndex: '999', position: 'fixed', top: '0px', left: '130px'}}>
        <div style={{display:'inline-block',marginTop:'-80px'}}><Spinner name="line-spin-fade-loader" /></div> 
        <div style={{marginLeft:'-30px'}}>页面加载中...</div>
      </div>)
  }
  // 加载出错
  else if (error) {
    return (<div style={{height:'100%',width: '100%', display:'flex',alignItems:'center',justifyContent:'center',zIndex: '999',position: 'fixed', top: '0px', left: '130px'}}>
      <div>加载页面失败，点击<a onClick={ retry }>重新加载</a></div>
    </div>);
  }
  else {
    return null
  }
}
const AsyncComponent = loadComponent => (
  Loadable({
    loader: loadComponent,
    loading: MyLoadingComponent
  })
 ); 
export default AsyncComponent;