import { ref, reactive, onMounted, watch, unref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'

export function useListData({ searchParams, api, needInitListData = false, processData }) {
  // 定义响应式数据
  const initListData = ref(needInitListData)
  const loadingData = ref(true)
  const pageParams = reactive({
    pageNo: 1,
    pageSize: 10
  })
  const total = ref(0)
  const loadStatus = ref('loadmore')
  const listData = ref([])

  // 模拟获取数据的方法
  const getListData = async () => {
    const params = {
      ...unref(searchParams),
      ...pageParams
    }
    let { list, total: pageTotal } = await api(params)
    total.value = pageTotal
    if (processData) {
      list = processData(list)
    }
    return list
  }

  // 页面底部触底加载更多
  const scrollToLower = async () => {
    if (listData.value.length >= total.value) {
      loadStatus.value = 'nomore'
      return
    } else {
      loadStatus.value = 'loading'
    }
    pageParams.pageNo++
    await loadMore()
  }

  // 加载更多数据
  const loadMore = async () => {
    const newData = await getListData()
    listData.value = [...listData.value, ...newData]
    if (listData.value.length >= total.value) loadStatus.value = 'nomore'
  }
  // 初始化数据
  const getInitData = async () => {
    loadStatus.value = 'loadmore'
    pageParams.pageNo = 1
    total.value = 0
    listData.value = []
    loadingData.value = true
    let data = await getListData().finally(() => {
      loadingData.value = false
    })
    listData.value = data
    if (listData.value.length >= total.value) loadStatus.value = 'nomore'
  }

  // 组件挂载时执行初始化
  onMounted(() => {
    if (initListData.value) {
      getInitData()
    }
  })
  onReachBottom(() => {
    scrollToLower()
  })

  // 监听滚动到底部事件
  // 注意：在实际应用中，你需要根据你的框架或库来监听滚动到底部的事件

  return {
    initListData,
    loadingData,
    pageParams,
    total,
    loadStatus,
    listData,
    loadMore,
    scrollToLower,
    getInitData
  }
}