import { reactive, toRefs } from "vue";
/**
    List有以下三种状态，理解这些状态有助于你正确地使用List组件：
        非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
        加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
        加载完成，finished为true，此时不会触发load事件
    在每次请求完毕后，需要手动将loading设置为false，表示加载结束
 */
const usePagination = () => {
  const State = reactive({
    limit: 10,
    page_count: 1,
    isLoading: false,
    isFinished: false,
  });

  const onResetParams = () => {
    State.page_count = 1;
  };

  const judgeLoadStatus = (list, count: number) => {
    State.page_count++;
    State.isLoading = false;
    State.isFinished = list?.length < State.limit || count === 10;
  };

  const onJudgeLoadStatus = (result) => {
    State.isLoading = false;
    const { cursor } = result;
    if (!cursor) State.isFinished = true;
  };
  return {
    ...toRefs(State),
    judgeLoadStatus,
    onResetParams,
    onJudgeLoadStatus,
  };
};

export default usePagination;
