import React, { Component } from 'react';
import { Tooltip } from 'antd';
import { getImageUrl } from 'educoder';
import { AlignCenter } from '../Component/layout';
import { Link } from 'react-router-dom';
import '../css/index.scss';
import Nodata from '../Nodata';
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;
    return (
      <div className="project-list minH-670">
        { projects && projects.length > 0 ? projects.map((item, key) => {
          return (
            <div className="p-r-Item" key={key}>
              {
                item.platform === "educoder" ?
                <a href="javascript:void(0)" style={{cursor:"default"}} className="show-user-link">
                  <img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
                </a>
                :
                <Link to={item.author && (item.author.type === "Organization" ? `/organize/${item.author.login}`:`/users/${item.author.login}`)} className="show-user-link">
                  <img className="p-r-photo" alt="" src={getImageUrl(`/${item.author && item.author.image_url}`)} ></img>
                </Link>
              }
              <div className="p-r-Infos">
                <div className="p-r-name">
                  <AlignCenter>
                    <Link to={`/projects/${item.author.login}/${item.identifier}`} className="color-grey-3 font-18 task-hide " style={{maxWidth: 490 }}>
                      {item.author.name}/{item.name}
                    </Link>
                    {
                      item.forked_from_project_id ?
                        <span className="ml5">
                          <i className="iconfont icon-fork font-18 color-orange" />
                        </span>
                        : ""
                    }
                    {
                      item.type && item.type !== 0 ? 
                      item.type === 2 ?
                      <Tooltip title="该项目是一个镜像" className="ml5">
                        <i className="iconfont icon-banbenku font-18 color-green" />
                      </Tooltip>:
                      <span className="ml5">
                        <i className="iconfont icon-jingxiang font-18 color-green" />
                      </span>:""
                    }
                  </AlignCenter>
                  <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: "44px",lineHeight:"22px" }}>{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>{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>
          )
        }) : <Nodata _html="暂无数据~"></Nodata>}
      </div>
    )
  }
}
export default IndexItem;