import React,{ useEffect , useState } from 'react';
import SubMenu from '../sub/SubMenu';
import { Table , Tooltip } from 'antd';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { truncateCommitId } from '../../common/util';
import './Index.scss';
import Tree from '../img/tree.png'


function Tags(props) {

  const [ source , setSource ] = useState([]);

  const { projectsId , owner } = props.match.params;

  useEffect(() => {
    if (projectsId) {
      const url = `/${owner}/${projectsId}/tags.json`;
      axios.get(url).then((result) => {
        if (result) {
          setSource(result.data);
        }
      }).catch(error => {})
    }
  }, [owner, projectsId]);

  const columns=[
    {
      title:"标签名",
      dataIndex:"name",
      key:1,
      ellipsis:true,
      render:(txt,item)=>{
        return <Link className="hover" to={`/${owner}/${projectsId}/tree/${item.name}`} >{item.name}</Link>
      }
    },
    {
      title:"创建时间",
      dataIndex:"time",
      key:2,
      ellipsis:true,
      render:(txt,item)=>{
        return (
          <span className="color-grey-3">
            <Link className="mr3" style={{fontWeight:"500"}} to={`/${item.commit && item.commit.login}`} >{item.commit && item.commit.name}</Link>
            <span>创建于{item.commit && item.commit.time}</span>
          </span>
        )
      }
    },
    {
      title:"提交ID",
      dataIndex:"id",
      key:3,
      ellipsis:true,
      render:(txt,item)=>{
        return (
          <Tooltip placement="top" title={`最后提交日期:${`dddddd`}`}>
            <img src={Tree} alt="提交ID" width="22px" className="mr4"/>
            <Link className="hover color-blue" to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.id}`)}`}>{truncateCommitId(item.id)}</Link>
          </Tooltip>
        )
      }
    },
    {
      title:"描述信息",
      dataIndex:"message",
      key:4,
      ellipsis:true,
      render:(txt,item)=>{
        return item.message || "--"
      }
    },
    {
      title:"下载",
      dataIndex:"stage_type",
      key:5,
      ellipsis:true,
      align:"center",
      width:"181px",
      render:(txt,item)=>{
        return (
          <div>
            <Link to={`/${owner}/${projectsId}/pulls/new/${item.name}`} className="btn-83">
              <i className="iconfont icon-xiazai-icon font-16 mr5"></i>TAR
            </Link>
            <Link to={`/${owner}/${projectsId}/pulls/new/${item.name}`} className="btn-83 ml15">
              <i className="iconfont icon-xiazai-icon font-16 mr5"></i>ZIP
            </Link>
          </div>
        )
      }
    }
  ]
  return(
    <div>
      <SubMenu tab={"tags"} projectsId={projectsId} owner={owner}/>
      <Table className="tagTable" dataSource={source} columns={columns} pagination={false}></Table>
    </div>
  )
}
export default Tags;