import React from 'react'
import { Modal, Row, Col, Button, message } 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} onChange={(value)=> {this.setState({formulaId: value})}}/>
                        </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>
        )
    }
}