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

/**
 * 人员选择弹窗
 * @returns
 */
export default function UserModal(props: ModalProps) {
  const [open, setOpen] = useState(props.defaultOpen ?? false);
  const { data: groupTree, loading } = useRequest(GetGroupTree);
  const [selectKey, setSelectKey] = useState<Key[]>([]);
  const [selectRows, setSelectRows] = useState<any[]>([]);
  const [dataSource, setDataSource] = useState<any[]>([]);

  const {
    run,
    loading: loading2,
    data: userRes,
  } = useRequest(GetJobToUser, {
    manual: true,
    onSuccess: (res) => {
      setDataSource(res?.result || []);
    },
  });

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

  // 确定
  const handleOk = () => {
    props.onChange?.({
      groupId: selectKey?.[0],
      jobName: selectRows?.[0]?.jobUsers,
    });
  };

  useEffect(() => {
    if (selectKey?.[0]) {
      run({ GroupId: selectKey[0] + "" });
    }
  }, [selectKey]);

  return (
    <Modal
      title="选择岗位人员"
      width={880}
      open={open}
      onCancel={handleCancel}
      onOk={handleOk}
      destroyOnHidden
    >
      <div className="flex">
        <div className="w-260px mr-12px">
          <div className="h-28px leading-28px leading border border-1px bg-gray-100 px-12px text-gray-500">
            选择组织
          </div>
          <Spin spinning={loading}>
            <div className="p-12px">
              <Tree
                showLine
                selectedKeys={selectKey}
                onSelect={(keys) => setSelectKey(keys)}
                treeData={groupTree?.result || []}
                fieldNames={{ title: "text", key: "id" }}
              />
            </div>
          </Spin>
        </div>
        <div className="flex-1">
          <div className="h-28px leading-28px leading border border-1px bg-gray-100 px-12px text-gray-500 flex items-center gap-12px">
            选择人员
            <Input.Search
              placeholder="输入岗位/姓名搜索"
              className="flex-1"
              size="small"
              onSearch={(val) =>
                setDataSource(
                  (userRes?.result || []).filter(
                    (item: any) =>
                      item.jobUsers.includes(val) || item.jobName.includes(val) || item.groupName.includes(val)
                  )
                )
              }
            />
          </div>
          <Table
            rowKey={"id"}
            rowSelection={{
              type: "radio",
              onChange: (keys, rows) => setSelectRows(rows),
              selectedRowKeys: selectRows.map((item) => item?.id),
            }}
            columns={[
              { title: "人员", dataIndex: "jobUsers" },
              { title: "岗位名称", dataIndex: "jobName" },
              { title: "组织名称", dataIndex: "groupName" },
            ]}
            dataSource={dataSource}
            pagination={false}
            loading={loading2}
          />
        </div>
      </div>
    </Modal>
  );
}
