import React from "react";

import { Route, Switch, Link } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "src/Loading";
import '../index.scss';
import './index.scss';


const Register = Loadable({
  loader: () => import("./register"),
  loading: Loading,
});

const ReviewTasks = Loadable({
  loader: () => import("./reviewTasks"),
  loading: Loading,
})

const TaskDetail = Loadable({
  loader: () => import("./taskDetail"),
  loading: Loading,
})


const ExpertUser = (propsF) => {
  const functional = propsF.match.params.functional;
  return (
    <div className="centerbox detail">
      <div className="navigation">
        <span>专家评审系统</span>&nbsp;&gt;&nbsp;
        {functional === 'register' && <Link to="/expert/user/register">登记专家资料</Link>}
        {functional === 'tasks' && <Link to="/expert/user/tasks">我的评审任务</Link>}
      </div>
      <div className='center_flex'>
        <div className='register_left'>
          <Link to="/expert/user/register" className={`${functional === 'register' && 'active'}`}>登记专家资料</Link>
          {propsF.current_user.isExpert && <Link to="/expert/user/tasks" className={`${functional === 'tasks' && 'active'}`}>我的评审任务</Link>}
        </div>
        <Switch {...propsF}>
          {
          }
          <Route
            path="/expert/user/tasks/:containerType/:containerId"
            render={(props) => (
              <TaskDetail  {...propsF} {...props}/>
            )}
          ></Route>

          <Route
            path="/expert/user/tasks"
            render={(props) => (
              <ReviewTasks  {...propsF} {...props}/>
            )}
          ></Route>


          <Route
            path="/expert/user/register"
            render={(props) => (
              <Register {...propsF} {...props}/>
            )}
          ></Route>

          <Route
            path="/expert/user"
            render={(props) => (
              <Register  {...propsF} {...props}/>
            )}
          ></Route>

        </Switch>
      </div>
    </div>

  );
}

export default ExpertUser;
