import {lazy,Suspense} from 'react';
import axios from 'axios';
import './sass/auth.scss';
import favicon from './image/beauty.png'
import {LoadSpin} from './load.jsx';

const Dashboard = lazy(()=>import(/*webpackChunkName: "dashboard"*/'./sider.jsx'));

class AuthRouter extends Component{
	constructor(props){
		super(props);
		let notice = (
			<div className="no-login">
				<section>
					<img src={favicon} />
					<h3>
						还未登录，即将跳转到登录页面
					</h3>
				</section>
			</div>
		);

		let content = <Dashboard />;

		this.state = {
			login: false,
			notice,
			content,
			main: ''
		}


	}
	componentWillMount(){
		let token = localStorage.getItem('data_token');
		this.setState({
			token,
			login: false
		});
		axios.get(`${$conf.api.base}/${$conf.api.path.auth}`,{
			headers: {
				Authorization: `Bearer ${token}`
			}
		}).then(res=>{
			let login = res.data.login;
			this.setState({
				login,
			});
			if(!login){
				this.setState({
					main: this.state.notice
				});
				setTimeout(()=>{
					window.open('/login','_self')
				},1000);
			} else {
				this.setState({
					main: this.state.content
				});
			}
		}).catch(err=>{
			console.log(err);
			window.open('/login','_self')
		});
	}
	render(){		
		if(this.state.login){
			return (
				<Suspense fallback={<LoadSpin />}>
					{this.state.main}
				</Suspense>
			);
		}
		return <>{this.state.main}</>;
			
	}
	
}

export default AuthRouter;