import React , { useEffect , useState } from 'react';
import { Modal , Input } from 'antd';

function PipelineName({visible,onCancel,onOk,value}){
  const [ name , setName ] = useState(undefined);

  useEffect(()=>{
    if(value){
      setName(value.pipeline_name);
    }
  },[value])

  function onSure(){
    onOk(name,value && value.id);
  }
  return(
    <Modal
      visible={visible}
      title="流水线名称"
      width={"500px"}
      onCancel={onCancel}
      onOk={onSure}
      centered={true}
    >
      <div className="choosenList">
        <span>流水线名称:</span>
        <Input value={name} onChange={(e)=>setName(e.target.value)} placeholder="请输入名称" style={{width:"340px",margin:"6px 0px"}}/>
      </div>
    </Modal>
  )
}
export default PipelineName;