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";
import star from "../../img/star.png";
const { Search } = Input;

// 项目列表
function ProjectList({ applyTaskId, isStudentApplyDate, location, match, secondStudentApplyDate, applyTask }) {
  let gitlinkLastUrl = match.params.gitlinkLastUrl && match.params.gitlinkLastUrl.replace(/\./g, '');
  let openmmlab = location.search && location.search.split('=')[1];
  // 输入搜索框
  const [keyword, setKeyword] = useState(openmmlab ? 'openmmlab' : 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") {
        let dataArr = response.data.rows;
        dataArr.forEach(i => {
          let urlArr = i.gitlinkUrl.split('/');
          i.gitlinkLastUrl = urlArr.pop() || urlArr.pop();
          i.gitlinkLastUrl = i.gitlinkLastUrl.replace(/\./g, '');
        });
        if (gitlinkLastUrl) {
          let thisProjectArr = dataArr.filter(item => { return item.gitlinkLastUrl == gitlinkLastUrl })
          setData(thisProjectArr);
          setTimeout(() => {
            let openProject = document.querySelector(`.${gitlinkLastUrl}`);
            if (openProject) {
              openProject.click();
              let height = document.documentElement.clientWidth / 1920 * 500 + 71 + 70 + openProject.offsetTop;
              if (thisProjectArr.length) {
                document.querySelector('#taskList').style.height = (468 + thisProjectArr[0].registrationTaskList.length * 330 + 'px');
              }
              window.scrollTo(0, height);
            }
          }, 100)
        } else {
          setData(response.data.rows);
        }
        openmmlab && setTimeout(() => {
          let openProject = document.querySelector(`.${openmmlab}`);
          if (openProject) {
            openProject.click();
            let height = document.documentElement.clientWidth / 1920 * 500 + 71 + 70 + 100 + openProject.offsetTop;
            window.scrollTo(0, height);
          }
        }, 100)
      }
      setLoading(false);
    })
  }, [keyword])

  function changeVisible(visible, item) {
    if (visible) {
      let height = document.documentElement.clientWidth / 1920 * 500 + 70 + document.querySelector(`.${item.gitlinkLastUrl}`).offsetTop + item.registrationTaskList.length * 320;
      document.querySelector('#taskList').style.height = height + 'px';
    } else {
      document.querySelector('#taskList').style.height = 'auto';
    }
  }

  return (
    <div id="taskList" className="taskList listBox">
      <div className="list">
        {!gitlinkLastUrl && <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
                onVisibleChange={(visible) => { changeVisible(visible, item) }}
                key={index}
                placement={(index + 1) % 3 === 0 ? 'bottomRight' : (index + 1) % 3 % 2 === 0 ? 'bottom' : 'bottomLeft'}
                content={<ProjectDetail detail={item} applyTaskId={applyTaskId} isStudentApplyDate={isStudentApplyDate} secondStudentApplyDate={secondStudentApplyDate} applyTask={applyTask}/>}
                trigger='click'
                overlayClassName='projectItemPopover'
                autoAdjustOverflow={false}
              >
                <div className={`projectItem ${(index + 1) % 3 === 0 || (index + 1) % 3 % 2 === 0 ? '' : 'firstBox'} ${item.projectName.replace(/ /g, '')} ${item.gitlinkLastUrl.replace(/\./g, '')}`}>
                  <div className="border"></div>
                  {!gitlinkLastUrl && !openmmlab && item.recommendFlag ? <img className="projectLogoStar" src={star} alt=''/> : ''}
                  <div className="projectLogo">
                    <img className="projectLogoImg" 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;