<template>
	<div>
		<van-nav-bar title="家风" />
		<br />
		<van-row justify="left" align="left" style="text-align: left;">
			<van-col span="6" offset="1">
				<van-image style="width: 60rpx; height: 60rpx;background-color: #e2f2f2;" :src="getImageUrl(addimage)"
					@click="viewClick('/familyAdd')" />
			</van-col>
		</van-row>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<van-cell v-for="item in list" :key="item" :title="item.title" title-class="listTitle" />
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();



	const addimage = ref("image/ancestralHall2.png");

	const list = ref([]);
	const loading = ref(false);
	const finished = ref(false);
	const refreshing = ref(false);

	const onLoad = () => {
		setTimeout(() => {
			if (refreshing.value) {
				list.value = [];
				refreshing.value = false;
			}

			for (let i = 0; i < 10; i++) {
				list.value.push({title:"勿以恶小而为之，勿以善小而不为。"});
			}
			loading.value = false;

			if (list.value.length >= 40) {
				finished.value = true;
			}
		}, 1000);
	};

	const onRefresh = () => {
		// 清空列表数据
		finished.value = false;

		// 重新加载数据
		// 将 loading 设置为 true，表示处于加载状态
		loading.value = true;
		onLoad();
	};

	function viewClick(url) { //点击事件
		router.push(url);
	}

	const getImageUrl = (name) => {
		return new URL(`/src/assets/${name}`, import.meta.url).href
	}
</script>

<style lang="scss">
	.listTitle {
		width: 20%;
	}
	.listValue {
		width: 70%;
	}

</style>