<template>
  <FlexRow justify="center" align="center" :padding="[10,20]">
    <FlexRow v-if="loading" align="center" gap="gap.sm">
      <ActivityIndicator />
      加载中...
    </FlexRow>
    <Text v-else-if="hasMore" fontConfig="subText" touchable @click="emit('loadMore')">加载更多</Text>
    <Text v-else fontConfig="subText">没有更多了</Text>
  </FlexRow>
</template>

<script setup lang="ts">
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';

defineProps<{
  loading: boolean;
  hasMore: boolean;
}>()
const emit = defineEmits<{
  (e: 'loadMore'): void;
}>()
</script>