import { useElementSize } from '@vueuse/core'
import { computed } from 'vue'

/**
 * 监听容器高度变化的hook
 * @param {Ref<HTMLElement | null>} containerRef - 容器的ref引用
 * @param {boolean} [immediate=true] - 是否立即执行一次
 * @returns {Ref<number>} 容器的高度
 */
export function useContainerHeight(containerRef, immediate = true) {
  // 存储容器高度的响应式变量

  const { height } = useElementSize(containerRef)
  const containerHeight = computed(() => {
    let offset = height.value + 84
    return { height:  `calc(100% - ${offset}px)` }
  })
 
  
  return containerHeight;
}