<template>
  <scroll-view
    :scroll-y="true"
    class="scroll-view-custom"
    @scrolltolower="loadMore"
    :style="{ height: clientHeight + 'px' }"
  >
    <slot> </slot>
    <!-- 加载更多提示 -->
    <view
      v-if="noMoreData || isLoading"
      class="no-more-data-text"
      style="padding: 20rpx"
    >
      <u-loadmore
        :status="isLoading ? 'loading' : 'nomore'"
        :line="true"
        :fontSize="12"
        :marginTop="30"
      />
    </view>
    <view
      v-if="!isLoading && list.length === 0"
      style="justify-content: center; padding: 20rpx"
    >
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";

const props = withDefaults(
  defineProps<{
    noMoreData: boolean;
    isLoading: boolean;
    list: any;
    height: number;
  }>(),
  {
    noMoreData: false,
    isLoading: false,
    list: [],
    height: 80,
  }
);
const emit = defineEmits(["loadList"]);

const clientHeight = ref(500);

const loadMore = () => {
  console.log("**** 加载更多");
  if (props.noMoreData) return; // 如果没有更多数据，直接返回
  emit("loadList", true);
};

const getBarHeight = () => {
  const res = uni.getSystemInfoSync();
  console.log(res);
  if (res.platform === "ios" || res.osName === "ios") {
    return 44;
  } else if (res.platform === "android") {
    return 48;
  } else {
    return 0;
  }
};
//获取可视区域高度
const getClineHeight = () => {
  uni.getSystemInfo({
    success: (res) => {
      clientHeight.value =
        res.windowHeight - uni.upx2px(props.height) - getBarHeight();
    },
  });
};

watch(
  () => props.height,
  (newValue, oldValue) => {
    getClineHeight();
  }
);
// ,{ deep: true, immediate:true}

onLoad(() => {
  // #ifdef APP-PLUS || MP-WEIXIN || H5
  getClineHeight();
  // #endif
});
</script>
<style lang="scss">
.no-more-data-text {
  font-size: 24rpx;
}
</style>
