import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormRadio,
  ProFormSelect
} from '@ant-design/pro-components';
import { Form, Modal } from 'antd';
import { useIntl, FormattedMessage } from '@umijs/max';
import { findAllSysRole } from '@/services/system/role';





const UserForm: React.FC = (props: any) => {

  const [form] = Form.useForm();

  const { values } = props;

  console.log(values, 'valuesvaluesvaluesvalues');


  useEffect(() => {
    form.resetFields();
    form.setFieldsValue(values);
  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: any) => {
    props.onSubmit(values);
  };

  return (
    <Modal
      width={640}
      title={'编辑用户信息'}
      open={props.open}
      forceRender
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        grid={true}
        submitter={false}
        layout="horizontal"
        onFinish={handleFinish}>
        <ProFormDigit
          name="id"
          label={'用户ID'}
          disabled
          hidden={true}
        />

        <ProForm.Group>
          <ProFormText
            name="username"
            label={'用户名'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入用户名"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="请输入用户名！" defaultMessage="请输入用户名！" />,
              },
            ]}
          />
          <ProFormText
            name="nickName"
            label={'用户昵称'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入用户昵称"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="请输入用户昵称！" defaultMessage="请输入用户昵称！" />,
              },
            ]}
          />
          <ProFormText
            name="password"
            label={'用户密码'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入用户密码"
            hidden={values?.id}
            rules={[
              {
                required: values?.id ? false : true,
                message: <FormattedMessage id="请输入用户密码！" defaultMessage="请输入用户密码！" />,
              },
            ]}
          />
          <ProFormText
            name="phoneNumber"
            label={'手机号'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入手机号"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="请输入手机号！" defaultMessage="请输入手机号！" />,
              },
            ]}
          />
          <ProFormText
            name="email"
            label={'邮箱'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入邮箱"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            name="roleIds"
            label={'选择角色'}
            colProps={{ md: 24, xl: 24 }}
            placeholder="请选择角色"
            fieldProps={
              {
                mode: "multiple",
                fieldNames: {
                  label: 'roleName',
                  value: 'id'
                },
                defaultValue: () => {
                  return values?.sysRoleDTOList?.map((item: any) => item.id)
                }
              }
            }
            request={async () => {
              let { data } = await findAllSysRole()
              return data
            }}
          />
        </ProForm.Group>



        <ProFormRadio.Group
          name="userType"
          options={[
            {
              label: '系统用户',
              value: 0,
            },
          ]}
          label={'用户类型'}
          colProps={{ md: 12, xl: 12 }}
        />
        <ProFormRadio.Group
          name="sex"
          options={[
            {
              label: '男',
              value: 0,
            },
            {
              label: '女',
              value: 1,
            },
            {
              label: '未知',
              value: 2,
            },
          ]}
          label={'性别'}
          colProps={{ md: 12, xl: 12 }}
        />
      </ProForm>
    </Modal>
  );
};

export default UserForm;