import React from "react";
import { WeaDialog } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import CustomForm from "../../../components/customForm";
import "./index.less";

@inject("programmeStore")
@observer
export default class CustomNewModal extends React.Component {
  constructor(props) {
    super(props);
  }

  handleOK() {
    const { programmeStore: { createSICategory, customRequest, updateCustomCategory } } = this.props;
    if (!this.props.edit) {  // 新增
      createSICategory(customRequest).then(() => {
        this.props.onCancel(true);
      });
    } else {
      updateCustomCategory(customRequest).then(() => {
        this.props.onCancel(true);
      });
    }
  }

  render() {
    const { programmeStore: { customRequest, setCustomRequest } } = this.props;
    return (
      <WeaDialog
        initLoadCss
        className="customFLOuter"
        visible={this.props.visible}
        onCancel={() => this.props.onCancel()}
        title={this.props.edit ? "编辑自定义福利" : "新建自定义福利"}
        style={{ height: "auto!important" }}
        buttons={[
          <Button type="ghost" onClick={() => this.props.onCancel()}>取消</Button>,
          <Button type="primary" onClick={() => this.handleOK()}>确定</Button>
        ]}
      >
        <CustomForm
          condition={this.props.condition}
          disable={this.props.edit ? ["paymentScope", "welfareType"] : null}
          request={customRequest}
          onChange={(value) => {
            setCustomRequest(value);
          }}/>
      </WeaDialog>
    );
  }
}