// 创建弹窗
import React, { useEffect, useRef, useState } from 'react';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import Modal, { ModalProps } from '@/components/Modal';
import { Form, FormItem, Input, TreeSelect } from '@formily/antd';
import { addUser } from '@/services/system/accountManage';
import routes from '@/routes';

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

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

const form = createForm({});

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

  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();
  };

  const onChange = (newValue: string[]) => {};

  useEffect(() => {
    const array = routes;
    array.forEach((item: any, index) => {
      if (item.name == '' || item.name == null || item.name == undefined) {
        array.splice(index, 1);
        console.log('array.splice(index, 1);');
      }
      item.key = index + 1;
      if (Object.prototype.hasOwnProperty.call(item, 'routes')) {
        item.routes?.forEach((item2: any, index2: number) => {
          if (item2.name == '' || item2.name == null || item2.name == undefined) {
            item.routes.splice(index2, 1);
            console.log('item.routes.splice(index2, 1);');
          }
          item2.key = parseInt(index + 1 + '' + index2);
        });
      }
    });
    console.log('array = ', array);
    setTreeData(array);
  }, []);

  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-validator={{
              required: true,
            }}
            x-decorator="FormItem"
            x-component="TreeSelect"
            x-component-props={{
              fieldNames: { label: 'name', children: 'routes', value: 'name' },
              onChange: onChange,
              treeCheckable: true,
              treeData: treeData,
              placeholder: '请选择权限',
            }}
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default AddAccountModal;
