<template>
  <div>
    <div class="bx-load">
      <div 
        class="bx-load-text" 
        v-if="hasMore && !isLoading && !isError"
        >
        上拉加载更多
      </div>
      <div 
        class="bx-load-text" 
        v-if="isLoading"
        >
        加载中...
      </div>
      <div 
        class="bx-load-text" 
        v-if="!hasMore"
        >
        没有更多了
      </div>
      <div 
        class="bx-load-text" 
        v-if="!isLoading && isError"
        >
        加载失败，请上拉重试
      </div>
    </div>
  </div>
</template>
<script>
import { create } from '../utils/index'

export default create({
  name: 'load-more',
  props: {
    // 是否还有更多
    hasMore: {
      type: Boolean,
      default: true,
    },
    // 是否在加载中
    isLoading: {
      type: Boolean,
      default: false,
    },
    // 是否出错
    isError: {
      type: Boolean,
      default: false,
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
