<script setup>
	// 推流的用户
	import {
		ref,
		reactive,
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// api请求体
	import api from '@/api/index'
	// 列表
	const list = reactive({
		pageSize: 20,
		pageNum: 1,
		data: [],
		total: 0,
	})
	// 推流id
	const pushId = ref('')

	onLoad((option) => {
		// 推流id
		if (option.pushId) pushId.value = option.pushId
		// 获取列表
		getList()
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载当前列表
		refreshList()
	})

	// 重载当前列表
	function refreshList() {
		list.pageNum = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 获取列表
	function getList() {
		api.video.getVideoPushUsers({
			query: {
				pageSize: list.pageSize,
				pageNum: list.pageNum,
				videoStreamId: pushId.value,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = 0
				list.data.push(...rs.rows.map(item => {
					item.formatUserNickname = formatUsername(item.userName)
					return item
				}))
				list.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			// 停止下拉刷新
			uni.stopPullDownRefresh()
		})
	}

	/**
	 * 处理用户名
	 * @param {Object} username 用户名
	 */
	function formatUsername(username) {
		if (username.length <= 1) {
			return username;
		}
		// 截取第一个字
		const firstChar = username.charAt(0);
		// 匹配并替换剩余字符
		const maskedPart = '*'.repeat(username.length - 1);
		return firstChar + maskedPart;
	}
</script>

<template>
	<view class="appbw">
		<view class="listBox ptb30 plr30">
			<view class="list rows ptb30 plr10" v-for="(item,index) in list.data" :key="index">
				<view class="avatar">
					<image class="wh100 cir" :src="item.avatatUrl" mode="aspectFill" />
				</view>
				<view class="f1 ml20">
					<view class="name t2hd c333 f32">{{item.formatUserNickname}} 查看了你推广的内容</view>
					<view class="time mt10 c999 f28">{{item.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 
	.listBox {

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