<script lang="ts" setup>
import type { PackageListItem } from '/#/workorder'
import ListItem from './ListItem.vue'
import { useWorkOrder } from '@/store/modules/workOrder'
import { onUnmounted, reactive, ref, watch } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'

const workStore = useWorkOrder()
const data = ref<PackageListItem[]>([])
const activeId = ref('')
const el = ref<HTMLDivElement | null>(null)
const keyword = ref('')
const canloadMore = ref(true)

const pagination = reactive({
  pageNo: 0,
  pageSize: 10,
})

function selectHandler(id: string, index: number) {
  workStore.setActive(index)
}

const { isLoading } = useInfiniteScroll(
  el as any,
  () => {
    loadMore()
  },
  { distance: 10, interval: 300, canLoadMore: () => {
    console.log('canloadmore excuted!')
    return canloadMore.value
  } },
)

async function loadMore() {
  if (isLoading.value || el.value == null)
    return

  console.log('loadmore')
  const more = await fetchList()
  data.value.push(...more)
}

async function fetchList() {
  try {
    pagination.pageNo += 1
    const result = await workStore.fetchOrderList(pagination)
    const { data, pageCount } = result
    canloadMore.value = pageCount >= pagination.pageNo
    return data
  }
  catch (error) {
    return []
  }
}

watch(() => workStore.activeId, (newVal) => {
  activeId.value = newVal
})

function reset() {
  pagination.pageNo = 0
  pagination.pageSize = 10
  canloadMore.value = true
  data.value.length = 0
}

async function search(word: string) {
  keyword.value = word
  reset()
  useInfiniteScroll(
    el as any,
    () => {
      loadMore()
    },
    { distance: 10, canLoadMore: () => canloadMore.value },
  )
}

defineExpose({
  search,
})
</script>

<template>
  <n-scrollbar>
    <n-spin :show="isLoading">
      <div ref="el">
        <ListItem
          v-for="(item, index) in data" :key="item.id" :selected="activeId === item.id" :list-item="item"
          @click="selectHandler(item.id, index)"
        />
      </div>
    </n-spin>
  </n-scrollbar>
</template>

<style lang="less" scoped>
</style>
