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

function Releases({ owner, projectsId, releaseVersions, distribution }) {
  return(
    <div>
      <Link to={`/${owner}/${projectsId}/releases`} className="font-16 color-ooo hoverA">
        <span>发行版</span>
      { releaseVersions && releaseVersions.total_count > 0 && <span className="infoCount">{releaseVersions.total_count}</span>}
      </Link>
      {
        releaseVersions && releaseVersions.total_count>0 ?
          releaseVersions.list.map((item,key)=>{
            return(
            key === 0 &&<AlignTop className="mt10">
              <div>
                <p className="font-16 color-grey-6" style={{display:'flex',alignItems:'center'}}>
                  {/* 如果是点击最新则发行版列表页只展示最新的一个 */}
                  <Link to={{pathname:`/${owner}/${projectsId}/releases`,query:{turnFromNew:true}}} style={{maxWidth:'200px',overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis'}}>{item.name}</Link>
                  <span className="font-12 laterest ml5">最新</span>
                </p>
                <p className="color-grey-3 font-12">{item.created_at}</p>
              </div>
            </AlignTop>
            )
          })
        :
        <div className="mt8">
          您暂未发布任何版本
          {distribution && <Link className="color-blue ml20" to={{pathname:`/${owner}/${projectsId}/releases/new`,state:{stable:true}}}>创建新版本</Link>}
        </div>
      }
      
    </div>
  )
}
export default Releases;