text: import React, { PureComponent } from "react";
  import { connect } from "dva";
  import {
    Form,
    Button,
    Select,
    Input,
    Modal,
  } from "antd";
  import AddGroup from "../../components/AddOrEditGroup";
  import globalUtil from "../../utils/global";
  import { getGitlabInfo } from "../../services/team";
  import { getCodeBranchs } from "../../services/createApp";
  
  const FormItem = Form.Item;
  @Form.create()
  class CreateNewProject extends PureComponent {
    handleOk = (e) => {
      e.preventDefault();
      this.props.form.validateFields({ force: true }, (err, vals) => {
        if (!err) {
          this.props.onOk && this.props.onOk(vals);
        }
      });
    };
    handleCancel = () => {
      this.props.onCancel && this.props.onCancel();
    };
    render() {
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
      return (
        <Modal
          title="新建Gitlab项目"
          visible
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form onSubmit={this.onOk}>
            <FormItem {...formItemLayout} label="项目名称">
              {getFieldDecorator("project_name", {
                initialValue: "",
                rules: [{ required: true, message: "项目名称" }],
              })(<Input placeholder="请为创建的项目起个名字吧" />)}
            </FormItem>
          </Form>
        </Modal>
      );
    }
  }
  
  const { Option } = Select;
  const formItemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };
  
  @connect(
    ({ global }) => ({
      groups: global.groups,
    }),
    null,
    null,
    { withRef: true },
  )
  @Form.create()
  export default class Index extends PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        addGroup: false,
        showCreateProject: false,
        gitlabUrl: "",
        gitlabId: "",
        codeList: [],
        branchs: [],
      };
    }
    componentDidMount() {
      this.getGitlabInfo();
    }
    onAddGroup = () => {
      this.setState({ addGroup: true });
    };
    cancelAddGroup = () => {
      this.setState({ addGroup: false });
    };
    handleSubmit = (e) => {
      e.preventDefault();
      const form = this.props.form;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const codeId = fieldsValue.git_project_id;
        const selectedProject = this.state.codeList.filter(item => item.code_id === codeId);
        if (selectedProject.length) {
          fieldsValue.git_url = selectedProject[0].code_repos;
        }
        this.props.onSubmit && this.props.onSubmit(fieldsValue);
      });
    };
    handleAddGroup = (vals) => {
      const { setFieldsValue } = this.props.form;
      this.props.dispatch({
        type: "groupControl/addGroup",
        payload: {
          team_name: globalUtil.getCurrTeamName(),
          ...vals,
        },
        callback: (group) => {
          if (group) {
            // 获取群组
            this.props.dispatch({
              type: "global/fetchGroups",
              payload: {
                team_name: globalUtil.getCurrTeamName(),
                region_name: globalUtil.getCurrRegionName(),
              },
              callback: () => {
                setFieldsValue({ group_id: group.ID });
                this.cancelAddGroup();
              },
            });
          }
        },
      });
    };
    fetchGroup = () => {
      this.props.dispatch({
        type: "global/fetchGroups",
        payload: {
          team_name: globalUtil.getCurrTeamName(),
        },
      });
    };
    onCreateProject = () => {
      this.setState({ showCreateProject: true });
    };
    handleCancelCreateProject = () => {
      this.setState({ showCreateProject: false });
    };
    handleCreateProject = (value) => {
      this.props.dispatch({
        type: "user/createGitlabProject",
        payload: {
          team_name: globalUtil.getCurrTeamName(),
          ...value,
        },
        callback: (bean) => {
          if (bean) {
            this.setState({ gitlabUrl: bean.http_repo_url, gitlabId: bean.project_id });
            this.handleCancelCreateProject();
            this.showCreateProjectOk();
          }
        }
      });
    };
    showCreateProjectOk = () => {
      Modal.success({
        title: "创建项目成功",
        content: (
          <div>
            <p>
              项目地址:{" "}
              <a target="_blank" href={this.state.gitlabUrl}>
                {this.state.gitlabUrl}
              </a>
            </p>
            <p>请前往上传源码, 完成后点击 已上传源码 继续创建</p>
          </div>
        ),
        onOk: () => {
          this.props.form.setFieldsValue({ git_project_id: this.state.gitlabId });
          this.getGitlabInfo();
        },
        okText: "已上传源码",
      });
    };
    getGitlabInfo = () => {
      const self = this;
  
      return getGitlabInfo({
        team_name: globalUtil.getCurrTeamName(),
      }).then((data) => {
        if (data && data.bean) {
          self.setState({ codeList: data.list || [] }, () => {
            const { getFieldValue } = this.props.form;
            const defaultProjectId = getFieldValue("git_project_id") || this.getDefaultProjectId();
            if (defaultProjectId) {
              this.getCodeBranchs(defaultProjectId);
            }
          });
        }
      });
    };
    getCodeBranchs = (projectId) => {
      const git = this.state.codeList.filter(item => item.code_id === projectId)[0];
  
      getCodeBranchs({
        team_name: globalUtil.getCurrTeamName(),
        service_project_id: projectId,
        type: "gitlab",
        git_url: git.code_repos,
      }).then((data) => {
        if (data) {
          this.setState({ branchs: data.list || [] });
        }
      });
    };
    handleCodeIdChange = (val) => {
      const { setFieldsValue } = this.props.form;
      setFieldsValue({ code_version: "master" });
      this.getCodeBranchs(val);
    };
    getDefaultProjectId = () => {
      const data = this.props.data || {};
      const codeList = this.state.codeList || [];
      let defaultProject = data.git_project_id || "";
      if (!defaultProject && codeList.length) {
        defaultProject = codeList[0].code_id;
      }
      return defaultProject;
    };
    render() {
      const { getFieldDecorator } = this.props.form;
      const { groups } = this.props;
      const data = this.props.data || {};
      const codeList = this.state.codeList || [];
      const defaultProject = this.getDefaultProjectId();
      const branchs = this.state.branchs || [];
      return (
        <Form layout="horizontal" hideRequiredMark>
          <Form.Item {...formItemLayout} label="应用">
            {getFieldDecorator("group_id", {
              initialValue: (this.props.handleType && this.props.handleType === "Service") ? Number(this.props.groupId) : data.groupd_id,
              rules: [{ required: true, message: "请选择" }],
            })(<Select style={{ display: "inline-block", width: (this.props.handleType && this.props.handleType === "Service") ? "" : 290, marginRight: 15 }}
              disabled={(this.props.handleType && this.props.handleType === "Service") ? true : false} >
              {(groups || []).map(group => <Option key={group.group_id} value={group.group_id}>{group.group_name}</Option>)}
            </Select>)}
            {(this.props.handleType && this.props.handleType === "Service") ? null : <Button onClick={this.onAddGroup}>新建应用</Button>}
          </Form.Item>
          <Form.Item {...formItemLayout} label="组件名称">
            {getFieldDecorator("service_cname", {
              initialValue: data.service_cname || "",
              rules: [{ required: true, message: "要创建的组件还没有名字" }],
            })(<Input placeholder="请为创建的组件起个名字吧" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="Gitlab项目">
            {getFieldDecorator("git_project_id", {
              initialValue: defaultProject,
              rules: [{ required: true, message: "请选择" }],
            })(<Select
              placeholder={defaultProject ? "请选择" : "暂无项目，请先创建"}
              onChange={this.handleCodeIdChange}
              style={{ display: "inline-block", width: 290, marginRight: 15 }}
            >
              {codeList.map(item => <Option value={item.code_id}>{item.code_project_name}</Option>)}
            </Select>)}
            <Button onClick={this.onCreateProject}>新建项目</Button>
          </Form.Item>
          <Form.Item {...formItemLayout} label="代码分支">
            {getFieldDecorator("code_version", {
              initialValue: data.code_version || "master",
              rules: [{ required: true, message: "请选择" }],
            })(<Select>
              {branchs.map(item => <Option value={item}>{item}</Option>)}
            </Select>)}
          </Form.Item>
          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
            }}
            label=""
          >
  
            {this.props.handleType && this.props.handleType === "Service" && this.props.ButtonGroupState ?
              this.props.handleServiceBotton(<Button disabled={!codeList.length} onClick={this.handleSubmit} type="primary">
                新建组件
            </Button>, false) :
              !this.props.handleType && <Button disabled={!codeList.length} onClick={this.handleSubmit} type="primary">
                新建应用
            </Button>}
  
          </Form.Item>
          {this.state.addGroup && (
            <AddGroup onCancel={this.cancelAddGroup} onOk={this.handleAddGroup} />
          )}
          {this.state.showCreateProject && (
            <CreateNewProject
              onOk={this.handleCreateProject}
              onCancel={this.handleCancelCreateProject}
            />
          )}
        </Form>
      );
    }
  }
  