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

// 课题列表
function TaskDetail(props) {
  const {match, location, isStudentApplyDate, secondStudentApplyDate, applyTaskId, applyTask} = 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);
      }
    })
  },[])

  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>
            {/* 报名详情按钮 */}
            {applyTaskId && Object.keys(applyTaskId).includes(taskId.toString()) && <Button onClick={()=>{window.location.href=`/glcc/student/apply/${taskId}`}} className='lookDetail detailBut'>报名详情</Button>}

            {/* 课题申请时间范围内： 申请课题 */}
            {/* 第一次报名 */}
            {isStudentApplyDate && !(applyTaskId && Object.keys(applyTaskId).includes(taskId.toString())) && <Button type='primary' className='applyBut detailBut' onClick={()=>{applyTask(taskId)}}>申请课题</Button>}
            {/* 第二次报名 锁定状态 */}
            {secondStudentApplyDate && !(applyTaskId && Object.keys(applyTaskId).includes(taskId.toString())) && (detail.locked ? <Tooltip title={"该课题已有学生入选"}><Button type='primary' className='mr10 detailBut' disabled>申请课题</Button></Tooltip> : <Button type='primary' className='applyBut mr10 detailBut' onClick={()=>{applyTask(taskId)}}>申请课题</Button>)}
          </div>
          <img src={bgPng} alt='' className='bgPng1'/>
          <img src={bgPng} alt='' className='bgPng2'/>
        </div>}
      </Spin>
    </div>
  )
}
export default TaskDetail;