import React, { useEffect, useState } from 'react';
import { WhiteBack , AlignCenter } from '../../Component/layout';
import "./sub.scss";
import axios from 'axios';
import { Pagination , Spin } from 'antd';
import NoData from '../../Nodata';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';

function Contribute(props){
  console.log('props', props);
  const [ list , setList ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ isSpin , setIsSpin ] = useState(true);

  const {project} = props;
  const owner = props.match.params.owner;
  const projectsId = props.match.params.projectsId;
  const LIMIT = 20;

  useEffect(()=>{
    if(project){
      // 更改网页标题
      const {name, author} = project;
      document.title = `贡献者列表-${author.name}/${name}`;
    }
  }, [project])

  useEffect(()=>{
    if(owner && projectsId){
      getData();
    }
  },[owner,projectsId,page]);

  function getData(){
    setIsSpin(true);
    const url = `/${owner}/${projectsId}/contributors.json`;
    axios.get(url,{
      params:{
        limit:LIMIT,page,
      }
    }).then(result=>{
      if(result){
        setList(result.data.list);
        setTotal(result.data.total_count);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  return(
    <WhiteBack>
      <Spin spinning={isSpin}>
        <div className="boxPanel">
          <p className="font-18 padding10-20" style={{borderBottom:"1px solid #eee"}}>贡献者列表</p>
          {
            list && list.length > 0 ?
            <div className="contrbuteList">
              {
                list.map((item,key)=>{
                  return(
                    <AlignCenter className='mb15'>
                      <img alt="" style={{borderRadius:"50%",marginRight:"10px"}} src={getImageUrl(`/${item.image_url}`)} width="50px" height="50px"/>
                      <div>
                        <a href={item.login ? `/${item.login}` : `mailto:${item.email}`} className="font-16">{item.name}</a>
                        <p className="font-12 color-grey-9">提交{item.contributions}次{item.contribution_perc ? `  I  贡献占比${item.contribution_perc}` : ''}</p>
                      </div>
                    </AlignCenter>
                  )
                })
              }
            </div>
            :""
          }
          {
            list && list.length === 0 ? <NoData _html="暂无贡献者" />:""
          }
          {
            total > LIMIT ?
            <div className="mt20 edu-txt-center">
              <Pagination simple pageSize={LIMIT} onChange={(p)=>{setPage(p)}} current={page} total={total}/>
            </div>
            :""
          }
        </div>
      </Spin>
    </WhiteBack>
  )
}
export default Contribute;