import { ProForm, ModalForm, ProFormRadio, ProFormText, PageContainer } from '@ant-design/pro-components';
import { Tree } from 'antd';
import { useEffect, useRef, useState } from 'react';
import FilesManager from '@/components/FilesManage/index';
import services from '@/services/admin';
import { useLocation, useParams, history } from 'umi';
const { permissionTree } = services.PermissionController;
export default () => {
  const location = useLocation();
  const params = useParams();
  console.log(location);
  console.log(params);

  const restFormRef = useRef();
  const [permissionTreeData, setPermissionTreeData] = useState([]);

  const confirmStore = async (value) => {
    const { success } = await adminCreate({ ...value });

    if (success) {
      history.goBack();
    }
  };

  useEffect(() => {
    permissionTree().then(({ data }) => {
      setPermissionTreeData(data);
    });
  }, []);

  return (
    <>
      <PageContainer>
        <>
          <ProForm
            style={{ width: 800 }}
            onFinish={async (values) => {
              console.log(values);
              confirmStore(values);
            }}
            formRef={restFormRef}
            submitter={{
              // 配置按钮文本
              searchConfig: {
                submitText: '保存',
              },
              // 配置按钮的属性
              resetButtonProps: {
                style: {
                  // 隐藏重置按钮
                  display: 'none',
                },
              },
              submitButtonProps: {},
            }}
          >
            <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">
              {
                permissionTreeData?.length > 0 && <Tree

                  checkable
                  multiple
                  showLine={true}
                  showIcon={false}
                  defaultExpandAll
                  onCheck={(check) => {
                    restFormRef.current.setFieldsValue({ permission_ids: check });
                  }}
                  fieldNames={{
                    title: 'name',
                    key: 'id',
                  }}
                  treeData={permissionTreeData}
                />
              }
            </ProForm.Item>
          </ProForm>
        </>
      </PageContainer>
    </>
  );
};

