import React , { forwardRef , useCallback } from 'react';
import activate from '../Images/activate.png';
import { Blueback } from '../Component/layout';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { Form , Input } from 'antd';
import axios from 'axios';

const P = styled.p`{
  width:200px;
  line-height:30px;
  font-size:16px;
  color:#333;
  text-align:center;
  margin-top:30px;
  margin-bottom:30px!important;
}`;
function About( props , ref){
  const { form: { getFieldDecorator , validateFields } } = props;

  const helper = useCallback(
    (label, name, rules, widget, isRequired) => (
      <React.Fragment>
        <span className={isRequired?"required":""}>{label}</span>
        <Form.Item>
          {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
        </Form.Item>
      </React.Fragment>
    ),
    []
  );

  function startActive(){
    let projectsId = props.match.params.projectsId;
    validateFields((error,values)=>{
      if(!error){
        const url = `/dev_ops/cloud_accounts.json`;
        axios.post(url,{
          ...values,
          project_id:projectsId
        }).then(result=>{
          if(result && result.data.redirect_url){
            window.location.href = result.data.redirect_url;
          }
        }).catch(error=>{
          console.log(error);
        })
      }
    })
  }
  return(
    <div className="activatePanel">
      <img src={activate} alt="" width="250px"/>
      <P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
      <Link to={""} style={{color:"#5091FF",marginBottom:"20px"}}>了解什么是DevOps？</Link>
      <Form>
        {helper(
          "服务器IP地址：",
          "ip_num",
          [{ required: true, message: "请输入服务器IP地址" }],
          <Input placeholder="请输入服务器IP地址" style={{width:"368px"}} size="large" />,true
        )}
        {helper(
          "服务器用户名：",
          "account",
          [{ required: true, message: "请输入服务器用户名" }],
          <Input placeholder="请输入服务器用户名" size="large" />,true
        )}
        {helper(
          "服务器密码：",
          "secret",
          [{ required: true, message: "请输入服务器密码" }],
          <Input.Password placeholder="请输入服务器密码" size="large" />,true
        )}
      </Form>
      <Blueback onClick={startActive}>开始激活</Blueback>
    </div>
  )
}
export default Form.create()(forwardRef(About));