import React from "react";
import ReactDOM from "react-dom";
import { createHashHistory } from "History";
import { IndexRedirect, Route, Router, useRouterHistory } from "react-router";
import { RouterStore, syncHistoryWithStore } from "mobx-react-router";
import { EXCLUDE_PAGE } from "./config";
import { Provider } from "mobx-react";
import Module from "weaHrmSalary";

const routing = new RouterStore();

const allStore = {
  routing,
  ...Module.store
};

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: "_key",
  basename: "/"
});

const history = syncHistoryWithStore(browserHistory, allStore.routing);

const Home = props => props.children;

class Root extends React.Component {
  componentWillMount() {
    const src = "/spa/hrmSalary/hrmSalaryCalculateDetail/css/iconfont/iconfont.css";
    const link = document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", src);
    let header = document.getElementById("container");
    header.appendChild(link);
    top.$(".ant-message").remove();
    if (_.every(EXCLUDE_PAGE, page => window.location.hash.indexOf(page) === -1)) {
      allStore.taxAgentStore.getPermission();
    } else {
      allStore.taxAgentStore.initPageAndOptAuth();
    }
    if (window.location.hash.indexOf("payroll") !== -1) {
      window.localStorage.removeItem("template-basedata");
      window.localStorage.removeItem("salary-showset");
    }
  }

  render() {
    return (
      <Provider {...allStore}>
        <Router history={history}>
          <Route name="root" breadcrumbName="根路由" path="/" component={Home}>
            <IndexRedirect to="main/hrmSalary/index"/>
            <Route name="main" breadcrumbName="入口" path="/main" component={Home}>
              {Module.Route}
            </Route>
          </Route>
        </Router>
      </Provider>
    );
  }
}

ReactDOM.render(<Root/>, document.getElementById("container"));