import React, { useEffect, useState } from 'react';
import { HomeHoc }  from './HOC/HomeHoc';
import { Link } from 'react-router-dom';
import './Index.scss';
import main from './images/320.jpg';
import icon1 from './images/icon1.png';
import icon2 from './images/icon2.png';
import active1 from './images/active1.jpg';
import active2 from './images/active2.png';
import DefaultImg from './images/default.png';
import { Carousel } from 'antd';
import { getUrlHead } from './Data/getUrl';
import axios from 'axios';

function Index(props){
  const [ about ,setAbout ] =useState(undefined);
  const [ covers ,setCovers ] =useState(undefined);
  const [ recommand ,setRecommand ] =useState(undefined);
  const [ news ,setNews ] =useState(undefined);
  const [ activity ,setActivity ] =useState(undefined);
  const [ cooperaters ,setCooperaters ] =useState(undefined);
  useEffect(()=>{
    getRecommand();
    getAbout();
    getNews();
    getActivity();
    getCooperaters();
  },[])

  // 关于我们
  function getAbout(){
    const url = `/helps/about.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setAbout(result.data.data);
        setCovers(result.data.data.covers);
      }
    }).catch(error=>{})
  }
  // 开源软件推荐
  function getRecommand(){
    const url = `/projects/recommend.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setRecommand(result.data.data);
      }
    }).catch(error=>{})
  }
  // 开源活动
  function getNews(){
    const url = `/topics.json`;
    axios.get(url,{
      params:{type:"activity"}
    }).then(result=>{
      if(result && result.data){
        setNews(result.data.data);
      }
    }).catch(error=>{})
  }
  // 开源资讯
  function getActivity(){
    const url = `/topics.json`;
    axios.get(url,{
      params:{type:"news"}
    }).then(result=>{
      if(result && result.data){
        setActivity(result.data.data);
      }
    }).catch(error=>{})
  }
  // 合作伙伴
  function getCooperaters(){
    const url = `/cooperaters.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setCooperaters(result.data.data);
      }
    }).catch(error=>{})
  }
  return(
    <div>
      <div className="homebase">
        <Carousel 
          autoplay
          pauseOnDotsHover
        >
          {
            covers && covers.length>0?
            covers.map((i,k)=>{
              return(
                <a href={i.path}><img src={getUrlHead(i.image_url) } alt="" /></a>
              )
            })
            :<img src={main} alt="" />
          }
        </Carousel>
      </div>
      {
        recommand && recommand.length > 0 &&
        <div className="homeproject">
          <div class="tit">开源软件推荐</div>
          <ul>
            {
              recommand.map((item,key)=>{
                return(
                  <li>
                    <a href={item.url}>
                      <div className="p_head">
                        <p className="p_name task-hide-2">{item.full_name}</p>
                        <img src={item.author && item.author.image_url ? getUrlHead(item.author.image_url) : DefaultImg } alt="" style={{maxHeight:"50px"}}/>
                      </div>
                    </a>
                    <p className="p_author">{item.author && item.author.name}</p>
                    <p className="p_desc task-hide-2">{item.description}</p>
                  </li>
                )
              })
            }
          </ul>
          <Link to={`/projects`} className="color-blue">查看更多<i className="iconfont icon-youjiantou ml8 font-12 color-blue"></i></Link>
        </div>
      }
      
      {
        about && 
        <div className="homeFirst">
          <div className="firstPanel">
            <div className="firstPanelBox">
              <div class="tit" style={{marginBottom:"30px"}}>{about.name}</div>
              <div className="desc">
                {about.content}<Link to={`/about`} className="color-blue">查看更多</Link>
              </div>
              <ul className="aboutul">
                <li>
                  <img src={icon1} alt="" width="186px"/>
                  <font>开源项目总数</font>
                  <span>{about.total_projects_count}</span>
                </li>
                <li>
                  <img src={icon2} alt="" width="186px"/>
                  <font>科技项目开源成果</font>
                  <span>{about.science_projects_count}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      }
      
      
      <div className="sourceAbout">
        <div class="tit">开源活动</div>
        {
          news && news.length>0 ?
          <div className="sourceactive">
            {
              news.map((item,key)=>{
                return(
                  key < 2 &&<a href={item.url} style={{backgroundImage:`url(${getUrlHead(item.cover)})`}}></a>
                )
              })
            }
          </div>
          :
          <div className="sourceactive">
            <li style={{backgroundImage:`url(${active1})`}}></li>
            <li style={{backgroundImage:`url(${active2})`}}></li>
          </div>
        }
        
        {/* <Link to={`/projects`} className="color-blue">查看更多<i className="iconfont icon-youjiantou ml8 font-12 color-blue"></i></Link> */}
      </div>
      
      <div className={"homenews"}>
        <div class="tit">开源资讯</div>
        <div>
          {
            activity && activity.length> 0 &&
            <ul className="newsul">
              {
                activity.map((item,key)=>{
                  return(
                    <li>
                      <div className="imgBox"><img src={getUrlHead(item.cover)} alt="" width="145px" height="96px"/></div>
                      <div className="news-info">
                        <p className="news-title"><a href={item.url} target="_blank">{item.title}</a></p>
                        <div className="news-desc task-hide-2">{item.content}</div>
                        <div className="news-time">{item.created_at}</div>
                      </div>
                    </li>
                  )
                })
              }
            </ul>
          }
        </div>
      </div>
      {
        cooperaters && cooperaters.length > 0 &&
        <ul className="homeFooterUl homeFooterParter">
          {
            cooperaters.map((i,k)=>{
              return(
                <li><a href={i.website_url} target="_blank"><img src={getUrlHead(i.logo_url) } alt="" width="200px"/></a></li>
              )
            })
          }
        </ul>
      }
    </div>
  )
}
export default HomeHoc(Index);