import React, { useEffect, useState, Fragment } from 'react';
import { Tabs } from 'antd';
import ProjectDetail from './projectDetail';

import './index.scss';
const $ = window.$;
const { TabPane } = Tabs;


function ProjectTabs({ list, applyTaskId, history, current_user, showLoginDialog, isStudentApplyDate, secondStudentApplyDate, applyTask }) {

    useEffect(()=>{
        setTimeout(()=>{
            $('.glcc_openmmlab .ant-tabs-tab').hover((e)=>{
                e.currentTarget.click();
            },(e)=>{
            });
        },1000)
        
    },[])

    return (
        <Tabs
            tabPosition={'left'}
            defaultActiveKey={'0'}
            className="openmmlab_tab"
        >
            {
                list.map((item, i) => {
                    return <TabPane
                        tab={<div className="tab_tit">
                            <div className="tab_tit_content">{item.projectName && item.projectName.split('-')[1]}</div>
                            <div className="tab_type">{item.projectType}</div></div>}
                        key={i + ''} >
                        <div className="tab_content">
                            <div className="openmmlab_tab_content">
                                <ProjectDetail detail={item} applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} secondStudentApplyDate={secondStudentApplyDate} applyTask={applyTask}/>
                            </div>
                        </div>

                    </TabPane>
                })
            }
        </Tabs>
    )
}
export default ProjectTabs;

