import React , { useEffect , useState } from 'react';
import { Input, Popover, Spin } from 'antd';
import { main_site_url } from '../../fetch';
import './index.scss';
import { projectList } from '../../api';
import ProjectDetail from '../component/projectDetail';
import bgPng from "../../img/bgPng.png";
import logo from "../../img/logo.png";
const {Search} = Input;

// 项目列表
function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd}) {
  // 输入搜索框
  const [keyword, setKeyword] = useState(undefined);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(()=>{
    setLoading(true);
    const params = {
      curPage: 1,
      keyword,
      pageSize: 10000
    }
    projectList(params).then(response=>{
      if(response && response.message === "success"){
        setData(response.data.rows);
      }
      setLoading(false);
    })
  },[keyword])

  return(
    <div className="taskList listBox">
      <div className="list">
        <div className='search'><Search placeholder='请输入项目名称进行搜索' allowClear enterButton onSearch={(value)=>{setKeyword(value)}}/></div>
        <Spin spinning={loading}>
          <div className='projectListBox'>
            {data && data.map((item, index)=>{
              return <Popover key={index} placement= {(index+1)%3 === 0 ? 'bottomRight' : (index+1)%3%2 === 0 ? 'bottom' : 'bottomLeft'} content={<ProjectDetail detail={item} applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd}/>} trigger='click' overlayClassName='projectItemPopover' autoAdjustOverflow={false}>
                <div className={`projectItem ${(index+1)%3 === 0 || (index+1)%3%2 === 0 ? '' : 'firstBox'}`}>
                  <div className="border"></div>
                  <div className="projectLogo"><img src={item.projectLogoId ? `${main_site_url}/api/attachments/${item.projectLogoId}` : logo} alt=''/></div>
                  <div className="title">{item.projectName}</div>
                  <div className="intro">{item.projectIntro}</div>
                </div>
              </Popover>
            })}
          </div>
        </Spin>
      </div>
      <img src={bgPng} alt='' className='bgPng3'/>
      <img src={bgPng} alt='' className='bgPng4'/>
    </div>
  )
}
export default ProjectList;