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

const MyLoadingComponent = ({ pastDelay, error, retry }) => {
    // 加载中
    if (pastDelay) {
        return (
            <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ display: 'inline-block', marginTop: '-80px' }}></div>
                <div style={{ marginLeft: '-30px' }}>页面加载中...</div>
            </div>);
    }
    // 加载出错
    else if (error) {
        console.log(error)
        return (
            <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div>
                    加载页面失败，点击
                <a onClick={retry}>重新加载</a>
                </div>
            </div>);
    }
    else {
        return null;
    }
};
const AsyncComponent = loadComponent => (
    Loadable({
        loader: loadComponent,
        loading: MyLoadingComponent
    })
);

export default AsyncComponent;