<template>
	<!-- 我的关注收藏 -->
	<view class="myConcern">
		<!-- tab切换 -->
		<div class="concernTab">
			<button class="tabBtn" :type="activeIndex == item.index ? 'primary' : 'default'" size="mini" @click="changeTab(item)" v-for="item in tabList" :key="item.index">
				{{ item.name }}
			</button>
		</div>
		<!-- 内容区 -->
		<!-- 海绵项目 -->
		<view v-if="activeIndex == 1">
			<div class="publicList" v-for="item in projectList" :key="item.id" @click="checkDetail(item)">
				<div class="left">
					<p class="title">{{ item.projectName }}</p>
					<p>{{ item.createTime }}</p>
				</div>
				<div class="right">
					<img
						src="https://server1.wh-nf.cn:9000/newfiber-standard/2023/11/04/bodybg_20231104105135A003.png"
						alt=""
						class="newsImg"
						v-if="item.sysFileList.length == 0"
					/>
					<img :src="item.sysFileList[0].url" alt="" class="newsImg" v-else />
				</div>
			</div>
			<!-- 暂无数据 -->
			<div class="noDatas" v-if="projectList.length == 0">
				<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
			</div>
		</view>
		<!-- 科普知识,文章 -->
		<view v-if="activeIndex != 1">
			<div class="publicList" v-for="item in projectList" :key="item.id" @click="checkDetail(item)">
				<div class="left">
					<p class="title">{{ item.title }}</p>
					<p>{{ item.createTime }}</p>
				</div>
				<div class="right">
					<img
						src="https://server1.wh-nf.cn:9000/newfiber-standard/2023/11/04/bodybg_20231104105135A003.png"
						alt=""
						class="newsImg"
						v-if="item.coverPhotosFileList.length == 0"
					/>
					<img :src="item.coverPhotosFileList[0].url" alt="" class="newsImg" v-else />
				</div>
			</div>
			<!-- 暂无数据 -->
			<div class="noDatas" v-if="projectList.length == 0">
				<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
			</div>
		</view>
	</view>
</template>

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

const projectList = ref([]);
const activeIndex = ref(1);
const activeTitle = ref('');
const tabList = ref([
	{ index: 1, name: '海绵项目', type: '' },
	{ index: 2, name: '科普知识', type: 'knowledge' },
	{ index: 3, name: '技术标准', type: 'technical' },
	{ index: 4, name: '政策法规', type: 'policies' },
	{ index: 5, name: '通知公告', type: 'notice' }
]);

// tab切换
function changeTab(item) {
	activeIndex.value = item.index;
	activeTitle.value = item.name;
	getDataList(item.type);
}

// 获取数据列表
function getDataList(type) {
	projectList.value = [];
	if (activeIndex.value == 1) {
		// 项目
		projectInfoPage({ pageNum: 1, pageSize: 99, collectStatus: 1, wechatMiniuserId: uni.getStorageSync('userIdXGWXMN') }).then((res) => {
			projectList.value = res.data || [];
		});
	} else if (activeIndex.value == 2) {
		// 科普知识
		knowledgeConfigPage({ pageNum: 1, pageSize: 99, collectStatus: 1, wechatMiniuserId: uni.getStorageSync('userIdXGWXMN') }).then((res) => {
			projectList.value = res.data || [];
		});
	} else {
		// 文章
		articleConfigPage({ pageNum: 1, pageSize: 99, collectStatus: 1, articleType: type, wechatMiniuserId: uni.getStorageSync('userIdXGWXMN') }).then((res) => {
			projectList.value = res.data || [];
		});
	}
}

// 跳转详情查看
function checkDetail(item) {
	if (activeIndex.value == 1) {
		// 项目
		let obj = {
			sysFileList: item.sysFileList,
			projectName: item.projectName,
			projectOverview: item.projectOverview,
			projectLocation: item.projectLocation,
			collectStatus: item.collectStatus,
			id: item.id
		};
		uni.navigateTo({
			url: `./../projectHM/detail?data=${JSON.stringify(obj)}`
		});
	} else {
		uni.navigateTo({
			url: `./../news/detail?title=${activeTitle.value}&id=${item.id}`
		});
	}
}

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

<style lang="scss">
.myConcern {
	padding: 10rpx;
	.concernTab {
		display: flex;
		justify-content: space-around;
		margin: 15rpx auto;
		.tabBtn {
			padding: 0rpx 18rpx;
		}
	}
	.publicList {
		margin-bottom: 15rpx;
		.left {
			p span {
				margin-left: 10rpx;
				color: $uni-color-success;
			}
		}
	}
}
</style>