<script setup>
	// 点赞中心
	import {
		reactive,
		ref,
		computed,
	} from 'vue';
	// 
	import apex from '@/components/header/apex.vue'
	// 
	import util from '@/common/js/util';
	// 类型列表
	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
	}

	/**
	 * 点击列表
	 * @param {Object} item
	 */
	function handleDetail(item) {
		// 进入详情
		uni.navigateTo({
			url: util.setUrl('/pages/index/dataCenter/pushDetail', {
				// 
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<view class="typeList rows f34">
			<view class="item tac f1" :class="{'active': index === typeIndex}" v-for="(item,index) in typeList"
				:key="index" @click="handleTypeIndex(index)">
				<view class="name ptb10">{{item.name}}</view>
				<view class="line"></view>
			</view>
		</view>
		<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 rows ptb20 plr10" v-for="(item,index) in 10" :key="index" @click="handleDetail(item)">
				<view class="avatar">
					<image class="wh100" src="/static/qq.png" mode="aspectFill" />
				</view>
				<view class="info f1 ml20 f28">
					<view class="nickname t2hd  c111">A**** 消耗榴莲果300兑换{{typeCurrent.name}}</view>
					<view class="time mt10 c999 ">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;

			.line {
				transition: .3s;
				opacity: 0;
				border: 2rpx solid #000;
			}

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

				.line {
					opacity: 1;
				}
			}
		}
	}

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

		.value {
			color: #F84259;
		}
	}

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