import { Modal, Spin, Table, Tree } from "antd";
import React, { useState } from "react";
import { GetOtherStepNodes } from "@/api/node";
import { ModalProps } from "./props";
import { useRequest } from "umi";

/**
 * 流程节点弹窗
 * @returns
 */
export default function NodeModal(props: ModalProps & { params: any }) {
  const [open, setOpen] = useState(props.defaultOpen ?? false);
  const [selectedRows, setSelectedRows] = useState<any[]>([]);

  const { data, loading } = useRequest(GetOtherStepNodes, {
    defaultParams: [props.params],
  });

  const handleCancel = () => {
    props.onClose?.();
    setOpen(false);
  };

  const handleOk = () => {
    props.onChange?.(selectedRows);
    setOpen(false);
  };

  const handleSelect = (_keys: React.Key[], rows: any[]) => {
    setSelectedRows(rows);
  };

  return (
    <Modal
      title="请选择流程节点"
      width={440}
      open={open}
      onCancel={handleCancel}
      onOk={handleOk}
    >
      <Table
        loading={loading}
        rowSelection={{
          type: "radio",
          selectedRowKeys: selectedRows.map((item) => item?.id),
          onChange: handleSelect,
        }}
        rowKey={"id"}
        columns={[
          { title: "节点代码", dataIndex: "code" },
          { title: "节点名称", dataIndex: "displayName" },
        ]}
        dataSource={data?.result || []}
      />
    </Modal>
  );
}
