import InfiniteScroll from "@/components/infiniteScroll"
import { ReactNode, useEffect, useMemo, useRef, useState } from "react"
import { dataLoadingStatus, getFilterData } from "@/common/util";
import { alert, isEmptyObject } from "@/common/common";

interface Params{
    children?: ReactNode,
    query?: object,
    fetchData: (data: object)=>any,
    change?: (data: any)=>void
}

export default (props: Params)=>{
	const { query={} } = props;
  useEffect(()=>{
    refreshDataRef.current = refreshData;
    dataRef.current = data;
    getData({moreStatus: true},{moreStatus: true});
  }, [])
	useEffect(()=>{
		if(!isEmptyObject(query)){
			setData({list: [],total: 0});
			getData({moreStatus: true},{moreStatus: true});
		}
	},[query])
  const getData = async (startStatus, endStatus)=>{
    const tRefreshDataRef = refreshDataRef.current as any;
    setRefreshData({
      ...tRefreshDataRef,
      ...startStatus,
			loading: true
    })
    const result = await props.fetchData({
			...query,
      page: tRefreshDataRef.page,
      size: tRefreshDataRef.size,
    });
    if(result.success){
      // 返回数据
      props.change&&props.change(result);
      if(result.data.total<=0){
        setRefreshData({
          ...tRefreshDataRef,
          ...endStatus,
					loading: false
        })
      }else{
        setData({
          list: result.data.list,
          // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
          total: result.data.total
        })
        setRefreshData({
          ...tRefreshDataRef,
          refreshStatus: false,
          moreStatus: false,
					loading: false
        })
      }
    }else{
      alert.none(result.msg);
			setRefreshData({
				...tRefreshDataRef,
				refreshStatus: false,
				moreStatus: true,
				loading: false
			})
		}
  }
  // 加载刷新数据
  const [refreshData, setRefreshData] = useState({
    refreshStatus: false,
    moreStatus: false,
    page: 1,
    size: 10,
		loading: false
  })
  const refreshDataRef = useRef({});
  // 渲染（数据）
  const [data, setData] = useState({
    list: [],
    total: 0
  });
  const dataRef = useRef({});
  // 下拉刷新
  const handleRefresh = async ()=>{
    let tRefreshData = refreshDataRef.current as any;
    setRefreshData({
      ...tRefreshData,
      page: 1,
      size: 10,
    })
    getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true});
  }
  // 加载更多
  const handleMoreLoad = async ()=>{
    let t = (dataRef.current as any);
    let tRefreshData = refreshDataRef.current as any;
    if(t.list.length<t.total){
      setRefreshData({
        ...tRefreshData,
        page: ++tRefreshData.page,
        size: ++tRefreshData.page*tRefreshData.size,
      })
      getData({
        moreStatus: true
      },{
        moreStatus: true
      });
    }
  }
  //数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading})
  }, [refreshData.loading])
  

  return (
    <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} 
    selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
        {props.children}
    </InfiniteScroll>
  )
}