import React from 'react';
import { Table , Popconfirm } from 'antd';
import { Link } from 'react-router-dom';

function List({ list, operate , projectsId , owner , showModal , deleteFunc }){

  const columns = [
    {
      title:"流水线名称",
      dataIndex:"pipeline_name",
      key:1,
      width:"20%",
      ellipsis:true,
      render:(txt,item)=>{
        return(
          <span onDoubleClick={()=>showModal(txt,item.id)} style={{display:"block",cursor:"pointer"}}>{txt}</span>
        )
      }
    },
    {
      title:"文件名称",
      dataIndex:"file_name",
      key:1,
      width:"17%",
      className:"color-blue",
      ellipsis:true
    },
    {
      title:"创建时间",
      dataIndex:"created_at",
      key:1,
      width:"18%",
      ellipsis:true
    },
    {
      title:"操作",
      dataIndex:"operation",
      key:1,
      width:"30%",
      render:(txt,item)=>{
        return(
          <span>
            { operate ? 
              <Link to={`/projects/${owner}/${projectsId}/devops/dispose/${item.id}`} className="mr10 color-grey-6">
              <i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</Link> :""
            }
            { operate ? 
              <Popconfirm title={"确定要删除此流水线？"} onConfirm={()=>deleteFunc(item.id)} okText="确定" cancelText={"取消"}>
                <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
              </Popconfirm>:""
            }
            <Link to={`/projects/${owner}/${projectsId}/devops/list`} className="color-grey-6"><i className="iconfont icon-yunhang font-13 mr3"></i>查看运行记录</Link>
          </span>
        )
      }
    }
  ]
  return(
    <Table size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
  )
}
export default List;