import React, {useEffect, useState } from 'react';
import { Button, message, Spin} from 'antd';
import '../index.scss';
import './index.scss';
import { getTaskById } from '../../api';
import banner from "../../img/studentProject.png";
import bgPng from "../../img/bgPng.png";

// 课题列表
function TaskDetail(props) {
  const {match, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd, applyTaskId} = props
  const taskId = Number(match.params.taskId);
  const [detail, setDetail] = useState(undefined);

  useEffect(()=>{
    getTaskById(taskId).then(res=>{
      if(res && res.message === "success"){
        setDetail(res.data);
      }
    })
  },[])

  // 申请课题按钮点击函数
  function applyTask(id){
    // 判断用户是否已经登录
    if(current_user && current_user.login){
      // 判断用户是否已经报名两个课题
      if(applyTaskId && Object.keys(applyTaskId).length >= 2){
        message.error('最多只能同时报名两个课题');
      }else{
        // 跳转到学生报名页
        window.location.href=`/glcc/student/apply/${id}`;
      }
    }else{
      showLoginDialog();
    }
  }

  return (
    <div className="taskDetailBgBox">
      {/* <img className="glcc-banner" src={banner} alt=''></img> */}
      <Spin spinning={!detail}>
        {detail && <div className="bgBox">
          <div className="detailBox">
            <div className='goBackBox'>
              <a href='/glcc'>开源夏令营 / </a>
              <a href='/glcc/subjects'>课题及项目列表 / </a>
              课题详情
            </div>
          </div>
          <div className="detailContent">
            <div className="detailHead">
              <div className="title">{detail.taskName}</div>
              <div className='box'>
                {detail.projectType && <span className='classify'>{detail.projectType}</span>}
                {detail.taskUrl && <span>课题链接: <a href={detail.taskUrl} className='link'>{detail.taskUrl}</a></span>}
              </div>
            </div>
            <div className="detailCont">
              <div><span className='smallTil'>所属项目</span>{detail.projectName}</div>
              <div className='moneyBox'><span className='smallTil'>课题奖金</span><span className='money'>￥{detail.taskReward}</span></div>
              <div><span className='smallTil'>导师信息</span>{detail.tutorName}{detail.tutorMail &&`   |  ${detail.tutorMail}`}</div>
              <div className="bor"></div>
              <div><span className='smallTil'>课题简介</span></div>
              <div className='desc'>{detail.taskDesc}</div>
            </div>
            {(isStudentApplyDate || studentApplyEnd) && (applyTaskId && taskId && Object.keys(applyTaskId).includes(taskId.toString()) ? <Button onClick={()=>{window.location.href=`/glcc/student/apply/${taskId}`}} className='lookDetail detailBut'>报名详情</Button> : isStudentApplyDate && <Button type='primary' className='applyBut detailBut' onClick={()=>{applyTask(taskId)}}>申请课题</Button>)}
          </div>
          <img src={bgPng} alt='' className='bgPng1'/>
          <img src={bgPng} alt='' className='bgPng2'/>
        </div>}
      </Spin>
    </div>
  )
}
export default TaskDetail;