<template>
	<view class="anchor-bar" :style="{ paddingTop: statusBar + 'px' }">
		<view class="anchor-back" @tap="$emit('back')">
			<text class="anchor-icon">‹</text>
		</view>
		<view class="anchor-card">
			<image class="anchor-avatar" :src="avatar" mode="aspectFill" />
			<view class="anchor-meta">
				<text class="anchor-name">{{ name }}</text>
				<text class="anchor-online">{{ online }} 人在线</text>
			</view>
			<view v-if="showFollow" class="anchor-follow" :class="{ on: followed }" @tap="$emit('follow')">
				<text>{{ followed ? '已关注' : '关注' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'AnchorBar',
	props: {
		statusBar: { type: Number, default: 0 },
		name: { type: String, default: '' },
		avatar: { type: String, default: '' },
		online: { type: [Number, String], default: 0 },
		followed: { type: Boolean, default: false },
		showFollow: { type: Boolean, default: true }
	}
}
</script>

<style scoped>
.anchor-bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 20;
	padding-left: 24rpx;
	padding-right: 24rpx;
}
.anchor-back {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
}
.anchor-icon {
	color: #fff;
	font-size: 48rpx;
	line-height: 72rpx;
	text-align: center;
}
.anchor-card {
	flex-direction: row;
	align-items: center;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 999rpx;
	padding: 8rpx 20rpx 8rpx 8rpx;
}
.anchor-avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	margin-right: 16rpx;
}
.anchor-meta {
	flex: 1;
}
.anchor-name {
	color: #fff;
	font-size: 28rpx;
	font-weight: 600;
}
.anchor-online {
	color: rgba(255, 255, 255, 0.75);
	font-size: 22rpx;
	margin-top: 4rpx;
}
.anchor-follow {
	padding: 12rpx 28rpx;
	border-radius: 999rpx;
	background: #ff4d6d;
}
.anchor-follow.on {
	background: rgba(255, 255, 255, 0.2);
}
.anchor-follow text {
	color: #fff;
	font-size: 24rpx;
}
</style>
