// composables/useColumnCount.js
import {
    ref,
    onMounted,
    onUnmounted,
    watch
} from 'vue'

export function useColumnCount(onChange = () => {}) {
    const columnCount = ref(0)

    const calcColumn = () => {
        const width = uni.getSystemInfoSync().windowWidth
        const count = Math.min(5, Math.floor(width / 375) + 1)
        if (count !== columnCount.value) {
            columnCount.value = count
        }
    }

    onMounted(() => {
        columnCount.value = 2
        calcColumn()
        if (process.client) {
            window.addEventListener('resize', calcColumn)
        }
    })

    onUnmounted(() => {
        if (process.client) {
            window.removeEventListener('resize', calcColumn)
        }
    })

    // 列数变化时执行回调
    watch(columnCount, (newVal, oldVal) => {
        if (newVal !== oldVal) {
            onChange(newVal)
        }
    })

    return {
        columnCount,
    }
}