<script setup>
	// 点赞中心
	import {
		reactive,
		ref,
		computed,
	} from 'vue';
	// 
	import apex from '@/components/header/apex.vue'
	// 类型列表
	const typeList = reactive([{
			img: '/static/indexLike1.png',
			count: 1000,
			name: '公开赞',
		},
		{
			img: '/static/privateLike.png',
			count: 20,
			name: '隐私赞',
		}
	])
	// 类型下标
	const typeIndex = ref(0)
	// 当前type
	const typeCurrent = computed(() => {
		let result = typeList[typeIndex.value]
		return result
	})

	/**
	 * 点击下标
	 * @param {Object} index
	 */
	function handleTypeIndex(index) {
		if (typeIndex.value === index) return
		typeIndex.value = index
	}
</script>

<template>
	<view class="appbw">
		<!-- 顶部导航 -->
		<apex title="点赞统计">
			<template #right>
				<view class="typeList rows f26">
					<view class="item ver mr10" :class="{'active': index === typeIndex}"
						v-for="(item,index) in typeList" :key="index" @click="handleTypeIndex(index)">
						<image class="wh26" :src="item.img" mode="aspectFit" />
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</template>
		</apex>

		<view class="count rows mtb30 mlr30 ptb20 plr30 f32 br20">
			<view class="key">{{typeCurrent.name}}</view>
			<view class="value b">{{typeCurrent.count}}</view>
		</view>

		<!-- 列表盒子 -->
		<view class="listBox mtb30 plr30">
			<view class="item df ptb20 plr10" v-for="(item,index) in 10" :key="index">
				<view class="avatar">
					<image class="wh100" src="/static/qq.png" mode="aspectFill" />
				</view>
				<view class="info f1 ml20">
					<view class="nickname thd f30 c111">A**** {{typeCurrent.name}}了你</view>
					<view class="time mt10 c999 f28">2024.12.08 20:00</view>
				</view>
			</view>
		</view>
		
		<view class="nomore">暂无更多~</view>

		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

<style lang="scss" scoped>
	// 类型列表
	.typeList {
		.item {
			color: #999;
			transition: .3s;

			&.active {
				color: #333;
				font-weight: bold;
			}
		}
	}

	// 点赞统计
	.count {
		background-color: #FAF8F8;

		.value {
			color: #F84259;
		}
	}

	// 列表盒子
	.listBox {
		.item+.item {
			border-top: 2rpx solid #eee;
		}
	}
</style>