// 创建弹窗
import React, { useEffect, useRef, useState } from 'react';
import { createForm, FormPathPattern, onFieldReact } from '@formily/core';
import { createSchemaField } from '@formily/react';
import Modal, { ModalProps } from '@/components/Modal';
import { Form, FormItem, Input, Select } from '@formily/antd';
import { addUser } from '@/services/system/accountManage';
import { action } from '@formily/reactive';
import { getRoleList } from '@/services/system/role';

interface AddAccountModalPropsType extends ModalProps {
  onCancel: () => void;
  onOk: () => void;
}

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
  },
});

const AddAccountModal = ({ onOk, onCancel, ...rest }: AddAccountModalPropsType) => {
  const [roleListData, setRoleListData] = useState({});

  const useAsyncDataSource = (
    pattern: FormPathPattern,
    service: (field: Field) => Promise<{ label: string; value: any }[]>,
  ) => {
    onFieldReact(pattern, (field) => {
      service(field).then(
        action.bound((data) => {
          field.dataSource = data;
        }),
      );
    });
  };

  const form = createForm({
    effects: () => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      useAsyncDataSource('role', async (field) => {
        const list = roleListData;
        const option = [];
        for (let index = 0; index < list.items.length; index++) {
          const element = list.items[index];
          const item = {
            label: element.role_name,
            value: element.id,
          };
          option.push(item);
        }
        return option;
      });
    },
  });

  const getSelectData = async () => {
    const list = await getRoleList({ page: 1, size: 10 });
    setRoleListData(list);
  };

  useEffect(() => {
    getSelectData();
  }, []);

  const handleOk = async () => {
    form.submit(async () => {
      onOk();
      const formState = form.getFormState();
      formState.values.role = parseInt(formState.values.role);
      await addUser(formState.values);
    });
  };

  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal title="添加管理账号" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
      <Form form={form} labelCol={4} wrapperCol={18}>
        <SchemaField>
          <SchemaField.String
            name="name"
            title="账号名"
            required
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '请输入账号名',
            }}
          />
          <SchemaField.String
            name="password"
            title="密码"
            required
            x-validator={{
              required: true,
            }}
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '请输入密码',
            }}
          />
          <SchemaField.String
            name="role"
            title="角色"
            required
            x-decorator="FormItem"
            x-component="Select"
            x-component-props={{
              placeholder: '请选择角色',
            }}
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default AddAccountModal;