const useInfiniteScroll = <TData extends Data>(
  // 請(qǐng)求服務(wù)
  service: Service<TData>,
  options: InfiniteScrollOptions<TData> = {},
) => {
  const {
    // 父級(jí)容器，如果存在，則在滾動(dòng)到底部時(shí)，自動(dòng)觸發(fā) loadMore。需要配合 isNoMore 使用，以便知道什么時(shí)候到最后一頁了。
    target,
    // 是否有最后一頁的判斷邏輯，入?yún)楫?dāng)前聚合后的 data
    isNoMore,
    // 下拉自動(dòng)加載，距離底部距離閾值
    threshold = 100,
    // 變化后，會(huì)自動(dòng)觸發(fā) reload
    reloadDeps = [],
    // 默認(rèn) false。 即在初始化時(shí)自動(dòng)執(zhí)行 service。
    // 如果設(shè)置為 true，則需要手動(dòng)調(diào)用 reload 或 reloadAsync 觸發(fā)執(zhí)行。
    manual,
    // service 執(zhí)行前觸發(fā)
    onBefore,
    // 執(zhí)行后
    onSuccess,
    // service reject 時(shí)觸發(fā)
    onError,
    // service 執(zhí)行完成時(shí)觸發(fā)
    onFinally,
  } = options;

  // 最終的數(shù)據(jù)
  const [finalData, setFinalData] = useState<TData>();
  // 是否loading more
  const [loadingMore, setLoadingMore] = useState(false);
  // 省略代碼...
};

// 判斷是否還有數(shù)據(jù)
const noMore = useMemo(() => {
  if (!isNoMore) return false;
  return isNoMore(finalData);
}, [finalData]);

// 通過 useRequest 處理請(qǐng)求
const { loading, run, runAsync, cancel } = useRequest(
  // 入?yún)ⅲ瑢⑸洗握?qǐng)求返回的數(shù)據(jù)整合到新的參數(shù)中
  async (lastData?: TData) => {
    const currentData = await service(lastData);
    // 首次請(qǐng)求，則直接設(shè)置
    if (!lastData) {
      setFinalData(currentData);
    } else {
      setFinalData({
        ...currentData,
        // service 返回的數(shù)據(jù)必須包含 list 數(shù)組，類型為 { list: any[], ...rest }
        // @ts-ignore
        list: [...lastData.list, ...currentData.list],
      });
    }
    return currentData;
  },
  {
    // 是否手動(dòng)控制
    manual,
    // 請(qǐng)求結(jié)束
    onFinally: (_, d, e) => {
      // 設(shè)置 loading 為 false
      setLoadingMore(false);
      onFinally?.(d, e);
    },
    // 請(qǐng)求前
    onBefore: () => onBefore?.(),
    // 請(qǐng)求成功之后
    onSuccess: d => {
      setTimeout(() => {
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        scrollMethod();
      });
      onSuccess?.(d);
    },
    onError: e => onError?.(e),
  },
);

// 同步加載更多
const loadMore = () => {
  // 假如沒有更多，直接返回
  if (noMore) return;
  setLoadingMore(true);
  // 執(zhí)行 useRequest
  run(finalData);
};

// 異步加載更多，返回的值是 Promise，需要自行處理異常
const loadMoreAsync = () => {
  if (noMore) return Promise.reject();
  setLoadingMore(true);
  return runAsync(finalData);
};

const reload = () => run();
const reloadAsync = () => runAsync();

useUpdateEffect(() => {
  run();
}, [...reloadDeps]);

// 滾動(dòng)方法
const scrollMethod = () => {
  const el = getTargetElement(target);
  if (!el) {
    return;
  }
  // Element.scrollTop 屬性可以獲取或設(shè)置一個(gè)元素的內(nèi)容垂直滾動(dòng)的像素?cái)?shù)。
  const scrollTop = getScrollTop(el);
  // Element.scrollHeight 這個(gè)只讀屬性是一個(gè)元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容。
  const scrollHeight = getScrollHeight(el);
  // 這個(gè)屬性是只讀屬性，對(duì)于沒有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0，否則，它是元素內(nèi)部的高度(單位像素)，包含內(nèi)邊距，但不包括水平滾動(dòng)條、邊框和外邊距。
  const clientHeight = getClientHeight(el);

  // 根據(jù)上面三個(gè)值以及 threshold 判斷是否進(jìn)行加載更多
  if (scrollHeight - scrollTop <= clientHeight + threshold) {
    loadMore();
  }
};

// 監(jiān)聽滾動(dòng)事件
useEventListener(
  'scroll',
  () => {
    if (loading || loadingMore) {
      return;
    }
    scrollMethod();
  },
  { target },
);