import React from 'react';
import { Spin } from 'antd';
import { Route, Switch } from "react-router-dom";
import banner from "../img/studentProject.png";
import './index.scss';
import Loadable from "react-loadable";
import Loading from "../../Loading";
import { Link } from 'react-router-dom';
import { useEffect } from 'react';

// 项目列表页面
const ProjectList = Loadable({
  loader: () => import("./projectList"),
  loading: Loading,
});
// 课题列表页面
const TaskList = Loadable({
  loader: () => import("./taskList"),
  loading: Loading,
});

function Project(propsF) {
  const {location, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd, applyTaskId, setStudentInfoReset} = propsF;
  const {pathname} = location;
  useEffect(()=>{
    window.scrollTo(0, 0);
  },[])

  return(
    <div className="glcc_project">
      <img className="glcc-banner" src={banner} alt=''></img>
      <div className='head'>
        <Link to="/glcc/subjects" className={!pathname.endsWith('projects') ? 'active' : ''}>课题列表</Link>
        <Link to="/glcc/projects" className={pathname.endsWith('projects') ? 'active' : ''}>项目列表</Link>
      </div>
      <div className='gobackBox'>
        <a href='/glcc'>开源夏令营 / </a>
        课题及项目列表
      </div>
      <Spin spinning={false}>
        <Switch {...propsF}>
          <Route
            path="/glcc/projects"
            render={(props) => (
              <ProjectList applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd}/>
            )}
          ></Route>
          <Route
            path="/glcc/subjects"
            render={(props) => (
              <TaskList applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd}/>
            )}
          ></Route>
          <Route
            path="/glcc/student"
            render={(props) => (
              <TaskList applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd}/>
            )}
          ></Route>
        </Switch>
      </Spin>
    </div>
  )
}
export default Project;