<template>
	<!-- 首页 -->
	<view class="homePage">
		<view class="swiper-area">
			<uni-swiper-dot :info="navImageList" :current="current" field="url" mode="default">
				<swiper class="swiper-box" autoplay="true">
					<swiper-item v-for="(item, index) in navImageList" :key="index">
						<view class="swiper-item">
							<img
								src="https://server1.wh-nf.cn:9000/newfiber-standard/2023/11/04/bodybg_20231104105135A003.png"
								alt=""
								class="swiperImg"
								v-if="item.coverPhotosFileList.length == 0"
							/>
							<img :src="item.coverPhotosFileList[0].url" alt="轮播图" class="swiperImg" v-else @click="openUrl(item.linkUrl)" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 菜单区域 -->
		<view class="navCont">
			<div class="part" v-for="(item, index) in menuList" :key="index" @click="gotoMenu(item)">
				<img :src="item.url" alt="菜单" class="imgs" />
				<p class="title">{{ item.title }}</p>
			</div>
		</view>
		<!-- 经典项目推荐 -->
		<view class="projects">
			<div class="flex titles" @click="gotoProject">
				<p class="name">经典项目推荐</p>
				<p class="checkmore">查看更多 ></p>
			</div>
			<div class="contImgs">
				<div class="part" v-for="item in projectList" :key="item.id">
					<img :src="item.sysFileList.length > 0 ? item.sysFileList[0].url : ''" alt="" class="imgs" />
					<p class="ellipsis">{{ item.projectName }}</p>
				</div>
				<!-- 暂无数据 -->
				<div class="noDatas" v-if="projectList.length == 0" style="margin-left: 25%">
					<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
				</div>
			</div>
		</view>
		<!-- 政策法规 -->
		<view class="projects" style="padding-bottom: 40rpx">
			<div class="flex titles">
				<p class="name">政策法规</p>
			</div>
			<div class="contImgs">
				<div class="partLaw flex" v-for="item in lawList" :key="item.id" @click="checkDetail(item)">
					<p class="ellipsis lawCon">{{ item.title }}</p>
					<p class="date">{{ item.updateTime }}</p>
				</div>
				<!-- 暂无数据 -->
				<div class="noDatas" v-if="lawList.length == 0" style="margin-left: 25%">
					<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
				</div>
			</div>
		</view>
	</view>
</template>

<script setup name="homePage">
import { ref, onMounted } from 'vue';
import { onShareAppMessage, onTabItemTap } from '@dcloudio/uni-app';
import { projectInfoPage, articleConfigPage, specialNavList } from '@/utils/homeApi.js';

const current = ref(0);
const lawList = ref([]);
const projectList = ref([]);
const navImageList = ref([]);

// 菜单导航
const menuList = ref([
	{
		title: '技术标准',
		type: 'technical',
		url: '/static/images/jsbz.png'
	},
	{
		title: '政策法规',
		type: 'policies',
		url: '/static/images/zcfg.png'
	},
	{
		title: '科普知识',
		type: 'knowledge',
		url: '/static/images/kpzs.png'
	},
	{
		title: '问卷调查',
		type: '4',
		url: '/static/images/wjdc.png'
	},
	{
		title: '海绵项目',
		type: 'project',
		url: '/static/images/hmxm.png'
	},
	{
		title: '通知公告',
		type: 'notice',
		url: '/static/images/tzgg.png'
	}
]);
// 菜单点击跳转
function gotoMenu(item) {
	if (item.type == '4') {
		// 问卷调查
		uni.navigateTo({
			url: `/pages/quesNaire/index?title=${item.title}&type=${item.type}`
		});
	} else if (item.type == 'project') {
		// 海绵项目
		uni.navigateTo({
			// url: `/pages/projectHM/project?title=${item.title}&type=${item.type}`//单个项目
			url: `/pages/projectHM/projectAll`
		});
	} else {
		uni.navigateTo({
			url: `/pages/news/index?title=${item.title}&type=${item.type}`
		});
	}
}
// 获取海绵项目数据
function getProjectList() {
	projectInfoPage({ pageNum: 1, pageSize: 4, topOrder: 1 }).then((res) => {
		projectList.value = res.data;
	});
}
// 获取政策法规数据
function getLawList() {
	articleConfigPage({ articleType: 'policies' }).then((res) => {
		lawList.value = res.data.splice(0, 5);
	});
}
// 查看更多跳转
function gotoProject() {
	uni.navigateTo({
		// url: `/pages/projectHM/project`//单个项目
		url: `/pages/projectHM/projectAll`
	});
}
// 政策法规详情跳转
function checkDetail(item) {
	uni.navigateTo({
		url: `/pages/news/detail?title=政策法规&id=${item.id}`
	});
}
// 获取轮播图
function getNavList() {
	specialNavList().then((res) => {
		navImageList.value = res.data || [];
	});
}
// 轮播图跳转三方链接
function openUrl(url) {
	// uni.navigateTo({
	// 	url: `/pages/webview/index?urls=${url}`
	// });
}

// 转发给朋友
onShareAppMessage((res) => {
	return {
		title: '转发给朋友',
		path: '/pages/home/index'
	};
});

onMounted(() => {
	getNavList();
	getProjectList();
	getLawList();
});
// 切换tab加载
onTabItemTap((e) => {
	getNavList();
	getProjectList();
	getLawList();
});
</script>

<style lang="scss">
.homePage {
	.swiper-area {
		.swiper-item .swiperImg {
			width: 100%;
			height: 300rpx;
		}
	}
	.navCont {
		margin: 20rpx;
		border-radius: 8rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 10rpx 0rpx 10rpx;
		background: #fff;
		.part {
			text-align: center;
			width: 30%;
			.title {
				margin-top: -5rpx;
				margin-bottom: 15rpx;
				font-size: 25rpx;
			}
			.imgs {
				width: 116rpx;
				height: 104rpx;
			}
		}
	}

	.projects {
		margin: 20rpx;
		.titles {
			justify-content: space-between;
			.name {
				border-left: 4px solid #00a8a8;
				padding-left: 15rpx;
			}
			.checkmore {
				font-size: 24rpx;
			}
		}
		.contImgs {
			flex-wrap: wrap;
			display: flex;
			background: #fff;
			border-radius: 8rpx;
			margin-top: 20rpx;
			padding: 5rpx 5rpx 20rpx 5rpx;
			.part {
				width: 43%;
				margin-top: 20rpx;
				margin-left: 2%;
				border: 1px solid #e3e3e3;
				padding: 10rpx;
				.imgs {
					width: 100%;
					height: 200rpx;
				}
				.ellipsis {
					text-align: center;
					font-size: 18rpx;
				}
			}
			.partLaw {
				padding: 10rpx;
				width: 97%;
				font-size: 20rpx;
				border-bottom: 1px solid #e3e3e3;
				margin-top: 10rpx;
				.lawCon {
					flex: 1;
				}
				.date {
					width: 200rpx;
					margin-left: 15rpx;
				}
			}
		}
	}
}
</style>