<template>
	<div class="page_container">
		<!-- 导航栏组件，标题通过国际化获取 -->
		<NavBar :title="$t('contactMenu.newFriends')" />
		<div>
			<!-- 虚拟列表组件，展示已发送好友申请的列表 -->
			<virtual-list v-if="contactStore.storeSendFriendApplicationList.length > 0"
				class="my_scrollbar overflow-y-auto bg-white" :data-key="'toUserID'"
				:data-sources="contactStore.storeSendFriendApplicationList" :data-component="ApplicationItem"
				:estimate-size="88" :extra-props="{
          total: contactStore.storeSendFriendApplicationList.length,
          type: ApplicationTypeEnum.SentFriendApplication,
        }" />
			<!-- 虚拟列表组件，展示接收到的好友申请列表 -->
			<virtual-list v-if="contactStore.storeRecvFriendApplicationList.length > 0"
				class="my_scrollbar overflow-y-auto bg-white" :data-key="'toUserID'"
				:data-sources="contactStore.storeRecvFriendApplicationList" :data-component="ApplicationItem"
				:estimate-size="88" :extra-props="{
          total: contactStore.storeRecvFriendApplicationList.length,
          type: ApplicationTypeEnum.RecivedFriendApplication,
        }" />
		</div>
	</div>
</template>

<script setup lang="ts">
	// 引入所需的组件和模块
	import VirtualList from '@components/VirtualList'
	import ApplicationItem from '@/components/ApplicationItem/index.vue'
	import { ApplicationTypeEnum } from '@/components/ApplicationItem/data'
	import useContactStore from '@/store/modules/contact'
	import {
		getAccessedFriendApplication,
		setAccessedFriendApplication,
	} from '@/utils/storage'

	// 使用联系人数据存储
	const contactStore = useContactStore()

	/**
	 * 存储已访问的好友申请，用于标记已处理的申请
	 */
	const storeAccessedApplication = () => {
		// 获取本地存储的已访问好友申请
		const accessedFriendApplications = getAccessedFriendApplication()

		// 筛选未处理且未记录的好友申请
		let unHandleFriendApplication = contactStore.storeRecvFriendApplicationList.filter(
			(application) =>
				application.handleResult === 0 &&
				!accessedFriendApplications.includes(
					`${application.fromUserID}_${application.createTime}`,
				),
		)
		// 如果没有未处理的申请，直接返回
		if (unHandleFriendApplication.length === 0) {
			return
		}
		// 将未处理的好友申请记录到本地存储
		unHandleFriendApplication.map((application) => {
			accessedFriendApplications.push(
				`${application.fromUserID}_${application.createTime}`,
			)
		})
		setAccessedFriendApplication(accessedFriendApplications)
		// 更新未处理好友申请数量为0
		contactStore.updateUnHandleFriendApplicationNum(0)
	}

	// 组件挂载时执行存储操作
	onMounted(() => {
		storeAccessedApplication()
	})
</script>


<style lang="scss" scoped>
	:deep(.van-tabs) {
		height: 100%;
		display: flex;
		flex-direction: column;

		.van-tabs__wrap {
			min-height: var(--van-tabs-line-height);
		}

		.van-tabs__content {
			flex: 1;
			overflow: hidden;

			.van-tab__panel {
				height: 100%;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>