<template>
  <view>
    <slot></slot>
  </view>
  <wd-loadmore :state="state" @reload="loadmore" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {},
);
const emit = defineEmits(['reload']);

const state = ref('loading');

watchEffect(() => {
  if (props.data && props.data.records?.length < props.data?.size) {
    state.value = 'finished';
  } else {
    state.value = 'loading';
  }
});

onReachBottom(() => {
  loadmore();
  // if (state.value === 'loading') return;
});

const loadmore = () => {
  // state.value = 'loading';
  emit('reload');
};
</script>

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