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

import { ProForm, ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { Tree } from 'antd';
import { useEffect, useRef } from 'react';
import FilesManager from '@/components/FilesManage/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>
          <ProFormText
            rules={[{ required: true, message: '请输入' }]}
            width="md"
            name="mobile"
            label="手机号"
            placeholder="请输入"
          />
          <ProFormText.Password
            rules={[{ required: true, message: '请输入' }]}
            width="md"
            name="password"
            label="密码"
            placeholder="请输入"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            rules={[{ required: true, message: '请输入' }]}
            width="md"
            name="nickname"
            label="昵称"
            placeholder="请输入"
          />
          <ProForm.Item label="头像" name="avatar">
            <FilesManager fileType="image" defaultValue={''} count={1} mode="" />
          </ProForm.Item>
        </ProForm.Group>
        <ProFormRadio.Group
          name="status"
          radioType="button"
          label="状态"
          options={[
            {
              label: '正常',
              value: 0,
            },
            {
              label: '冻结',
              value: 1,
            },
            {
              label: '禁用',
              value: 2,
            },
          ]}
        />

        <ProForm.Item label="设置权限" name="permission_ids">
          <Tree
            checkable
            multiple
            showLine={true}
            showIcon={false}
            defaultExpandAll
            onCheck={(check) => {
              console.log(check);
              restFormRef.current.setFieldsValue({ permission_ids: check });
            }}
            fieldNames={{
              title: 'name',
              key: 'id',
            }}
            treeData={permissionTreeData}
          />
        </ProForm.Item>
      </ModalForm>
    </>
  );
};

