<script setup lang="ts" generic="S extends Object, T extends { list: S[] }">
import useRequest from '../hooks/useRequest'
import { Ref, watch, onMounted } from 'vue'
import { NetImages } from '../core/libs/enums'

const props = defineProps<{
  request: (query: any) => Promise<IResData<T>>
  query: Partial<T['list'][0]>
  customClass?: string
}>()
const slot = defineSlots<{
  default(props: { data: Ref<S>[]; source: T }): any
}>()
const { data, run: setData } = useRequest(() => props.request(props.query), { immediate: false })
watch(
  () => props.query,
  async (e) => {
    console.log(e)
    console.log('watch')
    await setData()
  },
)
onMounted(async () => {
  await setData()
})
// onReachBottom(() => {
//   console.log(1111)
// })
defineExpose({
  refresh: () => {
    setData()
  },
})
</script>
<template>
  <div class="flex-grow flex flex-col" :class="customClass">
    <div v-if="!data?.list?.length" class="flex-grow flex items-center justify-center">
      <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
    </div>
    <slot v-else :source="data as T" :data="data.list as unknown as Ref<S>[]"></slot>
  </div>
</template>
