<template>
  <div class="load-more">
    <span class="load-more__text" :style="{ color: color }">{{
      status === 'more'
        ? contentText.contentdown
        : status === 'loading'
        ? contentText.contentrefresh
        : contentText.contentnomore
    }}</span>
  </div>
</template>

<script>
export default {
  name: 'LoadMore',
  props: {
    status: {
      //上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
      type: String,
      default: 'more'
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: '#999'
    },
    contentText: {
      type: Object,
      default() {
        return {
          contentdown: '上拉显示更多',
          contentrefresh: '正在加载...',
          contentnomore: '没有更多数据了'
        };
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less">
@charset "UTF-8";

.load-more {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.load-more__text {
  .text-size(12);
  color: @gray-4;
}
</style>
