/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 17:02:15
 */

import { useEffect, useRef, useState } from 'react';
import { ProForm, ModalForm, ProFormTextArea, ProFormText, ProFormRadio } from '@ant-design/pro-components';


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();
            },
          },
        }}
        initialValues={values}
        onFinish={onSubmit}
        open={modalOpenState}
        onOpenChange={onModalOpenState}
      >
        <ProFormText hidden={true} width="md" name="deviceId" />
        <ProFormText
          width="md"
          label="设备号"
          name="deviceNo"
          placeholder="请输入"
        />
        <ProFormRadio.Group
          rules={[{ required: true, message: '请选择' }]}
          name="repeat"
          radioType="button"
          label="是否可以重复"
          options={[
            {
              label: '不可以重复',
              value: 2,
            },
            {
              label: '可以重复',
              value: 1,
            },
          ]}
        />
        <ProFormText
          rules={[{ required: true, message: '请输入' }]}
          name="siteName"
          label="电站名称"
          placeholder="请输入"
        />
        <ProFormTextArea
          rules={[{ required: true, message: '请输入' }]}
          name="address"
          label="详细地址"
          placeholder="请输入"
        />
      </ModalForm>
    </>
  );
};

