<template>
  <div class="more" @click="handleClick">
    <div class="more-text"
      :class="{ 'loading': isLoading, 'has-more': hasMore, 'no-more': !hasMore }">
      {{ isLoading ? '加载中...' : (hasMore ? '加载更多 ↓' : '已加载所有') }}
    </div>
  </div>
</template>

<script lang="ts" setup>

const props = defineProps<{
  isLoading: boolean;
  hasMore: boolean;
}>();

const emits = defineEmits<{(e: 'click'): void}>();

const handleClick = () => {
  if (props.isLoading) {
    return;
  }
  if (!props.hasMore) {
    return;
  }
  emits('click');
};


</script>

<style lang="scss" scoped>
.more {
  width: 100%;
  text-align: center;
  padding: 16px 0;
  .more-text {
    color: #9c9c9c;
    font-size: 14px;

    &.loading {
      color: #9c9c9c;
    }
    &.has-more {
      color: #9c9c9c;
    }
    &.no-more {
      color: #9c9c9c;
    }
  }
}
</style>
