import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useState } from "react"
import style from "./index.module.scss"
import DotLoading from "@/components/dotLoading"

type Params = {
    styleObj?: Object,
    selfonScrollToLower?: () => void,
    hasMore?: false|true,
    children?: ReactNode,
    lowerThresholdNum?: number,
    
}
export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5}: Params) => {
    const scrollToLower = () => {
        selfonScrollToLower?.()
    }
    return (
        <>
            <ScrollView 
                style={styleObj}  
                className={style.scroll_main} 
                scrollY 
                onScrollToLower={() => scrollToLower()}
                lowerThreshold={lowerThresholdNum}
            >
                <View>
                    {children}
                </View>
                <View className={style.infinite_scroll}>
                    {
                        hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
                        <View>没有更多了</View>
                    }
                </View>
                <View className="common_safe_area_y"></View>
            </ScrollView>
            
        </>
    )
})