import { Spin } from 'antd';
import { useRef } from 'react';

export default function ScrollLoading({
  loading,
  children,
  pagination = { current: 1, total: 0, pageSize: 20 },
  handleLoadData, //请求数据方法
  height = 90, //除滚动区域外其他高度(只是通用标题就是90)
}) {
  const scrollContent = useRef();

  const handleScroll = () => {
    const { current, total, pageSize } = pagination;
    if (current * pageSize >= total) return;
    const { scrollHeight, clientHeight, scrollTop } = scrollContent.current;
    if (scrollHeight - clientHeight <= scrollTop + 1 && !loading) {
      handleLoadData(current + 1);
    }
  };

  return (
    <Spin spinning={loading}>
      <div
        ref={scrollContent}
        onScroll={handleScroll}
        style={{ overflowY: 'scroll', height: `calc(100vh - ${height}px)` }}
      >
        {children}
      </div>
    </Spin>
  );
}
