<template>
	<!-- 海绵项目 -->
	<view class="projectHM">
		<scroll-view
			class="scrollContent"
			:scroll-y="true"
			@scrolltolower="scrolltolower"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
			refresher-default-style="black"
			v-if="projectList.length > 0"
		>
			<div class="content">
				<div class="part" v-for="item in projectList" :key="item.id" @click="checkDetail(item)">
					<img :src="item.sysFileList.length > 0 ? item.sysFileList[0].url : ''" alt="" class="imgs" />
					<p class="ellipsis">{{ item.projectName }}</p>
				</div>
			</div>
		</scroll-view>
		<!-- 暂无数据 -->
		<div class="noDatas" v-if="projectList.length == 0">
			<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
		</div>
	</view>
</template>

<script setup name="projectHM">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { projectInfoPage } from '@/utils/homeApi.js';

const projectList = ref([]);
const triggered = ref(false); //下拉是否激活
const pageNum = ref(1);
const pageSize = ref(8);
const total = ref(0);

// 向上加载
function scrolltolower() {
	console.log('向上加载--');
	if (projectList.value.length < total.value) {
		pageNum.value += 1;
		getDataList();
	} else {
		uni.showToast({
			title: '已经到底，没有更多了',
			icon: 'none'
		});
		return;
	}
}
// 下拉刷新
function onRefresh() {
	console.log('下拉刷新--');
	triggered.value = true;
	pageNum.value = 1;
	projectList.value = [];
	getDataList();
	//复位
	setTimeout(() => {
		triggered.value = false;
	}, 1000);
}

// 获取数据列表
function getDataList() {
	projectInfoPage({ pageNum: pageNum.value, pageSize: pageSize.value, wechatMiniuserId: uni.getStorageSync('userIdXGWXMN') }).then((res) => {
		projectList.value = projectList.value.concat(res.data || []);
		total.value = res.total;
	});
}
// 跳转项目详情
function checkDetail(item) {
	let obj = {
		sysFileList: item.sysFileList,
		projectName: item.projectName,
		projectOverview: item.projectOverview,
		projectLocation: item.projectLocation,
		collectStatus: item.collectStatus,
		id: item.id
	};
	localStorage.setItem('xgProjectObj', JSON.stringify(obj));
	uni.navigateTo({
		url: `./detail`
	});
}

onShow(() => {
	projectList.value = [];
	getDataList();
});
</script>

<style lang="scss">
.projectHM {
	padding: 10px;
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.part {
			width: 45%;
			text-align: center;
			margin-bottom: 15rpx;
			font-size: 20rpx;
			background: #fff;
			border-radius: 8rpx;
			padding: 15rpx;
			.imgs {
				width: 100%;
				height: 300rpx;
			}
		}
	}
}
</style>