import React from "react";
import {Button, Col, message, Modal, Row} from "antd";
import {WeaInput} from "ecCom";
import {inject, observer} from "mobx-react";
import RequiredLabelTip from "../../../components/requiredLabelTip";
import {notNull} from "../../../util/validate";

@inject("ledgerStore")
@observer
export default class ValidRuleEditModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      formulaId: "",
      description: ""
    };
  }

  validateForm() {
    const {name, formulaId} = this.state;
    if (!notNull(name)) {
      message.warning("规则名称不能为空");
      return false;
    }

    // if(!notNull(formulaId)) {
    //     message.warning("校验规则不能为空")
    //     return false;
    // }

    return true;
  }


  handleSave() {
    if (!this.validateForm()) {
      return;
    }
    const {ledgerStore: {saveLedgerRule}} = this.props;
    saveLedgerRule({
      name: this.state.name,
      formulaId: this.state.formulaId,
      description: this.state.description
    });
    this.props.onCancel();
  }

  render() {
    return (
      <Modal visible={this.props.visible} onCancel={() => {
        this.props.onCancel();
      }}
             width={800} title="添加校验规则"
             footer={
               <div style={{width: "100%", overflow: "hidden"}}>
          <span style={{float: "left"}}>
            薪资核算时，不符合校验规则将反馈为异常
          </span>
                 <Button type="primary" style={{float: "right"}} onClick={() => {
                   this.handleSave();
                 }}>保存</Button>
               </div>
             }
      >
        <div style={{padding: "20px"}}>
          <Row style={{lineHeight: "40px"}}>
            <Col span={8}>规则名称<RequiredLabelTip/></Col>
            <Col span={16}>
              <WeaInput value={this.state.name} onChange={(value) => {
                this.setState({name: value});
              }}/>
            </Col>
          </Row>
          <Row style={{lineHeight: "40px"}}>
            <Col span={8}>校验规则<RequiredLabelTip/></Col>
            <Col span={16}>
              <WeaInput value={this.state.formulaId} onFocus={() => {
                // this.setState({formulaId: value});
                this.props.onAddValidRule && this.props.onAddValidRule(true);
              }}/>
            </Col>
          </Row>
          <Row style={{lineHeight: "40px"}}>
            <Col span={8}>备注</Col>
            <Col span={16}>
              <WeaInput value={this.state.description} onChange={(value) => {
                this.setState({description: value});
              }}/>
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}