import React , { Component } from 'react';

import { Menu , Input , Dropdown , Icon, Result } from 'antd';
import { Link } from 'react-router-dom';
import '../css/index.css'
import './list.css';

class IndexItem extends Component{
  renderList=(list)=>{
    if(list && list.length >0 ){
      list.map((item,key)=>{
        return(
          <div className="p-r-Item">
            <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
            <div className="p-r-Infos">
              <div className="p-r-name">
                <Link to={""} className="hide-1 font-16 color-grey-3">{item.name}</Link>
                <span className="p-r-tags">
                  <span><label>Fork</label><span>{item.forked_count}</span></span>
                  <span><label>Start</label><span>10</span></span>
                  { item.language && item.language.id && <span><label>{ item.language.name }</label></span>}
                  <span><label>Python</label></span>
                </span>
              </div>
              <div className="p-r-content">
                <p className="break_word hide-2">{item.description}</p>
              </div>
              <div className="p-r-name mt8 color-grey-6">
                <span className="p-r-detail">
                  <span><label>浏览量：</label>{item.visits}</span>
                  { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
                </span>
                <span>最后更新于9小时前</span>
              </div>
            </div>
          </div>
        )
      })
    }
  }
  render(){ 
    const { projects } = this.props;

    const renderList = (
      projects && projects.length >0 && projects.map((item,key)=>{
        return(
          <div className="p-r-Item">
            <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
            <div className="p-r-Infos">
              <div className="p-r-name">
                <Link to={""} className="hide-1 font-16 color-grey-3">{item.name}</Link>
                <span className="p-r-tags">
                  { item.forked_count ? <span><label>Fork</label><span>{ item.forked_count}</span></span>:"" }
                  { item.prasies_count ? <span><label>Start</label><span>{ item.prasies_count }</span></span>:"" }
                  { item.language && item.language.id ? <span><label>{ item.language.name }</label></span>:"" }
                  <span><label>Python</label></span>
                </span>
              </div>
              <div className="p-r-content">
                <p className="break_word hide-2">{item.description}</p>
              </div>
              <div className="p-r-name mt8 color-grey-6">
                <span className="p-r-detail">
                  <span><label>浏览量：</label>{item.visits}</span>
                  { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
                </span>
                <span>最后更新于9小时前</span>
              </div>
            </div>
          </div>
        )
      })
    )
    console.log(renderList);
    return(
      <div className="project-list">
        { renderList }
      </div>
    )
  }
}
export default IndexItem;