import React , { useEffect , useState } 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 { getStudentApplyInfo } from '../api';

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

function Project(propsF) {
  const {location, current_user, showLoginDialog} = propsF;
  const {pathname} = location;
  const isStudentApplyDate = Date.parse(new Date()) > 1653494400000 && Date.parse(new Date()) < 1656086400000;
  const studentApplyEnd = Date.parse(new Date()) > 1656086400000;
  // const studentApplyEnd = false;
  // const isStudentApplyDate = true;

  // 用户已报名课题id数组
  const [applyTaskId, setApplyTaskId] = useState({});
  // 刷新用户课题报名信息
  const [studentInfoReset, setStudentInfoReset] = useState(undefined);

  useEffect(()=>{
    // 获取用户课题报名信息current_user user_id
    current_user && current_user.login && getStudentApplyInfo({userId: current_user.user_id}).then(response=>{
      if(response && response.message === "success"){
        // setData(response.data.rows);
        const data = {};
        response.data && response.data.registrationStudentTaskList.map(item=>{
          data[item.taskId] = item.id;
        })
        setApplyTaskId(data);
      }
    })
  },[studentInfoReset, current_user])
  return(
    <div className="glcc_project">
      <img className="glcc-banner" src={banner} alt=''></img>
      <div className='head'>
        <Link to="/glcc/student/2" className={!pathname.endsWith('/1') ? 'active' : ''}>课题列表</Link>
        <Link to="/glcc/student/1" className={pathname.endsWith('/1') ? 'active' : ''}>项目列表</Link>
      </div>
      <div className='gobackBox'>
        <a href='/glcc'>开源夏令营 / </a>
        课题及项目列表
      </div>
      <Spin spinning={false}>
        <Switch {...propsF}>
          <Route
            path="/glcc/student/1"
            render={(props) => (
              <ProjectList applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd}/>
            )}
          ></Route>
          <Route
            path="/glcc/student/2"
            render={(props) => (
              <TaskList applyTaskId={applyTaskId} studentInfoReset={studentInfoReset} 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;