vf_react/src/views/Community/components/HeroPanel/hooks/useDetailModalState.js

// HeroPanel - DetailModal 状态管理 Hook
// 整合 DetailModal 组件的所有状态，使主组件更简洁

import { useState, useCallback } from "react";

/**
 * DetailModal 状态管理 Hook
 * 将 17 个 useState 整合为一个自定义 hook
 */
export const useDetailModalState = () => {
  // ========== UI 状态 ==========
  // 视图模式：板块视图 | 个股视图
  const [ztViewMode, setZtViewMode] = useState("sector"); // 'sector' | 'stock'
  // 板块筛选（个股视图时使用）
  const [selectedSectorFilter, setSelectedSectorFilter] = useState(null);
  // 展开的涨停原因
  const [expandedReasons, setExpandedReasons] = useState({});

  // ========== 弹窗/抽屉状态 ==========
  // 内容详情抽屉
  const [detailDrawerVisible, setDetailDrawerVisible] = useState(false);
  const [selectedContent, setSelectedContent] = useState(null);
  // 板块股票弹窗
  const [sectorStocksModalVisible, setSectorStocksModalVisible] = useState(false);
  const [selectedSectorInfo, setSelectedSectorInfo] = useState(null);
  // 事件关联股票抽屉
  const [stocksDrawerVisible, setStocksDrawerVisible] = useState(false);
  const [selectedEventStocks, setSelectedEventStocks] = useState([]);
  const [selectedEventTime, setSelectedEventTime] = useState(null);
  const [selectedEventTitle, setSelectedEventTitle] = useState("");
  // K线弹窗
  const [klineModalVisible, setKlineModalVisible] = useState(false);
  const [selectedKlineStock, setSelectedKlineStock] = useState(null);
  // 关联事件弹窗
  const [relatedEventsModalVisible, setRelatedEventsModalVisible] = useState(false);
  const [selectedRelatedEvents, setSelectedRelatedEvents] = useState({
    sectorName: "",
    events: [],
  });

  // ========== 数据加载状态 ==========
  const [stockQuotes, setStockQuotes] = useState({});
  const [stockQuotesLoading, setStockQuotesLoading] = useState(false);

  // ========== 操作方法 ==========

  // 打开内容详情
  const openContentDetail = useCallback((content) => {
    setSelectedContent(content);
    setDetailDrawerVisible(true);
  }, []);

  // 关闭内容详情
  const closeContentDetail = useCallback(() => {
    setDetailDrawerVisible(false);
    setSelectedContent(null);
  }, []);

  // 打开板块股票弹窗
  const openSectorStocks = useCallback((sectorInfo) => {
    setSelectedSectorInfo(sectorInfo);
    setSectorStocksModalVisible(true);
  }, []);

  // 关闭板块股票弹窗
  const closeSectorStocks = useCallback(() => {
    setSectorStocksModalVisible(false);
    setSelectedSectorInfo(null);
  }, []);

  // 打开事件关联股票
  const openEventStocks = useCallback((stocks, time, title) => {
    setSelectedEventStocks(stocks);
    setSelectedEventTime(time);
    setSelectedEventTitle(title);
    setStocksDrawerVisible(true);
  }, []);

  // 关闭事件关联股票
  const closeEventStocks = useCallback(() => {
    setStocksDrawerVisible(false);
    setSelectedEventStocks([]);
    setSelectedEventTime(null);
    setSelectedEventTitle("");
  }, []);

  // 打开 K 线弹窗
  const openKlineModal = useCallback((stock) => {
    setSelectedKlineStock(stock);
    setKlineModalVisible(true);
  }, []);

  // 关闭 K 线弹窗
  const closeKlineModal = useCallback(() => {
    setKlineModalVisible(false);
    setSelectedKlineStock(null);
  }, []);

  // 打开关联事件弹窗
  const openRelatedEvents = useCallback((sectorName, events) => {
    setSelectedRelatedEvents({ sectorName, events });
    setRelatedEventsModalVisible(true);
  }, []);

  // 关闭关联事件弹窗
  const closeRelatedEvents = useCallback(() => {
    setRelatedEventsModalVisible(false);
    setSelectedRelatedEvents({ sectorName: "", events: [] });
  }, []);

  // 切换展开原因
  const toggleExpandedReason = useCallback((stockCode) => {
    setExpandedReasons((prev) => ({
      ...prev,
      [stockCode]: !prev[stockCode],
    }));
  }, []);

  // 重置所有状态（用于关闭弹窗时）
  const resetAllState = useCallback(() => {
    setZtViewMode("sector");
    setSelectedSectorFilter(null);
    setExpandedReasons({});
    setDetailDrawerVisible(false);
    setSelectedContent(null);
    setSectorStocksModalVisible(false);
    setSelectedSectorInfo(null);
    setStocksDrawerVisible(false);
    setSelectedEventStocks([]);
    setSelectedEventTime(null);
    setSelectedEventTitle("");
    setKlineModalVisible(false);
    setSelectedKlineStock(null);
    setRelatedEventsModalVisible(false);
    setSelectedRelatedEvents({ sectorName: "", events: [] });
    setStockQuotes({});
    setStockQuotesLoading(false);
  }, []);

  return {
    // UI 状态 + setters
    ztViewMode,
    setZtViewMode,
    selectedSectorFilter,
    setSelectedSectorFilter,
    expandedReasons,
    setExpandedReasons,

    // 弹窗状态 + setters
    detailDrawerVisible,
    setDetailDrawerVisible,
    selectedContent,
    setSelectedContent,
    sectorStocksModalVisible,
    setSectorStocksModalVisible,
    selectedSectorInfo,
    setSelectedSectorInfo,
    stocksDrawerVisible,
    setStocksDrawerVisible,
    selectedEventStocks,
    setSelectedEventStocks,
    selectedEventTime,
    setSelectedEventTime,
    selectedEventTitle,
    setSelectedEventTitle,
    klineModalVisible,
    setKlineModalVisible,
    selectedKlineStock,
    setSelectedKlineStock,
    relatedEventsModalVisible,
    setRelatedEventsModalVisible,
    selectedRelatedEvents,
    setSelectedRelatedEvents,

    // 数据状态 + setters
    stockQuotes,
    setStockQuotes,
    stockQuotesLoading,
    setStockQuotesLoading,

    // 操作方法（高级封装）
    openContentDetail,
    closeContentDetail,
    openSectorStocks,
    closeSectorStocks,
    openEventStocks,
    closeEventStocks,
    openKlineModal,
    closeKlineModal,
    openRelatedEvents,
    closeRelatedEvents,
    toggleExpandedReason,
    resetAllState,
  };
};

export default useDetailModalState;