import { ref, onMounted, onUnmounted } from 'vue'
import { debounce } from 'lodash' // 或手动实现防抖

/**
 * 动态计算网格列数的 Hook
 * @param {number[]} breakpoints - 断点数组，如 [400, 600] 表示 400px 和 600px 两个断点
 * @param {number[]} cols - 对应断点的列数，如 [2, 3, 4] 表示：
 *                         - 屏幕宽度 < 400px: 2 列
 *                         - 400px ≤ 宽度 < 600px: 3 列
 *                         - 宽度 ≥ 600px: 4 列
 * @returns {Object} { gridCol } - 返回响应式的列数引用
 */
export function useGridCol(breakpoints = [400, 600], cols = [2, 3, 4]) {
  const gridCol = ref(cols[cols.length - 1]) // 默认取最大值（大屏列数）

  const calculateGridCol = () => {
    const { windowWidth } = uni.getSystemInfoSync()
    let selectedCol = cols[cols.length - 1] // 默认值

    // 遍历断点，找到匹配的列数
    for (let i = 0; i < breakpoints.length; i++) {
      if (windowWidth < breakpoints[i]) {
        selectedCol = cols[i]
        break
      }
    }
    gridCol.value = selectedCol
  }

  onMounted(() => {
    calculateGridCol() // 初始化计算
    uni.onWindowResize(calculateGridCol) // 监听窗口变化
  })

  onUnmounted(() => {
    // 清理监听（部分平台可能需要手动实现）
    if (typeof uni.offWindowResize === 'function') {
      uni.offWindowResize(calculateGridCol)
    }
  })

  return { gridCol }
}