import BaseForm from '@/components/BaseForm';
import { useIntl } from '@umijs/max';
import { Form, FormProps } from 'antd';
import { useEffect } from 'react';
type RoleChangeFormType = {
  initialValues?: {
    [key: string]: any;
  };
  onSave: (values: any) => void;
  submitRole: number;
  option:any
};

const RoleChangeForm = ({
  onSave,
  initialValues,
  submitRole,
  option,
}: RoleChangeFormType) => {
  const [form] = Form.useForm();
  const intl = useIntl();
  // console.log(option, 'option');
  const config: FormProps = {
    form: form,
    layout: 'vertical',
    initialValues: { ...initialValues },
  };
  let itemColumn = [
    {
      type: 'select',
      options: option,
      itemProps: {
        name: 'roleIds',
        rules: [{ required: true }],
        label:intl.formatMessage({
          id: 'userMange.columns.RoleName',
          defaultMessage: 'RoleName',
        }),
      },
      elementProps: {
        mode: 'multiple',
        filterOption:(input:any, option:any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
    },
  ];
  useEffect(() => {
    // 校验表单，成功提交表单的数据给onSave
    if (submitRole) {
      form
        .validateFields()
        .then((values) => {
          console.log(values, 'values');
          onSave(values);
        }); 
    } 
    else {
      form.resetFields();
    }
  }, [submitRole]);

  return <BaseForm config={config} itemColumn={itemColumn} />;
};

export default RoleChangeForm;