<template>
	<scroll-view
		scroll-y
		:refresher-enabled="!!pager?.reload"
		refresher-background=""
		refresher-default-style="black"
		:refresher-triggered="pager.state.value === PagerState.LOADING"
		style="position: relative; width: 100%; height: 100%"
		@refresherrefresh="pager?.reload"
		@scrolltolower="pager?.loadMore"
	>
		<slot></slot>

		<!-- 没有数据时展示 -->
		<EmptyComp v-show="showEmptyComp && pager?.state.value === PagerState.IDLE && pager?.records.value.length <= 0" />

		<!-- 底部状态状态展示: 加载中, 已到底线 -->
		<view
			v-if="stateContent"
			style="width: 100%; min-height: 110rpx; padding: 30rpx 0; font-size: 28rpx; color: gray; text-align: center"
		>
			{{ stateContent }}
		</view>

		<!-- TabBar 垫高 -->
		<view :style="{ width: '100%', height: tabBarHeight }"></view>
	</scroll-view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import EmptyComp from "../empty-comp/index.vue";
import Pager, { PagerState } from "./index";

const props = defineProps({
	// pager
	pager: {
		type: Pager<any>,
		default: null
	},
	// tab bar 高度
	tabBarHeight: {
		type: String,
		default: "0"
	},
	// 是否要显示空组件
	showEmptyComp: {
		type: Boolean,
		default: true
	}
});
props.pager?.nextPage();

// Pager当前状态内容
const stateContent = computed({
	get: () => {
		if (props.pager.state.value === PagerState.LOADING) {
			return "加载中...";
		}
		if (props.pager.state.value === PagerState.NO_MORE) {
			return "我也是有底线的~";
		}
		return "";
	},
	set: () => {}
});
</script>

<script lang="ts">
export default {
	name: "PagerScrollComp"
};
</script>
