import React from 'react';
import { AlignCenter , AlignTop , FlexAJ  } from '../Component/layout';
import { Link } from 'react-router-dom';

function Releases({owner,projectsId,releaseVersions}){
  
  return(
    <div>
      <FlexAJ>
        <AlignCenter><span className="font-16 color-grey-6">发行版</span>
          { releaseVersions && releaseVersions.total_count > 0 && <span className="infoCount">{releaseVersions.total_count}</span>}
        </AlignCenter>
        { releaseVersions && releaseVersions.total_count > 0 ? 
          <Link className="font-12 color-grey-9" to={`/projects/${owner}/${projectsId}/releases`}>全部</Link>
          : 
          <Link className="font-12 color-blue" to={`/projects/${owner}/${projectsId}/releases/new`}>新建</Link>
        }
      </FlexAJ>
      {
        releaseVersions && releaseVersions.total_count>0 ?
          releaseVersions.list.map((item,key)=>{
            return(
            <AlignTop className="mt10">
              <i className="iconfont icon-biaoqian3 color-grey-6 font-18 mr10"></i>
              <div>
                <p className="font-16 color-grey-6">
                  <Link to={`/projects/${owner}/${projectsId}/releases`}>{item.name}</Link>
                  <span className="font-12 laterest ml5">最新</span>
                </p>
                <p className="color-grey-9 font-13">{item.created_at}</p>
              </div>
            </AlignTop>
            )
          })
        :""
      }
      
    </div>
  )
}
export default Releases;