import React, { Component } from 'react';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import '../css/index.css'
import './list.css';
import img_parise from '../Images/parise.png';

class IndexItem extends Component {
  TurnToDetail = (login, url) => {
    this.props.history.push({
      pathname: url,
      state: login
    })
  }
  render() {
    const { projects } = this.props;
    const renderList = (
      projects && projects.length > 0 ? projects.map((item, key) => {
        return (
          <div className="p-r-Item" key={key}>
            <Link to={`/users/${item.author.login}/projects`} className="show-user-link">
              <img className="p-r-photo" alt="" src={getImageUrl(`images/${item.author && item.author.image_url}`)} ></img>
            </Link>
            <div className="p-r-Infos">
              <div className="p-r-name">
                <Link to={`/projects/${item.id}/coders`} className="hide-1 color-grey-3 font-18 task-hide " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
                  {item.author.name}/{item.name}
                  {
                    item.forked_from_project_id ?
                      <span className="ml5">
                        <i className="iconfont icon-fork font-16 color-orange" />
                      </span>
                      : ""
                  }
                </Link>
                {
                  item.is_public ? "" :
                    <span className="p-r-tags"><span>私有</span></span>
                }
                <span className="p-r-tags">
                  <span className="pariseTag"><img src={img_parise} alt="" className="pariseImg" />赞 ({item.praises_count})</span>
                  <span><i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork ({item.forked_count})</span>
                </span>
              </div>
              <p className="break_word task-hide-2 mt10" style={{ maxHeight: "40px" }}>{item.description}</p>

              <div className="p-r-about">
                <span className="p-r-detail">
                  <span><label>浏览量：</label>{item.visits}</span>
                  {item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
                  {item.last_update_time ? <span ><label>更新于</label>{item.time_ago}</span> : ""}
                  {item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
                </span>
              </div>
            </div>
          </div>
        )
      }) : ""
    )
    return (
      <div className="project-list">
        {renderList}
      </div>
    )
  }
}
export default IndexItem;