hand_device/web/src/views/HandDevice/Home/components/composables/useMapWatchers.ts

/**
 * 地图状态监听相关的 composable
 */
import { watch, type Ref } from 'vue'

interface WatchOptions {
  showMarkers: Ref<boolean>
  showTrajectories: Ref<boolean>
  showFences: Ref<boolean>
  showDrawFences: Ref<boolean>
  setMarkersVisible: (visible: boolean) => void
  setTrajectoriesVisible: (visible: boolean, markers?: any[]) => void
  setFencesVisible: (visible: boolean) => void
  toggleFenceDrawing: (
    isDrawing: boolean,
    onComplete?: (coordinates: [number, number][]) => void
  ) => void
  updateMarkers: (markers: any[]) => void
  markers: any[]
}

export const useMapWatchers = (options: WatchOptions) => {
  const {
    showMarkers,
    showTrajectories,
    showFences,
    showDrawFences,
    setMarkersVisible,
    setTrajectoriesVisible,
    setFencesVisible,
    toggleFenceDrawing,
    updateMarkers,
    markers
  } = options

  /**
   * 设置标记显示状态监听器
   */
  const setupMarkersWatcher = () => {
    return watch(showMarkers, (show) => {
      if (show) {
        // 显示标记时，隐藏轨迹
        if (showTrajectories.value) {
          showTrajectories.value = false
        }
      }
      setMarkersVisible(show)
    })
  }

  /**
   * 设置轨迹显示状态监听器
   */
  const setupTrajectoriesWatcher = () => {
    return watch(showTrajectories, (show) => {
      if (show) {
        // 显示轨迹时，隐藏标记
        if (showMarkers.value) {
          showMarkers.value = false
        }
        setTrajectoriesVisible(true, markers)
      } else {
        setTrajectoriesVisible(false)
        // 隐藏轨迹时，显示标记
        if (!showMarkers.value) {
          showMarkers.value = true
        }
      }
    })
  }

  /**
   * 设置围栏显示状态监听器
   */
  const setupFencesWatcher = () => {
    return watch(showFences, (show) => {
      setFencesVisible(show)
    })
  }

  /**
   * 设置围栏绘制状态监听器
   */
  const setupDrawFencesWatcher = () => {
    return watch(showDrawFences, (isDrawing) => {
      if (!isDrawing) {
        // 当关闭绘制时，停止绘制操作
        toggleFenceDrawing(false)
      }
    })
  }

  /**
   * 设置标记数据变化监听器
   */
  const setupMarkersDataWatcher = () => {
    return watch(
      markers,
      (newMarkers) => {
        if (newMarkers && newMarkers.length > 0) {
          console.log('Markers data changed, updating markers:', newMarkers.length)
          updateMarkers(newMarkers)
        }
      },
      { deep: true, immediate: false }
    )
  }

  /**
   * 初始化所有监听器
   */
  const setupAllWatchers = () => {
    const watchers = [
      setupMarkersWatcher(),
      setupTrajectoriesWatcher(),
      setupFencesWatcher(),
      setupDrawFencesWatcher(),
      setupMarkersDataWatcher()
    ]

    // 返回清理函数
    return () => {
      watchers.forEach((stopWatcher) => {
        if (typeof stopWatcher === 'function') {
          stopWatcher()
        }
      })
    }
  }

  return {
    setupMarkersWatcher,
    setupTrajectoriesWatcher,
    setupFencesWatcher,
    setupDrawFencesWatcher,
    setupMarkersDataWatcher,
    setupAllWatchers
  }
}