import React, { useState } from 'react';
import { Button, message, Tooltip } from 'antd';
import Nodata from '../../../forge/Nodata';
import { useEffect } from 'react';
import { getProjectById } from '../../api';

export default ({ detail, projectId, applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd }) => {
  const [info, setInfo] = useState(detail);

  // 申请课题按钮点击函数
  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();
    }
  }

  useEffect(()=>{
    if(!detail && projectId){
      // 通过项目Id查询项目详情
      getProjectById(projectId).then(response=>{
        if(response && response.message === 'success'){
          setInfo(response.data)
        }
      })
    }
  },[detail])

  return (
    info ? <div className={`projectDetailBox ${detail ? '':'byTask'}`}>
      <div className="projectDetailHead">
        <span className='name'>{info.projectName}</span>
        {info.projectType && <span className='type'>{info.projectType}</span>}
        <p>GitLink项目地址:&nbsp;&nbsp;<a href={info.gitlinkUrl} className='linkUrl' target={"_blank"}>{info.gitlinkUrl}</a></p>
        <div>项目简介:&nbsp;&nbsp;{info.projectIntro}</div>
      </div>
      {info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map((item, index)=>{
        return <div className='taskItem mt20' key={index}>
          <div className="left">
            <div className="taskTitle" onClick={()=>{window.location.href=`/glcc/subjects/detail/${item.id}`}}><Tooltip title={item.taskName}>{item.taskName}</Tooltip></div>
            <div className='mt20 oneLine leftWidth'>导师姓名: &nbsp;&nbsp;{item.tutorName}</div>
            {item.tutorMail && <div className='mb20 email oneLine leftWidth'>邮箱地址: &nbsp;&nbsp;<span><Tooltip title={item.tutorMail}>{item.tutorMail}</Tooltip></span></div>}
          </div>
          <div className="center">
            <div className="taskDesc">{item.taskDesc}</div>
            {item.taskUrl && <div className="taskUrl oneLine">课题链接: &nbsp;&nbsp;<a href={item.taskUrl} target={"_blank"}>{item.taskUrl}</a></div>}
            <div>
              {(isStudentApplyDate || studentApplyEnd) && (applyTaskId && item.id && Object.keys(applyTaskId).includes(item.id.toString()) ? <Button onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}} className='lookDetail mr10'>报名详情</Button> : isStudentApplyDate && <Button type='primary' className='applyBut mr10' onClick={()=>{applyTask(item.id)}}>申请课题</Button>)}
              <Button onClick={()=>{window.open(`/glcc/subjects/detail/${item.id}`)}} className='lookDetail'>课题详情</Button>
            </div>
          </div>
          <div className="right oneLine taskUrl"><span className='taskReward'>￥{item.taskReward}</span></div>
        </div>
      }) : <Nodata _html="课题暂无数据" small={true}/>}
    </div>: <div className="projectDetailBox nodata"><Nodata _html="暂无数据" small={true}/></div>
  )
}