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';
import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
import './index.less';
import { getLabel } from '../../util/i18n.js';

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

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

    const [treeLine, setTreeLine] = useState(true);

    useImperativeHandle(ref, () => ({
      getTreeData() {
        form.resetFields();
        d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then(
          (data) => {
            data.departmentTree.map((item, index) => {
              item.icon = <HomeOutlined />;
            });
            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) => {
            data.departmentTree.map((item, index) => {
              if (item.key.indexOf('d') > -1) {
                item.icon = <FolderOutlined />;
              } else {
                item.icon = <HomeOutlined />;
              }
            });
            let arr = [...treeData, ...data.departmentTree];
            setData(arr);
          });
          resolve(undefined);
        }, 200);
      });

    return (
      <Modal
        open={open}
        title={getLabel(547508, labelData)}
        okText={getLabel(547319, labelData)}
        cancelText={getLabel(547318, labelData)}
        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={getLabel(547264, labelData)}
            rules={[
              {
                required: true,
                message: `${getLabel(547509, labelData)}`,
              },
            ]}
          >
            <TreeSelect
              className="custom-tree-select"
              treeDataSimpleMode
              allowClear
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              loadData={onRootLoadData}
              treeData={treeData}
              treeIcon
            />
          </Form.Item>

          <Form.Item
            name="mergeName"
            label={getLabel(547265, labelData)}
            rules={[
              {
                required: true,
                message: `${getLabel(547510, labelData)}`,
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    );
  },
);
export default MergeDialog;