import React , { useEffect , useState , useRef } from 'react';
import { Banner , Blueback , FlexAJ , AlignCenter } from '../../Component/layout';
import { Input , Table , Popconfirm , Pagination } from 'antd';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import New from './ParamsNew';
import "./manage.scss";
import axios from 'axios';
import { result } from 'lodash';

const Div = styled.div`{
  padding:24px 30px;
  min-height:420px;
}`;
function Params(props){
  const [ list ,setList ] = useState(undefined);
  const [ editList ,setEditList ] = useState(undefined);
  const [ visible ,setVisible ] = useState(false);
  
  let projectsId = props.match.params.projectsId; 
  let owner = props.match.params.owner; 

  useEffect(()=>{
    Init()
  },[])

  function Init(){
    const url = `/ci/secrets.json`;
    axios.get(url,{
      params:{
        owner,repo:projectsId
      }
    }).then(result=>{
      if(result){
        setList(result.data);
      }
    }).catch(error=>{})
  }

  const columns=[
    {
      title:"参数名",
      dataIndex:"name",
      key:1,
      ellipsis:true
    },
    {
      title:"操作",
      dataIndex:"operation",
      key:4,
      render:(txt,item)=>{
        return(
          <React.Fragment>
            <a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
            <Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id,item.name)} okText="确定" cancelText={"取消"}>
              <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
            </Popconfirm>
          </React.Fragment>
        )
      }
    }
  ]

  // 编辑
  function editMouldFunc(item){
    setEditList(item);
    setVisible(true);
  }

  // 删除
  function deleteMouldFunc(id,name){
    if(id && name){
      const url = `/ci/secrets/${id}.json`;
      axios.delete(url,{
        params:{owner,repo:projectsId,name}
      }).then(result=>{
        if(result){
          Init();
          props.showNotification(`参数删除成功！`);
        }
      }).catch(error=>{})
    }
  }

  function successFunc(values,id){
    const url = `/ci/secrets.json?owner=${owner}&repo=${projectsId}`;
    axios.post(url,{
      ...values,id
    }).then(result=>{
      if(result){
        props.showNotification(`${id ? '参数编辑':"新增参数"}成功！`);
        Init();
      }
    }).catch(error=>{})
  }

  function CancelFunc(){
    setVisible(false)
  }

  return(
    <div>
      <New visble={visible} successFunc={successFunc} CancelFunc={CancelFunc} editList={editList}/>
      <Banner>
        <FlexAJ>
          <span className="font-18">引擎 - 参数管理</span>
          <Link to={{pathname:`/${owner}/${projectsId}/devops`,state:{open_devops:true}}} className="font-14 color-grey-9 ml20">返回</Link>
        </FlexAJ>
      </Banner>
      <Div className="disposeList">
        <div style={{textAlign:"right"}}>
          <Blueback onClick={()=>setVisible(true)}>新建</Blueback>
        </div>
        <Table className="mt20" size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
      </Div>
    </div>
  )
}
export default Params;