<template>
  <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleLoad">
    <slot />
    <hs-empty v-if="!props.meta?.total" />
    <view v-else class="scrollLoadingContainer">
      <!-- 加载状态提示 -->
      <u-loading-icon :text="loadingStatusTest" mode="circle" size="30rpx" :show="loadingStatus" />
      <view class="showLoadingText" v-if="!loadingStatus">
        {{ loadingStatusTest }}
      </view>
    </view>
  </scroll-view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'


const loadingStatusTest = ref('')
const loadingStatus = ref(false)
const params = ref({
  page: 1,
  perPage: 20
})

const props = defineProps({
  meta: {
    type: Object,
    default: {} // 参数
  },
  showLoad: {
    type: Boolean,
    default: true // 是否显示加载状态
  }
})

const emit = defineEmits(['load'])


watch(
  () => props?.meta?.total,
  () => {
    const { current_page, last_page } = props.meta
    const hasNextPage = current_page < last_page
    loadingStatus.value = hasNextPage
    loadingStatusTest.value = hasNextPage ? '上拉加载更多' : '已经到底啦～'
    console.log(props?.meta, 'meta数据变化')
  }
)

// 处理加载更多
const handleLoad = () => {
  const { current_page, last_page } = props.meta
  // 计算是否有下一页
  const hasNextPage = current_page < last_page
  loadingStatus.value = hasNextPage
  loadingStatusTest.value = hasNextPage ? '上拉加载更多' : '已经到底啦～'

  if (hasNextPage) {
    params.value.page = current_page + 1
    // 触发父组件加载更多事件
    emit('load', params.value)
    setTimeout(() => {
      loadingStatus.value = false
      loadingStatusTest.value = ''
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.scroll-Y {
  width: 100%;
  height: 660rpx;
}

.scrollLoadingContainer {
  padding: 30rpx 0;
  font-size: 25rpx;
  color: #999;
}

.showLoadingText {
  text-align: center;
  padding-bottom: 30rpx;
}
</style>
