<script setup lang="ts">
;
import singleStory from '~/components/listings/singleStory.vue';
const route = useRoute()
let curPage = ref(route.query.page || 1)
const props = defineProps<{ prefix: string; }>()
let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
	query: {
		page: curPage
	}
})
let rdata = ref(data)
const pagiChange = async (page, pageSize) => {
	curPage.value = page;
	// await navigateTo({
	// 	path: useRoute().fullPath,
	// 	query: {
	// 		page
	// 	}
	// })
	// let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
	// 	query: {
	// 		page: curPage
	// 	}
	// })
	// rdata.value = data;
}
</script>
<template>
	<a-list :pagination="{
		defaultPageSize: 20,
		total: rdata.total,
		defaultCurrent: curPage as number,
		// onChange: pagiChange,
		hideOnSinglePage: true,
		showSizeChanger: false
	}" :data-source="rdata.stories" item-layout="vertical">
		<template #renderItem="{ item }">
			<!-- {{ item.title }} -->
			<single-story :story="item"/>
		</template>
	</a-list>
</template>
<style scoped>
.ant-list-items>*+* {
	margin-top: 1.2em;
}

.ant-pagination {
	text-align: center;
}
</style>