import { ref, watch, onMounted, nextTick } from 'vue'

export const useOverflow = (elementRef, dataRef) => {
  // 根据 elementRef 类型来初始化 isOverflow
  const isOverflow = Array.isArray(elementRef.value) ? ref([]) : ref(false)

  const checkOverflow = (element) => {
    if (element) {
      return element.scrollWidth > element.clientWidth
    }
    return false
  }

  // 用于处理单个或多个元素的溢出检查
  const updateOverflowStatus = () => {
    if (Array.isArray(elementRef.value)) {
      // 如果是数组，检查每个元素
      isOverflow.value = elementRef.value.map((el) => checkOverflow(el))
    } else {
      // 如果是单个元素，直接返回布尔值
      isOverflow.value = checkOverflow(elementRef.value)
    }
  }

  // 初次 mounted 时检查是否溢出
  onMounted(() => {
    nextTick(() => {
      updateOverflowStatus()
    })
  })

  // 监听数据变化，更新溢出状态
  watch(
    () => dataRef,
    () => {
      nextTick(() => {
        updateOverflowStatus()
      })
    },
    {
      deep: true,
      immediate: true
    }
  )

  return {
    isOverflow
  }
}