
<script setup>
	import {ref} from "vue"
	import newsCard from '@/components/newsCard.vue';
	const caseList=ref([
		{},{},{},
	])
	const isLoading=ref(false);
	const status=ref("more");
	
	// const caseList = reactive([{
	// 	title:"测试",
	// 	image:'/static/stu.png',
	// 	detile:"这是一个测试",
	// 	time:"2024-6-1"
	// }])
	// 加载更多数据
	const loadMore=async()=>{
	console.log("加载更多...");
	status.value="loading";
	  if (isLoading.value) return;
	  isLoading.value = true;
	  const newCases = await fetchCases();
	  caseList.value.push({});
	  caseList.value.push({});
	  caseList.value.push({});
	  caseList.value.push({});
	  console.log("加载更多2...");
	  isLoading.value = false;
	  status.value = "nomore";
	 console.log("加载更多2...");
	}
	const fetchCases=()=>{
		return new Promise((resolve) => {
		    setTimeout(() => {
		      const newCases = [
		        { id: 1, title: "Case 1" },
		        { id: 2, title: "Case 2" }
		      ];
		      resolve(newCases);
		    }, 1000);
		  });
	}
</script>
<template>
	<view class="">
		<scroll-view
		      scroll-y
		      @scrolltolower="loadMore"
		      class="case-list"
		    >
			<view class="list-itme" v-for="(item, index) in caseList" :key="index">
				<CaseBox  ></CaseBox>   
			</view>
		      <view v-if="isLoading" class="loading">
		        <up-loadmore :status="status" />
		      </view>
		</scroll-view>
	</view>
</template>



<style lang="scss">
.case-list{
		scrollbar-width: none;
		// height: 40vh;
		// overflow: auto;
		height: 100vh;
		display: flexbox;
		flex-flow: column;
		background-color: #e2e2e2;
	}
	.list-itme{
		width: 98%;
		height: 350rpx;
		margin: 10rpx auto;
		// background-color: #000;
	}
</style>
