<template>
	<view class="top-info-bar" v-if="!isFullscreen"
		:style="{ background: liveItem.showType == 2 ? 'rgba(0,0,0,0.45)' : '#fff' }"
		:class="{ 'horizontal-top': liveItem.showType == 1, 'hidden-on-fullscreen': isFullscreen }">
		<view v-if="Array.isArray(filteredViewers)" class="viewers-section">
			<view :style="{ color: liveItem.showType == 2 ? '#fff' : 'rgba(0,0,0,0.85)' }"
				style="display: flex;align-items: center;">
				<view style="font-size: 28rpx;line-height: 40rpx;margin-right: 24rpx">已观看人数</view>
				<view v-for="(item, index) in (filteredViewers || [])" :key="index"
					style="display: flex;align-items: center;">
					<image v-if="item" class="viewer-avatar mr4" :src="item" />
				</view>
				<view class="viewer-count">{{ formattedWatchCount || 0 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'LiveViewerBar',
	props: {
		liveItem: {
			type: Object,
			default: () => ({})
		},
		isFullscreen: {
			type: Boolean,
			default: false
		},
		filteredViewers: {
			type: Array,
			default: () => []
		},
		formattedWatchCount: {
			type: [String, Number],
			default: 0
		}
	}
}
</script>

<style scoped lang="scss">
.top-info-bar {
	position: fixed;
	top: 0;
	z-index: 5;
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;

	&.horizontal-top {
		position: static;
	}

	.viewers-section {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.viewer-avatar {
			width: 52rpx;
			height: 52rpx;
			border-radius: 26rpx;
		}

		.viewer-count {
			font-weight: 400;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-left: 24rpx;
		}
	}
}
</style>
