import React, {
    useState, useEffect, useContext
} from 'react';
import { Form, Modal, Button, message, Space, Input } from 'antd';
import apiObj from '@api/index';
import RegularContext from './regular-context';
const { post, api, xPost } = apiObj;
const { TextArea } = Input;
function EditBlock(props) {
    useEffect(() => {
    }, []);
    const [form] = Form.useForm();
    const [delvisible, setDelVisible] = useState(false);
    const { regularDetail, type, flag } = useContext(RegularContext);
    const initialValues = regularDetail;
    const onFinish = values => {
        if (flag == 1) {
            setDelVisible(true)
        } else {
            addRegular(values)
        }
    };
    //添加
    function addRegular(params) {
        let url
        if (type == 1) {
            url = api.addRegular
        } else {
            url = api.upRegularById
            params.id = regularDetail.id
        }
        post(url, params).then((res) => {
            if (res.data.code === 200) {
                props.userChange()
                message.success(res.data.message);
                form.resetFields();
            } else {
                message.error(res.data.message);
            }
        })
    }

    function cancel() {
        props.cancel()
    }
    return (
        <>
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                form={form}
                name="register"
                layout='horizontal'
                onFinish={onFinish}
                initialValues={initialValues}
            >
                <Form.Item label="正则式名称" name="name" rules={[{ required: true }]}>
                    <Input placeholder="请输入" autoComplete='off' maxLength='30'/>
                </Form.Item>
                <Form.Item label="正则式值" name="val" rules={[{ required: true }]}>
                    <TextArea
                        autoSize={{ minRows: 5, maxRows: 5 }}
                        maxLength='30'
                    />
                </Form.Item>
                <Form.Item label="说明" name="description">
                    <TextArea
                        autoSize={{ minRows: 5, maxRows: 5 }}
                        maxLength='200'
                    />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }} style={{ marginTop: 15 }}>
                    <Space size="middle" >
                        <Button htmlType="button" onClick={e => cancel()}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <Modal
                title="提示"
                okText='确定'
                cancelText='取消'
                width={400}
                visible={delvisible}
                onOk={addRegular}
                /*confirmLoading={confirmLoading}*/
                onCancel={() => cancel()}
            >
                <p>该正则式关联字段校验规则，修改后将同步更新，确认修改？</p>
            </Modal>
        </>
    );
}

export default EditBlock;