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

import { ProForm, ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { Tree, TreeSelect } from 'antd';
import { useEffect, useRef } from 'react';
import IconSelect from '@/components/IconSelect/index';

export default ({ values, modalOpenState, onModalOpenState, onSubmit, permissionTreeData }) => {
  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="id" />
        <ProForm.Group>
          <ProForm.Item label="选择上级" name="pid" style={{ width: '220px' }}>
            <TreeSelect
              defaultValue={values?.pid}
              allowClear={true}
              fieldNames={{
                value: 'id',
                label: 'name',
                children: 'children',
              }}
              treeDefaultExpandAll={true}
              placeholder="请选择上级"
              treeData={permissionTreeData}
            />
          </ProForm.Item>
          <ProFormRadio.Group
            name="type"
            label="类型"
            radioType="button"
            options={[
              {
                label: '菜单权限',
                value: 1,
              },
              {
                label: '操作权限',
                value: 2,
              },
            ]}
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            rules={[{ required: true, message: '请输入名称!' }]}
            width="md"
            name="name"
            label="名称"
            placeholder="请输入名称"
          />
          <ProFormText width="md" name="path" label="路径" placeholder="请输入路径" />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText tooltip="由小到大" width="md" name="sort" label="排序" placeholder="请输入排序" />
          <ProForm.Item
            width="md"
            name="icon"
            label="图标"
          >
            <IconSelect defaultValue={values.icon} />
          </ProForm.Item>
        </ProForm.Group>
      </ModalForm>
    </>
  );
};

