<template>
  <view class="jx-load-more">
    <view v-show="isLoad" class="isLoad">
      <text class="load-icon"></text>
      <text class="load-text">{{ loadText }}</text>
    </view>
    <text v-show="!isLoad">
      <text class="text">———</text>
      &nbsp;{{ tip }}&nbsp;
      <text class="text">———</text>
    </text>
  </view>
</template>

<script lang="ts" setup >
interface jxLoadMoreType {
  color?: string
  loadText?: string
  tip?: string
  size?: string
  isLoad: boolean
  marginTop?: string
}
withDefaults(defineProps<jxLoadMoreType>(), {
  color: '#aaa',
  loadText: '正在加载中...',
  tip: '没有更多了',
  size: '22rpx',
  marginTop: '0rpx',
})
</script>

<style lang="scss" scoped>
.jx-load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  color: v-bind(color);
  font-size: v-bind(size);
  padding-bottom: 20rpx;
  margin-top: v-bind(marginTop);

  .load-icon {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    border-width: 4rpx;
    border-style: solid;
    border-radius: 50%;
    margin-right: 10rpx;
    border-right-color: rgba($color: $jx-primary, $alpha: 0.2);
    border-top-color: rgba($color: $jx-primary, $alpha: 0.2);
    border-bottom-color: rgba($color: $jx-primary, $alpha: 0.2);
    border-left-color: $jx-primary;
    border-radius: 50%;
    animation: identifier 0.7s linear infinite;
  }

  @keyframes identifier {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .text {
    color: rgb(220, 220, 220);
  }
}
</style>