<script setup lang="ts" generic="S extends Object, T extends { list: S[] }">
import { ComponentExposed } from 'vue-component-type-helpers'
import { NetImages } from '../core/libs/net-images'
import useRequest from '../hooks/useRequest'
import { ref, Ref, watch, onMounted } from 'vue'
import ZPaging from 'z-paging/components/z-paging/z-paging.vue'

const props = withDefaults(
  defineProps<{
    request: (query: any) => Promise<IResData<T>>
    query: Partial<T['list'][0]>
    customClass?: string
    automatic?: boolean
  }>(),
  {
    automatic: true,
  },
)
const slot = defineSlots<{
  default(props: { data: Ref<S>[]; source: T }): any
}>()
const paging = ref<ComponentExposed<typeof ZPaging>>()
const pageNo = ref(1)
const pageSize = ref(10)
const { data, run: setData } = useRequest(
  () => props.request({ pageNo: pageNo.value, pageSize: pageSize.value, ...props.query }),
  { immediate: false },
)
const dataList = ref<S[]>([])
const source = computed(() => ({ list: dataList.value }))
const queryList = (no, size) => {
  console.log(no, size)

  pageNo.value = no
  pageSize.value = size
  // setData()
  setData().then((res) => {
    paging.value?.complete(res.list)
  })
}
watch(
  () => props.query,
  async (e) => {
    // console.log(e)
    paging.value?.reload()
  },
)
// const
onMounted(async () => {})

onPageScroll((e) => {
  paging.value?.updatePageScrollTop(e.scrollTop)
})
onReachBottom(() => {
  paging.value?.pageReachBottom()
})
const refresh = async () => {
  console.log('Page Helper Refresh')
  // await setData()
  paging.value?.refresh()
}
const reload = async () => {
  console.log('Page Helper Reload')
  // await setData()
  paging.value?.reload()
}
defineExpose({
  refresh,
  reload,
})
</script>
<template>
  <div class="flex-grow flex flex-col" :class="customClass">
    <z-paging
      ref="paging"
      v-model="dataList"
      doLoadMore="toBottom"
      :refresher-enabled="false"
      :default-page-size="10"
      :default-page-no="1"
      :use-page-scroll="true"
      :auto-full-height="true"
      custom-class="h-full"
      @query="queryList"
    >
      <template #top>
        <slot name="top"></slot>
      </template>
      <template #empty>
        <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
      </template>
      <slot :source="{ list: dataList }"></slot>
    </z-paging>
  </div>
</template>
<style lang="scss">
// .z-paging {
// .z-paging-content,
// .zp-view-super,
// .zp-scroll-view-container,
// .zp-scroll-view,
// .uni-scroll-view,
// .uni-scroll-view-content {
//   display: flex;
//   flex-direction: column;
//   flex-grow: 1;
// }
// .zp-view-super {
//   // flex: 1;
//   flex-direction: column !important;
// }
// .zp-scroll-view-container {
//   flex: 1;
// }

// }
</style>
