<template>
  <view class="loading-list" :style="{opacity}">
    <view class="laoding flex-center" v-if="loading">
      <!-- <image src="../../static/img/base/loading.svg" class="icon"></image> -->
      <text class="text">加载中...</text>
    </view>
    
    <view class="text flex-center" v-if="nothingMore">没有更多了</view>
  </view>
</template>

<script>
	export default {
		name: 'LoadingList',
		props: {
			loading: {
			  type: Boolean,
			},
			nothingMore: {
			  type: Boolean,
			},
		},
		computed: {
			opacity() {
				return this.loading || this.nothingMore ? 1 : 0;
			}
		},
		// const opacity = computed(() => props.loading || props.nothingMore ? 1 : 0);
	}
</script>

<style scoped lang="scss">
  .loading-list {
    height: 34rpx;
    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
    }
    .icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 12rpx;
      animation: rotate .6s linear infinite;
    }
    
    .text {
      color: #A68C7D;
      font-size: 26rpx;
    }
    
    @keyframes rotate {
      from { transform: rotate(0); }
      to { transform: rotate(360deg); }
    }
  }
</style>