import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
// import { Switch, Route } from 'react-router-dom';
import { AuthorizedRoute } from '@/components';
import cx from 'classnames';
import routerData from '@/routerConfig';
import { Loading } from '@alifd/next';

const theme = 'dark';
@inject('userStore', 'UIStore')
@observer
class BlankLayout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            resAuthority: undefined,
        };
    }
    componentDidMount() {
        this.props.userStore.checkAuth().then((r) => this.setState({ resAuthority: r }));
    }

    /**
     * 渲染权限路由组件
     * @param {Object} item routerConfig中的子项
     * @param {Number} index 索引
     * @returns {*} Route节点
     */

    renderAuthorizedRoute = (item, index) => {
        return item.component ? (
            <AuthorizedRoute
                key={index}
                path={item.path}
                component={item.component}
                exact={item.exact}
                authority={this.props.userStore.token}
                redirectPath="/exception/403"
            />
        ) : null;
    };

    mainRoutes = (routerData) => {
        return (
            <React.Fragment>
                {/* 渲染权限路由表 */}
                {routerData.map(this.renderAuthorizedRoute)}
            </React.Fragment>
        );
    };

    render() {
        let routes = this.mainRoutes(routerData);
        let dom = null;
        const loading = this.props.UIStore.loading;
        if (this.state.resAuthority) {
            dom = routes;
        } else if (!this.state.resAuthority) {
            // dom = <Route component={NotAuthority} />;
            // dom = '';
            dom = routes;
        }
        return (
            <div style={{ minHeight: '100vh' }} className={cx(`basic-layout-${theme} ice-design-layout`)}>
                {dom}
                <Loading visible={!!loading} fullScreen />
            </div>
        );
    }
}

export default BlankLayout;