/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import * as serviceWorker from './serviceWorker';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import { createHashHistory } from 'history';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';

import { Layout } from 'antd';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// 公用结构组件
import Menu from './module/menu/menu';
import Header from './components/common/HeadView';
import Login from './module/login/login';

// oa路由映射
import OaRouteDom from './routeDom/oaRouteDom';
import UserRouteDom from './routeDom/userRouteDom';

export const Context = React.createContext();

const { Content } = Layout;
const history = createHashHistory();

class RouteDom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      context: {
        role: '',
        roleMenuList: [],
        setContext: this.setContext,
      },
    };
  }

  componentDidMount() {
    let pathname = history.location.pathname;
    let menusListByRole = window.localStorage.getItem('menusListByRole')
      ? JSON.parse(window.localStorage.getItem('menusListByRole'))
      : [];

    let role = Object.keys(menusListByRole)
      .reduce((p, n) => {
        if (
          menusListByRole[n].menus
            .reduce((p, n) => {
              if (n.children) {
                return p.concat(n.children);
              } else {
                return p.concat(n);
              }
            }, [])
            .find(({ path }) => path == pathname)
        ) {
          return p.concat(n);
        } else {
          return p;
        }
      }, [])
      .join('');
    console.log('role', role);

    this.setState({
      context: {
        ...this.state.context,
        role,
      },
    });
  }

  setContext = (data) => {
    console.log('data', data);
    this.setState({
      context: {
        ...this.state.context,
        ...data,
      }, //更新context
    });
  };

  render() {
    let { context } = this.state;
    return (
      <ConfigProvider locale={zh_CN}>
        <Context.Provider value={context}>
          <Router history={history}>
            <Layout className="h-100">
              {/* 顶部-侧边布局-通栏 */}
              {/* 顶部 */}
              <Switch>
                <Route path="/login" component={null} />
                <Route
                  component={() => (
                    <Header setContext={this.setContext} props={this.props} />
                  )}
                />
              </Switch>
              <Layout>
                <Switch>
                  <Route path="/login" component={null} />
                  <Route component={Menu} />
                </Switch>
                <Layout>
                  <Content>
                    <Route path="/login" component={()=>( <Login setContext={this.setContext}/>)} />
                    {context.role == 'oa' && <OaRouteDom />}
                    {context.role == 'user' && <UserRouteDom />}
                  </Content>
                </Layout>
              </Layout>
            </Layout>
          </Router>
        </Context.Provider>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<RouteDom></RouteDom>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();