import React , { useEffect , useState } from 'react';
import Hot from '../img/index/hot.png';
import Slider from "react-slick";
import huawei from '../img/index/unit/huawei.png';
import langchao from '../img/index/unit/langchao.png';
import jijinhui from '../img/index/unit/jijinhui.png';
import mulan from '../img/index/unit/mulan.png';
import xigongye from '../img/index/unit/xigongye.png';
import feiteng from '../img/index/unit/feiteng.png';
import xiuos from '../img/index/unit/xiuos.png';
import huake from '../img/index/unit/huake.png';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';

const settings = {
  dots: false,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  vertical: true,
  verticalSwiping: true,
  autoplay:true,
  arrows:false
};
const group_size = 6;
function SubUnitBanner() {

  const [ list , setlist ] = useState(undefined);

  useEffect(()=>{
    getRecommandOrz();
  },[])

  function getRecommandOrz(params) {
    const url = `/organizations/recommend.json`;
    axios.get(url,{
      params:{
        group_size
      }
    }).then(result=>{
      if(result){
        setlist(result.data.organizations)
      }
    }).catch(error=>{})
  }
  return(
    list && list.length > 0 ?
      <div className="unitBanner">
        <div className="unitContent">
          <div className="unitTitle">
            <span>精选开源组织</span>
            <img src={Hot} alt="" width="47px"/>
          </div>
          <Slider {...settings} className="unitSlider">
            {
              list.map((i,k)=>{
                return(
                  <div className="slickline">
                    {
                      i.map((j,k1)=>{
                        return(
                          <Link to={j.name}><img src={getImageUrl(`/${j.avatar_url}`)} alt="" height="56px" style={{maxWidth:"180px"}}/></Link>
                        )
                      })
                    }
                  </div>
                )
              })
            }
            {/* <div className="slickline">
              <a href="https://www.nwpu.edu.cn/" target="_blank"><img src={xigongye} alt="" height="56px"/></a>
              <a href="https://www.phytium.com.cn/" target="_blank"><img src={feiteng} alt="" height="56px"/></a>
              <a href="http://xuos.io" target="_blank"><img src={xiuos} alt="" height="56px"/></a>
              <a href="https://www.hust.edu.cn/" target="_blank"><img src={huake} alt="" height="56px"/></a>
            </div> */}
          </Slider>
        </div>
      </div>
    :""
    
  )
}
export default SubUnitBanner;