<template>
	<view class="live-top-bar" v-if="liveItem && Object.keys(liveItem).length"
		:class="{ 'horizontal-top': liveItem.showType == 1, 'hidden-on-fullscreen': isFullscreen }"
		:style="{ marginTop: menuButtonInfo.top }">
		<view class="user-info-section">
			<image v-if="!scene && liveItem.showType == 2" @click="$emit('back')" class="back-icon mr4"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/return3.png" />
			<image v-if="!scene && liveItem.showType == 1" @click="$emit('back')" class="w42 h42 mr4"
				src="/static/images/return_black.png" />
			<view class="user-avatar-container">
				<u-avatar
					:src="liveItem.liveImgUrl || 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/avatar.png'"
					:size="32"></u-avatar>
				<view class="user-name ml10 mr6">
					<view>{{ liveItem.liveName ? truncateString(liveItem.liveName, 8) : '未命名' }}</view>
				</view>
			</view>
		</view>
		<view v-if="Array.isArray(filteredViewers)" class="viewers-section">
			<view style="display: flex;align-items: center;">
				<view v-for="(item, index) in (filteredViewers || [])" :key="index">
					<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: 'LiveTopBar',
		props: {
			liveItem: { type: Object, default: () => ({}) },
			menuButtonInfo: { type: Object, default: () => ({}) },
			scene: { type: [String, Boolean], default: '' },
			isFullscreen: { type: Boolean, default: false },
			filteredViewers: { type: Array, default: () => [] },
			formattedWatchCount: { type: [String, Number], default: 0 }
		},
		methods: {
			truncateString(str, maxLength) {
				if (typeof str !== 'string' || str.length <= maxLength) return str
				return str.slice(0, maxLength) + '...'
			}
		}
	}
</script>

<style scoped lang="scss">
	.live-top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		z-index: 10;
		position: relative;

		.user-info-section {
			display: flex;
			align-items: center;
		}

		.user-avatar-container {
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 40rpx;
			padding: 4rpx 16rpx 4rpx 4rpx;
		}

		.user-name {
			color: #fff;
			font-size: 24rpx;
		}

		.viewers-section {
			.viewer-avatar {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}

			.viewer-count {
				color: #fff;
				font-size: 24rpx;
				margin-left: 8rpx;
			}
		}

		.back-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.horizontal-top .user-avatar-container {
		background: rgba(255, 255, 255, 0.9);
	}

	.horizontal-top .user-name,
	.horizontal-top .viewer-count {
		color: #333;
	}
</style>
