<template>
	<view class="slide-group" v-if="!isFocus && !isFullscreen">
		<view class="action-button-group end">
			<view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical', 'icon-button', 'ml20']">
				<button open-type="share" class="action-icon button-reset">
					<image class="action-icon" src="@/static/images/weixin1.png" mode="widthFix" />
				</button>
			</view>
		</view>
		<view class="action-button-group end">
			<view
				:class="[liveItem.showType === 1 ? 'horizontal' : 'vertical', 'icon-button', 'ml20', 'like-container']"
				@click="onLike">
				<LikeButton :initialCount="100" :iconAmount="5" @change="onLike" />
				<view class="like-count">{{ formattedLikeCount || 0 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LikeButton from '@/pages_course/components/like.vue'

	export default {
		name: 'LiveSideActions',
		components: { LikeButton },
		props: {
			liveItem: { type: Object, default: () => ({}) },
			isFocus: { type: Boolean, default: false },
			isFullscreen: { type: Boolean, default: false },
			formattedLikeCount: { type: [String, Number], default: 0 }
		},
		methods: {
			onLike() {
				this.$emit('like')
			}
		}
	}
</script>

<style scoped lang="scss">
	.slide-group {
		position: absolute;
		right: 20rpx;
		top: 60%;
		z-index: 9000;
	}

	.action-button-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.icon-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		width: 88rpx;
		height: 88rpx;
	}

	.like-count {
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		margin-top: 4rpx;
	}

	.button-reset {
		background-color: transparent !important;
		padding: 0 !important;
		line-height: 1 !important;
		margin: 0 !important;
		width: auto !important;
		border-radius: 0 !important;

		&::after {
			border: none !important;
		}
	}
</style>
