import { Form, Input, Modal, TreeSelect, message } from 'antd';
import React, {
  useState,
  useEffect,
  useRef,
  forwardRef,
  useImperativeHandle,
} from 'react';
import * as d3 from 'd3';
import './index.less';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
  const [treeData, setData] = useState([]);
  const [form] = Form.useForm();
  const formRef = useRef(null);

  useImperativeHandle(ref, () => ({
    getTreeData() {
      form.resetFields();
      d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then(
        (data) => {
          setData(data.departmentTree);
        },
      );
    },
  }));

  /**
   * 根节点树异步加载
   * @param {} parentId
   * @returns
   */
  const onRootLoadData = (treeNode) =>
    new Promise((resolve) => {
      const { id } = treeNode.props;
      setTimeout(() => {
        d3.json(
          `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`,
        ).then((data) => {
          let arr = [...treeData, ...data.departmentTree];
          setData(arr);
        });
        resolve(undefined);
      }, 200);
    });

  return (
    <Modal
      open={open}
      title="部门合并"
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form ref={formRef} {...layout} form={form} name="form_in_modal">
        <Form.Item
          name="department"
          label="合并到部门"
          rules={[
            {
              required: true,
              message: '【合并到部门】为必填项!',
            },
          ]}
        >
          <TreeSelect
            treeDataSimpleMode
            allowClear
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            loadData={onRootLoadData}
            treeData={treeData}
          />
        </Form.Item>

        <Form.Item
          name="mergeName"
          label="合并后名称"
          rules={[
            {
              required: true,
              message: '【合并后的名称】为必填项!',
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
});
export default MergeDialog;
