import React, { useEffect, useState } from 'react';
import { HomeHoc } from '../HOC/HomeHoc';
import { Box , Long , Short , Gap } from '../../forge/Component/layout';
import { AlignCenter ,FlexAJ } from '../../forge/Component/layout';
import './Index.scss';
import DefaultImg from '../images/default.png';
import { getUrlHead } from '../Data/getUrl';
import axios from 'axios';
import { Skeleton , Pagination } from 'antd';
import Ranking from './Ranking';

const data =[
  {
    index:1,
    name:"Trustie社区 / Mini-Kernel",
    count:123223123
  },
  {
    index:2,
    name:"Trustie社区 / Mini-Kernel",
    count:123223122
  },
  {
    index:3,
    name:"Trustie社区 / Mini-Kernel",
    count:123223121
  }
]
const limit = 12;
function Index(props){
  const [ list , setList ] = useState([]);
  const [ date ,setDate ] = useState("week");
  const [ page ,setPage ] = useState(1);
  const [ total ,setTotal ] = useState(0);
  const [ rankList ,setRankList ] = useState([]);

  useEffect(()=>{
    getData();
  },[page])

  useEffect(()=>{
    getRank();
  },[date])

  // 获取项目列表
  function getData() {
    const url =  `/projects/science.josn`;
    axios.get(url,{
      params:{page,limit}
    }).then(result=>{
      if(result){
        setList(result.data.data);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  // 获取排行列表
  function getRank(){
    const url =  `/projects/liveness.json`;
    axios.get(url,{
      params:{time_type:date,type:"commits"}
    }).then(result=>{
      if(result){
        setRankList(result.data.data);
      }
    }).catch(error=>{})
  }

  return(
    <Box className="panels">
      <Long>
        <div className="projectsList">
        <p className="font-16">基础类开源软件</p>
        {
          list && list.length > 0 ?
            <div className="lists">
              {
                list.map((item,key)=>{
                  return(
                    <a href={item.url} >
                      <li>
                        <div className="listinfo">
                          <p className="listName">{item.full_name}</p>
                          <div className="listNum">
                            {/* <span>代码行数：20.43K</span> */}
                            <span>仓库大小：{item.size ||"0kB"}</span>
                            <span>commits数：{item.commits_count}</span>
                          </div>
                        </div>
                        <AlignCenter className="listMain">
                          <p className="listInfoDesc task-hide-2">{item.description}</p>
                          <img src={(item.author && getUrlHead(item.author.image_url)) || DefaultImg} alt="" width="48px" className="ml10"/>
                        </AlignCenter>
                        {
                          item.project_tags && item.project_tags.length>0 &&
                          <div className="listTag">
                            {
                              item.project_tags.map((i,k)=>{
                                return(
                                  <span>{i}</span>
                                )
                              })
                            }
                          </div>
                        }
                        <div className="projectNum">
                          <AlignCenter><i className="iconfont icon-liulanyan font-12 mr2"></i>{item.visits}</AlignCenter>
                          <AlignCenter><i className="iconfont icon-kongxing font-12 mr2"></i>{item.praises_count}</AlignCenter>
                          <AlignCenter><i className="iconfont icon-fork font-12 mr2"></i>{item.forked_count}</AlignCenter>
                        </div>
                      </li>
                    </a>
                  )
                })
              }
            </div>
          :""
        }
        {
          list && list.length === 0 && <Skeleton />
        }
        {
          total > limit &&
          <div className="edu-txt-center">
            <Pagination showQuickJumper current={page} total={total} pageSize={limit} onChange={(p)=>{setPage(p)}}/>
          </div>
        }
        
      </div>
      </Long>
      <Short>
        <Gap>
          <FlexAJ>
            <p className="font-16">活跃度排名</p>
            <ul>
              <a className={date === "week"?"color-blue":"color-grey-9"} onClick={()=>setDate("week")}>周</a>
              <a className={date === "month"?"ml15 color-blue":"ml15 color-grey-9"} onClick={()=>setDate("month")}>月</a>
              <a className={date === "year"?"ml15 color-blue":"ml15 color-grey-9"} onClick={()=>setDate("year")}>年</a>
            </ul>
          </FlexAJ>
          <Ranking data={rankList}/>
        </Gap>
      </Short>
    </Box>
  )
}
export default HomeHoc(Index);