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;
const list =[
  [
    {url:"/Huawei_Technology",avatar_url:huawei,name:"华为技术有限公司"},
    {url:"/openatom_foundation",avatar_url:jijinhui,name:"开放原子开源基金会"},
    {url:"/Inspur",avatar_url:langchao,name:"浪潮信息"},
    {url:"/mulan-community",avatar_url:mulan,name:"木兰开源社区"},
  ],
  [
    {url:"/CrowdOS_WeSense",avatar_url:xigongye,name:"西北工业大学"},
    {url:"/pkecosystem",avatar_url:feiteng,name:"PK开源生态项目组"},
    {url:"/xuos",avatar_url:xiuos,name:"泛在操作系统实验室"},
    {url:"/hustos",avatar_url:huake,name:"华中科技大学操作系统团队"},
  ]
]
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.url}><img src={j.avatar_url} title={j.name} alt={j.name} height="56px" style={{maxWidth:"180px"}}/></Link>
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </Slider>
        </div>
      </div>
    :""
    
  )
}
export default SubUnitBanner;