import React, { useState, useEffect } from 'react';
import logo from "../img/openmmlab/logo.png";
import SliderLeft from './sliderLeft';
import SliderRight from './sliderRight';
import ProjectTabs from './projectTab';
import Teachers from './teachers';
import { projectList } from '../api';

import './index.scss';

function Openmmlab(props) {

    const [list, setList] = useState([]);

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [])

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

    return (
        <div className="glcc_openmmlab">

            <div className="first_selection">
                <div className="openmmlab_head">
                    <img className="openmmlab_logo" src={logo} alt=''></img>
                    <p className="openmmlab_des">深度学习时代最完整的计算机视觉开源算法体系</p>
                </div>

                <div className="openmmlab_slider openmmlab_main">
                    <div className="slider_left">
                        <SliderLeft />
                    </div>
                    <div className="slider_right">
                        <SliderRight list={list} {...props}/>
                    </div>
                </div>
            </div>

            <div className="openmmlab_title">项目精选</div>
            <ProjectTabs {...props} list={list} />

            <div className="teachers">
                <div className="teachers_tit">
                    导师一览
                </div>
                <Teachers />
            </div>
        </div>
    )
}
export default Openmmlab;