import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormSwitch,
  ProFormSelect
} from '@ant-design/pro-components';
import { Form, Modal, InputNumber } from 'antd';
import { useIntl } from '@umijs/max';
import FilesManager from '@/components/FilesManage/index';
import { usersPage } from '@/services/user/user';


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

  const [form] = Form.useForm();

  const { values } = props;

  useEffect(() => {
    console.log(values, 'values');

    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}
        submitter={false}
        layout="horizontal"
        onFinish={handleFinish}>
        <ProFormDigit
          name="id"
          label={'ID'}
          disabled
          hidden={true}
        />
        <ProForm.Group>
          <ProFormSelect
            width="md"
            colProps={{ xl: 8, md: 12 }}
            name="formUserId"
            label="推荐人"
            fieldProps={{
              fieldNames: {
                label: "userName",
                value: "id"
              },
              placeholder: "请输入用户名",
              showSearch: true
            }}
            request={async (param) => {
              const { success, data } = await usersPage({
                userName: param.keyWords
              });
              data.records.map((i) => {
                i.userName = i.userName + ' ' + i.phone
              })
              return data.records;
            }}
          />
        </ProForm.Group>


        <ProForm.Group>
          <ProFormText
            rules={[{ required: true, message: '请输入' }]}
            name="userName"
            label={'用户名'}
            placeholder="请输入用户名"
          />
          <ProFormText
            rules={[{ required: true, message: '请输入' }]}
            name="nickName"
            label={'昵称'}
            placeholder="请输入昵称"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            rules={[{ required: true, message: '请输入' }]}
            name="phone"
            label={'手机号'}
            placeholder="请输入手机号"
          />


          <ProFormText
            rules={!values.id ? [{ required: true, message: '请输入' }] : []}
            name="passwd"
            label={'密码'}
            placeholder="请输入密码"
          />

          <ProFormSwitch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            name="status"
            label="是否禁用"
            fieldProps={
              {
                defaultChecked: true
              }
            }
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProForm.Item label="头像" name="avatar">
            <FilesManager
              fileType="image"
              defaultValue={values?.avatar}
              count={1}
              mode=""
            />
          </ProForm.Item>
        </ProForm.Group>
      </ProForm>
    </Modal>
  );
};

export default RoleForm;
