<script setup lang="ts" generic="T extends AnyObject">
import { UnwrapRef } from 'vue'

const props = withDefaults(
  defineProps<{
    request: (query: Partial<T>) => Promise<IResData<T[]>>
    query?: Partial<T>
    automatic?: boolean
    mockList?: Partial<T>[]
  }>(),
  {
    automatic: true,
    query: () => ({}),
  },
)
const slot = defineSlots<{
  default(props: { item: UnwrapRef<T>; index: number; isLast: boolean }): any
}>()
const { data, run: setData } = useRequest(() => props.request({ ...props.query }), {
  immediate: false,
})
onMounted(async () => {
  if (props.mockList) {
    data.value = props.mockList as T[]
    return
  }
  if (props.automatic) {
    await setData()
  }
})
watch(
  () => props.query,
  async () => {
    if (props.mockList) {
      data.value = props.mockList as T[]
      return
    }
    await setData()
  },
)
defineExpose({
  reload: async () => {
    await setData()
  },
})
</script>

<template>
  <div class="flex-grow flex flex-col relative">
    <template v-for="(it, index) in data" :key="index">
      <slot :item="it as UnwrapRef<T>" :index="index" :isLast="index == data.length - 1"></slot>
    </template>
    <div
      class="construction-dashed absolute top-0 right-0 left-0 bottom-0 bg-red/20 flex items-center justify-center pointer-events-none"
    >
      <div class="text-16 text-black/30">Debug</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@layer utilities {
  .construction-dashed {
    @apply relative border-4 border-black/50 border-dashed; /* 基础虚线样式 */
    animation: dashed-move 2s linear infinite; /* 虚线移动动画 */
  }
}
@keyframes dashed-move {
  from {
    border-spacing: 0;
  }
  to {
    border-spacing: 10px;
  }
}
</style>
