<template>
  <view class="pagination-container">
    <!-- 列表内容 -->
    <scroll-view 
      class="scroll-view" 
      scroll-y 
      @scrolltolower="onLoadMore" 
      refresher-enabled 
      @refresherrefresh="onRefresh" 
      :refresher-triggered="isRefreshing" 
      refresher-default-style="white"
      :style="{ height: scrollHeight }"
    >
      <!-- 空状态 -->
      <view v-if="list.length === 0 && !loading" class="empty-state">
        <image :src="emptyImage" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">{{ emptyText }}</text>
      </view>
      
      <!-- 列表内容 -->
      <view v-else>
        <slot :list="list"></slot>
        
        <!-- 加载状态 -->
        <view v-if="loading" class="loading-state">
          <text class="loading-text">加载中...</text>
        </view>
        
        <!-- 没有更多数据 -->
        <view v-if="!hasMore && list.length > 0" class="no-more-state">
          <text class="no-more-text">{{ noMoreText }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 列表数据
    list: {
      type: Array,
      default: () => []
    },
    // 是否还有更多数据
    hasMore: {
      type: Boolean,
      default: true
    },
    // 是否正在加载
    loading: {
      type: Boolean,
      default: false
    },
    // 是否正在刷新
    isRefreshing: {
      type: Boolean,
      default: false
    },
    // 滚动区域高度
    scrollHeight: {
      type: String,
      default: '60vh'
    },
    // 空状态图片
    emptyImage: {
      type: String,
      default: 'https://api.ccttiot.com/smartmeter/img/static/uEiNJh8Rfurw9ORQzlit'
    },
    // 空状态文字
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    // 没有更多数据文字
    noMoreText: {
      type: String,
      default: '没有更多数据了...'
    }
  },
  methods: {
    // 上拉加载更多
    onLoadMore() {
      if (!this.loading && this.hasMore) {
        this.$emit('loadMore')
      }
    },
    
    // 下拉刷新
    onRefresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  width: 100%;
  
  .scroll-view {
    width: 100%;
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 200rpx 0;
    
    .empty-image {
      width: 480rpx;
      height: 373rpx;
      margin-bottom: 40rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .loading-state {
    text-align: center;
    padding: 40rpx 0;
    
    .loading-text {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .no-more-state {
    text-align: center;
    padding: 40rpx 0;
    
    .no-more-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style> 