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

/**
 * 岗位级别范围弹窗
 * @returns
 */
export default function Level2LevelModal(props: ModalProps) {
  const [open, setOpen] = useState(props.defaultOpen ?? false);
  const [selectedRows, setSelectedRows] = useState<any[]>([]);
  const [selectedRows2, setSelectedRows2] = useState<any[]>([]);

  const { data, loading } = useRequest(GetEnums, {
    defaultParams: [
      {
        id: "JobLevel",
      },
    ],
  });

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

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

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

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

  return (
    <Modal
      title="请选择岗位级别"
      width={880}
      open={open}
      onCancel={handleCancel}
      onOk={handleOk}
    >
      <div className="flex gap-12px">
        <Table
          loading={loading}
          rowSelection={{
            type: "radio",
            selectedRowKeys: selectedRows.map((item) => item?.id),
            onChange: handleSelect,
          }}
          rowKey={"id"}
          columns={[
            { title: "名称", dataIndex: "name" },
            { title: "值", dataIndex: "value" },
          ]}
          dataSource={data?.result || []}
        />
        <Table
          loading={loading}
          rowSelection={{
            type: "radio",
            selectedRowKeys: selectedRows2.map((item) => item?.id),
            onChange: handleSelect2,
          }}
          rowKey={"id"}
          columns={[
            { title: "名称", dataIndex: "name" },
            { title: "值", dataIndex: "value" },
          ]}
          dataSource={data?.result || []}
        />
      </div>
    </Modal>
  );
}
