import React, { Component } from "react";
import { Input, Select, Button, Spin, Empty } from "antd";
import axios from "axios";
import "../Order/order.css";
import "./merge.css";
import MergeForm from "./merge_form";
import MergeFooter from "./merge_footer";
const Option = Select.Option;
class UpdateMerge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      merge: undefined,
      pull: undefined,
      isSpin: false,
    };
  }

  componentDidMount = () => {
    this.getmergelist();
  };

  //获取新建分枝数据
  getmergelist = () => {
    this.setState({ isSpin: true });
    const { projectsId, mergeId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/pulls/${mergeId}/edit.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          this.setState({
            isSpin: false,
            data: result.data,
            pull: result.data.head,
            merge: result.data.base,
          });
        } else {
          this.setState({
            isSpin: false,
          });
        }
      })
      .catch((error) => {
        this.setState({
          isSpin: false,
        });
        console.log(error);
      });
  };

  render() {
    const { data, isSpin, pull, merge } = this.state;
    return (
      <div>
        <div className="main updateMerge">
          <Spin spinning={isSpin}>
            {" "}
            {data ? (
              <div>
                <div className="merge-header width100 inline-block">
                  <div className="width45 pull-left">
                    <div className="color-grey-3 mb10 fwb">源分支:</div>

                    <Input.Group compact className="display-flex">
                      <Button className="merge-header-button flex1 maxW50 hide-1 task-hide" disabled>
                        {data.is_original ? `${data.fork_project_user_name}/${data.fork_project_identifier}` : `${data.project_author}/${data.project_name}`}
                      </Button>
                      <Select
                        defaultValue={data.is_original ? `${data.fork_project_user}:${pull}` : `${pull}`}
                        className="minW50 merge-flex1 flex1 matchwidth"
                        disabled
                      ></Select>{" "}
                    </Input.Group>{" "}
                  </div>{" "}
                  <div className="width10 pull-left text-center mt25">
                    <i
                      className={"iconfont icon-youjiang color-grey-c font-32"}
                    ></i>{" "}
                  </div>{" "}
                  <div className="width45 pull-left">
                    <div>
                      <div className="color-grey-3 mb10 fwb"> 目标分支 : </div>{" "}
                      <Input.Group compact className="display-flex">
                        <Button className="merge-header-button flex1 maxW50 hide-1 task-hide" disabled>
                          {`${data.project_author}/${data.project_name}`}
                        </Button>
                        <Select
                          defaultValue={data.is_original ? `${data.project_login}:${merge}` : `${merge}`}
                          className="minW50 merge-flex1 flex1 matchwidth"
                          disabled
                        ></Select>{" "}
                      </Input.Group>{" "}
                    </div>{" "}
                  </div>{" "}
                </div>
                <MergeForm
                  {...this.props}
                  merge_type="edit"
                  data={data}
                  merge={merge}
                  pull={pull}
                ></MergeForm>{" "}
              </div>
            ) : (
              ""
            )}
          </Spin>
        </div>
        {/* <div className=" main">
          <MergeFooter footer_type="new" {...this.props}></MergeFooter>
        </div> */}
      </div>
    );
  }
}

export default UpdateMerge;
