// 當(dāng)外部容器的 size 發(fā)生變化的時(shí)候，觸發(fā)計(jì)算邏輯
useEffect(() => {
  if (!size?.width || !size?.height) {
    return;
  }
  // 重新計(jì)算邏輯
  calculateRange();
}, [size?.width, size?.height, list]);
// 監(jiān)聽(tīng)外部容器的 scroll 事件
useEventListener(
  'scroll',
  e => {
    // 如果是直接跳轉(zhuǎn)，則不需要重新計(jì)算
    if (scrollTriggerByScrollToFunc.current) {
      scrollTriggerByScrollToFunc.current = false;
      return;
    }
    e.preventDefault();
    // 計(jì)算
    calculateRange();
  },
  {
    // 外部容器
    target: containerTarget,
  },
);

// 計(jì)算范圍，由哪個(gè)開(kāi)始，哪個(gè)結(jié)束
const calculateRange = () => {
  // 獲取外部和內(nèi)部容器
  // 外部容器
  const container = getTargetElement(containerTarget);
  // 內(nèi)部容器
  const wrapper = getTargetElement(wrapperTarget);
  if (container && wrapper) {
    const {
      // 滾動(dòng)距離頂部的距離。設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離
      scrollTop,
      // 內(nèi)容可視區(qū)域的高度
      clientHeight,
    } = container;
    // 根據(jù)外部容器的 scrollTop 算出已經(jīng)“滾過(guò)”多少項(xiàng)
    const offset = getOffset(scrollTop);
    // 可視區(qū)域的 DOM 個(gè)數(shù)
    const visibleCount = getVisibleCount(clientHeight, offset);
    // 開(kāi)始的下標(biāo)
    const start = Math.max(0, offset - overscan);
    // 結(jié)束的下標(biāo)
    const end = Math.min(list.length, offset + visibleCount + overscan);
    // 獲取上方高度
    const offsetTop = getDistanceTop(start);
    // 設(shè)置內(nèi)部容器的高度，總的高度 - 上方高度
    // @ts-ignore
    wrapper.style.height = totalHeight - offsetTop + 'px';
    // margin top 為上方高度
    // @ts-ignore
    wrapper.style.marginTop = offsetTop + 'px';
    // 設(shè)置最后顯示的 List
    setTargetList(
      list.slice(start, end).map((ele, index) => ({
        data: ele,
        index: index + start,
      })),
    );
  }
};

// 根據(jù)外部容器以及內(nèi)部每一項(xiàng)的高度，計(jì)算出可視區(qū)域內(nèi)的數(shù)量
const getVisibleCount = (containerHeight: number, fromIndex: number) => {
  // 知道每一行的高度 - number 類(lèi)型，則根據(jù)容器計(jì)算
  if (isNumber(itemHeightRef.current)) {
    return Math.ceil(containerHeight / itemHeightRef.current);
  }
  // 動(dòng)態(tài)指定每個(gè)元素的高度情況
  let sum = 0;
  let endIndex = 0;
  for (let i = fromIndex; i < list.length; i++) {
    // 計(jì)算每一個(gè) Item 的高度
    const height = itemHeightRef.current(i, list[i]);
    sum += height;
    endIndex = i;
    // 大于容器寬度的時(shí)候，停止
    if (sum >= containerHeight) {
      break;
    }
  }
  // 最后一個(gè)的下標(biāo)減去開(kāi)始一個(gè)的下標(biāo)
  return endIndex - fromIndex;
};

// 根據(jù) scrollTop 計(jì)算上面有多少個(gè) DOM 節(jié)點(diǎn)
const getOffset = (scrollTop: number) => {
  // 每一項(xiàng)固定高度
  if (isNumber(itemHeightRef.current)) {
    return Math.floor(scrollTop / itemHeightRef.current) + 1;
  }
  // 動(dòng)態(tài)指定每個(gè)元素的高度情況
  let sum = 0;
  let offset = 0;
  // 從 0 開(kāi)始
  for (let i = 0; i < list.length; i++) {
    const height = itemHeightRef.current(i, list[i]);
    sum += height;
    if (sum >= scrollTop) {
      offset = i;
      break;
    }
  }
  // 滿(mǎn)足要求的最后一個(gè) + 1
  return offset + 1;
};

// 獲取上部高度
const getDistanceTop = (index: number) => {
  // 每一項(xiàng)高度相同
  if (isNumber(itemHeightRef.current)) {
    const height = index * itemHeightRef.current;
    return height;
  }
  // 動(dòng)態(tài)指定每個(gè)元素的高度情況，則 itemHeightRef.current 為函數(shù)
  const height = list
    .slice(0, index)
    // reduce 計(jì)算總和
    // @ts-ignore
    .reduce((sum, _, i) => sum + itemHeightRef.current(i, list[index]), 0);
  return height;
};

// 計(jì)算總的高度
const totalHeight = useMemo(() => {
  // 每一項(xiàng)高度相同
  if (isNumber(itemHeightRef.current)) {
    return list.length * itemHeightRef.current;
  }
  // 動(dòng)態(tài)指定每個(gè)元素的高度情況
  // @ts-ignore
  return list.reduce(
    (sum, _, index) => sum + itemHeightRef.current(index, list[index]),
    0,
  );
}, [list]);

// 滾動(dòng)到指定的 index
const scrollTo = (index: number) => {
  const container = getTargetElement(containerTarget);
  if (container) {
    scrollTriggerByScrollToFunc.current = true;
    // 滾動(dòng)
    container.scrollTop = getDistanceTop(index);
    calculateRange();
  }
};