DataMate/frontend/src/pages/DataManagement/Detail/components/ImportConfiguration.tsx

import { Select, Input, Form, Radio, Modal, Button, UploadFile, Switch, Tooltip } from "antd";
import { InboxOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import { dataSourceOptions } from "../../dataset.const";
import { Dataset, DataSource } from "../../dataset.model";
import { useEffect, useState } from "react";
import { queryTasksUsingGet } from "@/pages/DataCollection/collection.apis";
import { updateDatasetByIdUsingPut } from "../../dataset.api";
import { sliceFile } from "@/utils/file.util";
import Dragger from "antd/es/upload/Dragger";

/**
 * 按行分割文件
 * @param file 原始文件
 * @returns 分割后的文件列表，每行一个文件
 */
async function splitFileByLines(file: UploadFile): Promise<UploadFile[]> {
  const originFile = (file as any).originFileObj || file;
  if (!originFile || typeof originFile.text !== "function") {
    return [file];
  }

  const text = await originFile.text();
  if (!text) return [file];

  // 按行分割并过滤空行
  const lines = text.split(/\r?\n/).filter((line: string) => line.trim() !== "");
  if (lines.length === 0) return [];

  // 生成文件名：原文件名_序号.扩展名
  const nameParts = file.name.split(".");
  const ext = nameParts.length > 1 ? "." + nameParts.pop() : "";
  const baseName = nameParts.join(".");
  const padLength = String(lines.length).length;

  return lines.map((line: string, index: number) => {
    const newFileName = `${baseName}_${String(index + 1).padStart(padLength, "0")}${ext}`;
    const blob = new Blob([line], { type: "text/plain" });
    const newFile = new File([blob], newFileName, { type: "text/plain" });
    return {
      uid: `${file.uid}-${index}`,
      name: newFileName,
      size: newFile.size,
      type: "text/plain",
      originFileObj: newFile as any,
    } as UploadFile;
  });
}

export default function ImportConfiguration({
  data,
  open,
  onClose,
  updateEvent = "update:dataset",
  prefix,
}: {
  data: Dataset | null;
  open: boolean;
  onClose: () => void;
  updateEvent?: string;
  prefix?: string;
}) {
  const [form] = Form.useForm();
  const [collectionOptions, setCollectionOptions] = useState([]);
  const [importConfig, setImportConfig] = useState<any>({
    source: DataSource.UPLOAD,
  });
  const [currentPrefix, setCurrentPrefix] = useState<string>("");

  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // 本地上传文件相关逻辑

  const resetFiles = () => {
    setFileList([]);
  };

  const handleUpload = async (dataset: Dataset) => {
    let filesToUpload = fileList;

    // 如果启用分行分割，处理文件
    if (importConfig.splitByLine) {
      const splitResults = await Promise.all(
        fileList.map((file) => splitFileByLines(file))
      );
      filesToUpload = splitResults.flat();
    }

    // 计算分片列表
    const sliceList = filesToUpload.map((file) => {
      const originFile = (file as any).originFileObj || file;
      const slices = sliceFile(originFile);
      return {
        originFile: file,
        slices,
        name: file.name,
        size: (file as any).size || originFile.size || 0,
      };
    });

    console.log("[ImportConfiguration] Uploading with currentPrefix:", currentPrefix);
    window.dispatchEvent(
      new CustomEvent("upload:dataset", {
        detail: {
          dataset,
          files: sliceList,
          updateEvent,
          hasArchive: importConfig.hasArchive,
          prefix: currentPrefix,
        },
      })
    );
    resetFiles();
  };

  const handleBeforeUpload = (_, files: UploadFile[]) => {
    setFileList([...fileList, ...files]);
    return false;
  };

  const handleRemoveFile = (file: UploadFile) => {
    setFileList((prev) => prev.filter((f) => f.uid !== file.uid));
  };

  const fetchCollectionTasks = async () => {
    if (importConfig.source !== DataSource.COLLECTION) return;
    try {
      const res = await queryTasksUsingGet({ page: 0, size: 100 });
      const options = res.data.content.map((task: any) => ({
        label: task.name,
        value: task.id,
      }));
      setCollectionOptions(options);
    } catch (error) {
      console.error("Error fetching collection tasks:", error);
    }
  };

  const resetState = () => {
    console.log('[ImportConfiguration] resetState called, preserving currentPrefix:', currentPrefix);
    form.resetFields();
    setFileList([]);
    form.setFieldsValue({ files: null });
    setImportConfig({ source: importConfig.source ? importConfig.source : DataSource.UPLOAD });
    console.log('[ImportConfiguration] resetState done, currentPrefix still:', currentPrefix);
  };

  const handleImportData = async () => {
    if (!data) return;
    console.log('[ImportConfiguration] handleImportData called, currentPrefix:', currentPrefix);
    if (importConfig.source === DataSource.UPLOAD) {
      await handleUpload(data);
    } else if (importConfig.source === DataSource.COLLECTION) {
      await updateDatasetByIdUsingPut(data.id, {
        ...importConfig,
      });
    }
    onClose();
  };

  useEffect(() => {
    if (open) {
      setCurrentPrefix(prefix || "");
      console.log('[ImportConfiguration] Modal opened with prefix:', prefix);
      resetState();
      fetchCollectionTasks();
    }
  }, [open]);

  // Separate effect for fetching collection tasks when source changes
  useEffect(() => {
    if (open && importConfig.source === DataSource.COLLECTION) {
      fetchCollectionTasks();
    }
  }, [importConfig.source]);

  return (
    <Modal
      title="导入数据"
      open={open}
      width={600}
      onCancel={() => {
        onClose();
        resetState();
      }}
      maskClosable={false}
      footer={
        <>
          <Button onClick={onClose}>取消</Button>
          <Button
            type="primary"
            disabled={!fileList?.length && !importConfig.dataSource}
            onClick={handleImportData}
          >
            确定
          </Button>
        </>
      }
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={importConfig || {}}
        onValuesChange={(_, allValues) => setImportConfig(allValues)}
      >
        <Form.Item
          label="数据源"
          name="source"
          rules={[{ required: true, message: "请选择数据源" }]}
        >
          <Radio.Group
            buttonStyle="solid"
            options={dataSourceOptions}
            optionType="button"
          />
        </Form.Item>
        {importConfig?.source === DataSource.COLLECTION && (
          <Form.Item name="dataSource" label="归集任务" required>
            <Select placeholder="请选择归集任务" options={collectionOptions} />
          </Form.Item>
        )}

        {/* obs import */}
        {importConfig?.source === DataSource.OBS && (
          <div className="grid grid-cols-2 gap-3 p-4 bg-blue-50 rounded-lg">
            <Form.Item
              name="endpoint"
              rules={[{ required: true }]}
              label="Endpoint"
            >
              <Input
                className="h-8 text-xs"
                placeholder="obs.cn-north-4.myhuaweicloud.com"
              />
            </Form.Item>
            <Form.Item
              name="bucket"
              rules={[{ required: true }]}
              label="Bucket"
            >
              <Input className="h-8 text-xs" placeholder="my-bucket" />
            </Form.Item>
            <Form.Item
              name="accessKey"
              rules={[{ required: true }]}
              label="Access Key"
            >
              <Input className="h-8 text-xs" placeholder="Access Key" />
            </Form.Item>
            <Form.Item
              name="secretKey"
              rules={[{ required: true }]}
              label="Secret Key"
            >
              <Input
                type="password"
                className="h-8 text-xs"
                placeholder="Secret Key"
              />
            </Form.Item>
          </div>
        )}

        {/* Local Upload Component */}
        {importConfig?.source === DataSource.UPLOAD && (
          <>
            <Form.Item
              label="自动解压上传的压缩包"
              name="hasArchive"
              valuePropName="checked"
              initialValue={true}
            >
              <Switch />
            </Form.Item>
            <Form.Item
              label={
                <span>
                  按分行分割{" "}
                  <Tooltip title="选中后，文本文件的每一行将被分割成独立文件">
                    <QuestionCircleOutlined style={{ color: "#999" }} />
                  </Tooltip>
                </span>
              }
              name="splitByLine"
              valuePropName="checked"
              initialValue={false}
            >
              <Switch />
            </Form.Item>
            <Form.Item
              label="上传文件"
              name="files"
              rules={[
                {
                  required: true,
                  message: "请上传文件",
                },
              ]}
            >
              <Dragger
                className="w-full"
                onRemove={handleRemoveFile}
                beforeUpload={handleBeforeUpload}
                multiple
              >
                <p className="ant-upload-drag-icon">
                  <InboxOutlined />
                </p>
                <p className="ant-upload-text">本地文件上传</p>
                <p className="ant-upload-hint">拖拽文件到此处或点击选择文件</p>
              </Dragger>
            </Form.Item>
          </>
        )}

        {/* Target Configuration */}
        {importConfig?.target && importConfig?.target !== DataSource.UPLOAD && (
          <div className="space-y-3 p-4 bg-blue-50 rounded-lg">
            {importConfig?.target === DataSource.DATABASE && (
              <div className="grid grid-cols-2 gap-3">
                <Form.Item
                  name="databaseType"
                  rules={[{ required: true }]}
                  label="数据库类型"
                >
                  <Select
                    className="w-full"
                    options={[
                      { label: "MySQL", value: "mysql" },
                      { label: "PostgreSQL", value: "postgresql" },
                      { label: "MongoDB", value: "mongodb" },
                    ]}
                  ></Select>
                </Form.Item>
                <Form.Item
                  name="tableName"
                  rules={[{ required: true }]}
                  label="表名"
                >
                  <Input className="h-8 text-xs" placeholder="dataset_table" />
                </Form.Item>
                <Form.Item
                  name="connectionString"
                  rules={[{ required: true }]}
                  label="连接字符串"
                >
                  <Input
                    className="h-8 text-xs col-span-2"
                    placeholder="数据库连接字符串"
                  />
                </Form.Item>
              </div>
            )}
          </div>
        )}
      </Form>
    </Modal>
  );
}