ckb-SuperAdmin/nkebao/src/pages/scenarios/plan/new/index.tsx

import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { message } from "antd";
import NavCommon from "@/components/NavCommon";
import BasicSettings from "./steps/BasicSettings";
import FriendRequestSettings from "./steps/FriendRequestSettings";
import MessageSettings from "./steps/MessageSettings";
import Layout from "@/components/Layout/Layout";
import StepIndicator from "@/components/StepIndicator";
import {
  getScenarioTypes,
  createPlan,
  getPlanDetail,
  updatePlan,
} from "./index.api";

// 步骤定义 - 只保留三个步骤
const steps = [
  { id: 1, title: "步骤一", subtitle: "基础设置" },
  { id: 2, title: "步骤二", subtitle: "好友申请设置" },
  { id: 3, title: "步骤三", subtitle: "消息设置" },
];

// 类型定义
interface FormData {
  name: string;
  scenario: number;
  posters: any[]; // 后续可替换为具体Poster类型
  device: string[];
  remarkType: string;
  greeting: string;
  addInterval: number;
  startTime: string;
  endTime: string;
  enabled: boolean;
  sceneId: string | number;
  remarkFormat: string;
  addFriendInterval: number;
}

export default function NewPlan() {
  const router = useNavigate();
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState<FormData>({
    name: "",
    scenario: 1,
    posters: [],
    device: [],
    remarkType: "phone",
    greeting: "你好，请通过",
    addInterval: 1,
    startTime: "09:00",
    endTime: "18:00",
    enabled: true,
    sceneId: "",
    remarkFormat: "",
    addFriendInterval: 1,
  });
  const [sceneList, setSceneList] = useState<any[]>([]);
  const [sceneLoading, setSceneLoading] = useState(true);
  const { scenarioId, planId } = useParams<{
    scenarioId: string;
    planId: string;
  }>();
  const [isEdit, setIsEdit] = useState(false);
  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    setSceneLoading(true);
    //获取场景类型
    getScenarioTypes()
      .then((data) => {
        setSceneList(data || []);
      })
      .catch((err) => {
        message.error(err.message || "获取场景类型失败");
      })
      .finally(() => setSceneLoading(false));
    if (planId) {
      setIsEdit(true);
      //获取计划详情

      const detail = await getPlanDetail(planId);
      setFormData((prev) => ({
        ...prev,
        name: detail.name ?? "",
        scenario: Number(detail.scenario) || 1,
        posters: detail.posters ?? [],
        device: detail.device ?? [],
        remarkType: detail.remarkType ?? "phone",
        greeting: detail.greeting ?? "",
        addInterval: detail.addInterval ?? 1,
        startTime: detail.startTime ?? "09:00",
        endTime: detail.endTime ?? "18:00",
        enabled: detail.enabled ?? true,
        sceneId: Number(detail.scenario) || 1,
        remarkFormat: detail.remarkFormat ?? "",
        addFriendInterval: detail.addFriendInterval ?? 1,
        tips: detail.tips ?? "",
      }));
    } else {
      if (scenarioId) {
        setFormData((prev) => ({
          ...prev,
          ...{ scenario: Number(scenarioId) || 1 },
        }));
      }
    }
  };

  // 更新表单数据
  const onChange = (data: any) => {
    setFormData((prev) => ({ ...prev, ...data }));
  };

  // 处理保存
  const handleSave = async () => {
    try {
      let result;
      if (isEdit && planId) {
        // 编辑：拼接后端需要的完整参数
        const editData = {
          ...formData,
          id: Number(planId),
          planId: Number(planId),
          // 兼容后端需要的字段
          // 你可以根据实际需要补充其它字段
        };
        result = await updatePlan(planId, editData);
      } else {
        // 新建
        result = await createPlan(formData);
      }
      message.success(isEdit ? "计划已更新" : "获客计划已创建");
      const sceneItem = sceneList.find((v) => formData.scenario === v.id);
      router(`/scenarios/list/${formData.sceneId}/${sceneItem.name}`);
    } catch (error) {
      message.error(
        error instanceof Error
          ? error.message
          : typeof error === "string"
            ? error
            : isEdit
              ? "更新计划失败，请重试"
              : "创建计划失败，请重试"
      );
    }
  };

  // 下一步
  const handleNext = () => {
    if (currentStep === steps.length) {
      handleSave();
    } else {
      setCurrentStep((prev) => prev + 1);
    }
  };

  // 上一步
  const handlePrev = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1));
  };

  // 渲染当前步骤内容
  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <BasicSettings
            isEdit={isEdit}
            formData={formData}
            onChange={onChange}
            onNext={handleNext}
            sceneList={sceneList}
            sceneLoading={sceneLoading}
          />
        );
      case 2:
        return (
          <FriendRequestSettings
            formData={formData}
            onChange={onChange}
            onNext={handleNext}
            onPrev={handlePrev}
          />
        );
      case 3:
        return (
          <MessageSettings
            formData={formData}
            onChange={onChange}
            onNext={handleSave}
            onPrev={handlePrev}
          />
        );
      default:
        return null;
    }
  };

  return (
    <Layout
      header={
        <>
          <NavCommon title={isEdit ? "编辑场景计划" : "新建场景计划"} />
          <StepIndicator currentStep={currentStep} steps={steps} />
        </>
      }
    >
      {renderStepContent()}
    </Layout>
  );
}