/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 17:02:15
 */
import { ProForm, ModalForm, ProFormText } from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';

export default ({ values, modalOpenState, onModalOpenState, onSubmit }) => {
  const restFormRef = useRef();

  useEffect(() => {
    restFormRef.current?.setFieldsValue(values);
  }, [values]);


  return (
    <>
      <ModalForm
        title="配置-编辑"
        formRef={restFormRef}
        submitter={{
          searchConfig: {
            resetText: '重置',
          },
          resetButtonProps: {
            onClick: () => {
              restFormRef.current?.resetFields();
            },
          },
        }}
        onFinish={onSubmit}
        visible={modalOpenState}
        onVisibleChange={onModalOpenState}
      >
        <ProFormText hidden={true} width="md" name="key" />
        <ProFormText
          rules={[{ required: true, message: '请输入key!' }]}
          width="md"
          name="key"
          label="key"
          disabled={true}
          placeholder="请输入key"
        />
        <ProFormText
          rules={[{ required: true, message: '请输入值!' }]}
          width="md"
          name="value"
          label="值"
          placeholder="请输入值"
        />
        <ProFormText
          rules={[{ required: true, message: '请输入注释!' }]}
          width="md"
          name="comment"
          label="注释"
          placeholder="请输入注释"
        />
      </ModalForm>
    </>
  );
};
