import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { getImageUrl } from "educoder";
import { Spin, Pagination } from "antd";
import "./list.css";
import NoneData from "../Nodata";
class ForkUsers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: null,
      count: 0,
      limit: 20,
      page: 1,
      isSpin: false,
    };
  }

  componentDidMount = () => {
    this.getUsersList();
    const {projectDetail} = this.props;
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `Fork用户-${author.name}/${name}`;
    }
  };

  getUsersList = (page, limit) => {
    this.setState({
      isSpin: true,
    });
    const { projectsId , owner } = this.props.match.params;

    const url = `/${owner}/${projectsId}/forks.json`;
    axios
      .get(url, {
        params: {
          page,
          limit,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            count: result.data.count,
            users: result.data.users,
            isSpin: false,
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 翻页
  ChangePage = (page) => {
    this.setState({
      page,
      isSpin: true,
    });
    const { limit } = this.state;
    this.getUsersList(page, limit);
  };

  Paginations =()=> {
    const { count, page, limit } = this.state;
    if(count > limit){
      return(
        <div className="mt50 mb30 edu-txt-center">
          <Pagination
            simple
            defaultCurrent={page}
            total={count}
            pageSize={limit}
            onChange={this.ChangePage}
          ></Pagination>
        </div>
      )
    }
  };
  renderList = (users) => {
    if (users && users.length > 0) {
      return users.map((item, key) => {
        return (
          <div className="w-25 pull-left" key={key}>
            <div className="pbt25 grid-item mlr10  border-b-line">
              <div>
                <Link
                  to={`/${item.login}`}
                  className="show-user-link"
                >
                  <img
                    className="avatar-60"
                    src={getImageUrl(`/${item.image_url}`)}
                    alt=""
                  />
                </Link>
              </div>
              <div className="ml12">
                <div>
                  <Link
                    to={`/${item.login}/${item.identifier}`}
                    className="font-16 text-primary task-hide max-w-200"
                    style={{display:"block"}}
                    title={item.name}
                  >
                    {item.name}
                  </Link>
                </div>
                <div className="font-12 text-gray grid-item pb5">
                  <i className="iconfont icon-shijian user-join-time"></i>
                  <span className="ml4">fork时间：{item.format_time}</span>
                </div>
              </div>
            </div>
          </div>
        );
      });
    }
  }

  render() {
    const { users, isSpin } = this.state;
    
    return (
      <div className="pbt15">
        <div className="main background-f minH-670" style={{padding:"0px"}}>
          <div className="user-list-items">
            <div className="font-18 padding10-20 border-b-line">Fork列表</div>
            <Spin spinning={isSpin}>
              <div className="w-100 inline-block" style={{minHeight:"400px"}}>
                {users && users.length === 0 ? <NoneData _html="暂时还没有相关数据!" /> :"" }
                {this.renderList(users)}
              </div>
            </Spin>
            {this.Paginations()}
          </div>
        </div>
      </div>
    );
  }
}

export default ForkUsers;
