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

export type StatusParam = 0|1|2|3

type Params = {
    styleObj?: Object,
    selfonScrollToLower?: () => void,
    hasMore?: false|true, 
    moreStatus?: false|true,
    statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
    children?: ReactNode,
    lowerThresholdNum?: number,
    selfOnScrollToUpper?:() => void
    selfOnScroll?:(val:any) => void
    selfOnRefresherPulling?: () => void
    selfOnRefresherRefresh?: () => void
    selfOnRefresherRestore?: () => void
    selfOnRefresherAbort?: () => void
    paddingBottom?: number,
    refresherTriggered?: true|false,
    refresherEnabled?: true|false,
}
export default memo(({
    styleObj, 
    selfonScrollToLower, 
    selfOnScrollToUpper,
    selfOnScroll,
    selfOnRefresherPulling,
    selfOnRefresherRefresh,
    selfOnRefresherRestore,
    selfOnRefresherAbort,
    hasMore=true, 
    children, 
    lowerThresholdNum = 5, 
    paddingBottom = 0,
    refresherTriggered = false,
    refresherEnabled = false,
    moreStatus = true,
    statusMore = 0
}: Params) => {
    const scrollToLower = () => {
        selfonScrollToLower?.()
    }
    const scrollToUpper = () => {
        selfOnScrollToUpper?.()
    }
    const scroll = (e) => {
        selfOnScroll?.(e)
    }
    const refresherPulling = () => {
        selfOnRefresherPulling?.()
    }
    const refresherRefresh = () => {
        selfOnRefresherRefresh?.()
    }
    const refresherRestore = () => {
        selfOnRefresherRestore?.()
    }
    const refresherAbort = () => {
        selfOnRefresherAbort?.()
    }

    return (
        <>
            <ScrollView 
                style={styleObj}  
                className={style.scroll_main} 
                scrollY 
                onScrollToLower={() => scrollToLower()}
                onScrollToUpper={() => scrollToUpper()}
                onScroll={(e) => scroll(e)}
                lowerThreshold={lowerThresholdNum}
                refresherEnabled = {refresherEnabled}
                refresherTriggered = {refresherTriggered}
                onRefresherPulling = {() => refresherPulling()}
                onRefresherRefresh = {() => refresherRefresh()}
                onRefresherRestore = {() => refresherRestore()}
                onRefresherAbort = {() => refresherAbort()}
                refresherBackground ='#F8F8F8'
            >
                {!moreStatus&&<>
                    <View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
                        {children}
                    </View>
                </>||
                <>
                    {(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
                            {children}
                            <View className={style.infinite_scroll}>
                                {
                                    (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
                                    <View className={style.noMore}>没有更多数据了</View>
                                }
                            </View>
                        </View>
                    }
                    {(statusMore == 0)&&<LoadingCard/>}
                    {(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
                </>}
                
                <View className="common_safe_area_y"></View>
            </ScrollView>
        </>
    )
})