<template>
	<view class="broadcast-overlay">
		<view class="broadcast-overlay-header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<wanl-live-header
				:shopdata="shopdata"
				:state="state"
				:online="online"
				:confirmBeforeBack="true"
				:showFollowButton="false"
				@back="$emit('back')"
			/>
		</view>
		<view
			v-if="state === 1"
			class="broadcast-overlay-message"
			:style="{ bottom: statusFootHeight + 60 + 'px' }"
		>
			<wanl-live-message ref="message" />
		</view>
		<view
			v-if="state === 1"
			class="broadcast-overlay-like"
			:style="likeStyle"
			@tap="onLikeTap"
		>
			<view class="broadcast-like-btn">
				<image class="broadcast-like-icon" src="/static/icon/thumb-up.png" mode="aspectFit" />
			</view>
			<text v-if="like > 0" class="broadcast-like-num">{{ likeText }}</text>
		</view>
		<view class="broadcast-overlay-control" :style="{ bottom: statusFootHeight + 'px' }">
			<wanl-live-control
				:statusFootHeight="statusFootHeight"
				:screenHeight="screenHeight"
				:screenWidth="screenWidth"
				:liveId="liveId"
				:like="like"
				:state="state"
				@send="$emit('send', $event)"
				@change="onControlChange"
			/>
		</view>
	</view>
</template>

<script>
import wanlLiveHeader from '@/components/live-room/header.vue'
import wanlLiveMessage from '@/components/live-room/message.vue'
import wanlLiveControl from '@/components/live-room/control.vue'

export default {
	name: 'LiveBroadcastOverlay',
	components: {
		wanlLiveHeader,
		wanlLiveMessage,
		wanlLiveControl
	},
	props: {
		shopdata: { type: Object, default: () => ({}) },
		state: { type: Number, default: 0 },
		online: { type: Number, default: 0 },
		like: { type: Number, default: 0 },
		liveId: { type: [Number, String], default: 0 },
		statusBarHeight: { type: Number, default: 0 },
		statusFootHeight: { type: Number, default: 0 },
		screenHeight: { type: Number, default: 0 },
		screenWidth: { type: Number, default: 0 }
	},
	computed: {
		likeStyle() {
			const upx = typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px.bind(uni) : (v) => v / 2
			const barPx = upx(112)
			const btnPx = upx(84)
			return {
				bottom: `${this.statusFootHeight + Math.max(0, (barPx - btnPx) / 2)}px`,
				right: '24rpx'
			}
		},
		likeText() {
			const n = Number(this.like) || 0
			if (n <= 0) return ''
			return n > 9999 ? `${Math.floor((n - n % 1000) / 10000)}w` : String(n)
		}
	},
	methods: {
		onLikeTap() {
			this.$emit('send', { type: 'like' })
		},
		onControlChange(method, data) {
			this.$emit('change', method, data)
		},
		onMessage(msg) {
			const ref = this.$refs.message
			if (ref && typeof ref.onMessage === 'function') {
				ref.onMessage(msg)
			}
		}
	}
}
</script>

<style>
/* #ifndef APP-NVUE */
page {
	background-color: transparent !important;
}
/* #endif */

.broadcast-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: transparent;
}

.broadcast-overlay-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background-color: transparent;
}

.broadcast-overlay-message {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 50;
	background-color: transparent;
}

.broadcast-overlay-control {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 60;
	background-color: transparent;
}

.broadcast-overlay-like {
	position: absolute;
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 84rpx;
}

.broadcast-like-btn {
	width: 72rpx;
	height: 72rpx;
	border-radius: 36rpx;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.broadcast-like-icon {
	width: 48rpx;
	height: 48rpx;
}

.broadcast-like-num {
	margin-top: 4rpx;
	color: rgba(255, 255, 255, 0.75);
	font-size: 20rpx;
	line-height: 26rpx;
	text-align: center;
}
</style>
