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';
import { getValueFromEvent } from '@utils/index'
const { post, api, xPost } = apiObj;
const { TextArea } = Input;
function EditBlock(props) {
    useEffect(() => {
    }, []);
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    const [title, setTitle] = useState();
    const [data, setData] = useState(null);
    const { regularDetail, type, flag } = useContext(RegularContext);
    const initialValues = regularDetail;
    const onFinish = values => {
        if (flag == 1) {
            setData(values)
            setVisible(true)
            setTitle('该正则式关联字段校验规则，修改后将同步更新，确认修改？')
        } else {
            addRegular(values)
        }

    };
    //添加
    function addRegular(values) {
        let url
        let param
        if (type == 1) {
            url = api.addRegular
            param = values
        } else {
            if (flag == 1) {
                param = data
            } else {
                param = values
            }

            url = api.upRegularById
            param.id = regularDetail.id
        }
        post(url, param).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()
    }
    function onCancel() {
        setVisible(false)
    }
    return (
        <>
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                form={form}
                name="register"
                layout='horizontal'
                onFinish={onFinish}
                initialValues={initialValues}
            >
                <Form.Item label="正则式名称" name="name" getValueFromEvent={getValueFromEvent} rules={[{ required: true, message: '请输入正则式名称' }, { max: 30, message: '正则式名称不能超过30个字符' }]}>
                    <Input placeholder="请输入" autoComplete='off' />
                </Form.Item>
                <Form.Item label="正则式值" name="val" getValueFromEvent={getValueFromEvent} rules={[{ required: true, message: '请输入正则式值' }, { max: 512, message: '正则式值不能超过512个字符' }]}>
                    <TextArea
                        autoSize={{ minRows: 5, maxRows: 5 }}
                        placeholder="请输入"
                    />
                </Form.Item>
                <Form.Item label="说明" name="description" getValueFromEvent={getValueFromEvent} rules={[{ max: 200, message: '说明不能超过200个字符' }]}>
                    <TextArea
                        autoSize={{ minRows: 5, maxRows: 5 }}
                        placeholder="请输入"
                    />
                </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={visible}
                onOk={addRegular}
                /*confirmLoading={confirmLoading}*/
                onCancel={onCancel}
                maskClosable={false}
            >
                <p>{title}</p>
            </Modal>
        </>
    );
}

export default EditBlock;