<template>
	<view class="hl88-lr-message">
		<view class="hl88-lr-comment">
			<view class="hl88-lr-comment-item">
				 <scroll-view scroll-y="true" :show-scrollbar="false" :scroll-into-view="anchorScrollIntoId" :scroll-with-animation="true" class="hl88-lr-comment-item-scroll">
					<!-- #ifdef APP -->
					<view class="hl88-lr-comment-item-scroll-app" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
						<view class="hl88-lr-comment-item-scroll-app-item">
							<text :class="[iscolor(item.form.id)]" class="hl88-lr-msgAppNm">{{item.form.nickname}}：</text>
							<text class="hl88-lr-msgAppBody">{{item.text}}</text>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<div class="hl88-lr-comment-item-scroll-h5" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
					 	<div class="hl88-lr-comment-item-tag">
					 		<text :class="[iscolor(item.form.id)]" class="hl88-lr-msgWebNm">{{item.form.nickname}}：</text>
							<text class="hl88-lr-msgWebBody">{{item.text}}</text>
					 	</div>
					</div>
					<!-- #endif -->
		            <!-- #ifdef MP -->
					<div class="hl88-lr-comment-item-scroll-mp" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
					 	<div class="hl88-lr-comment-item-tag">
					 		<text :class="[iscolor(item.form.id)]" class="hl88-lr-msgWebNm">{{item.form.nickname}}：</text>
							<text class="hl88-lr-msgWebBody">{{item.text}}</text>
					 	</div>
					</div>
		            <!-- #endif -->
		        </scroll-view>
			</view>
			<view class="hl88-lr-like">
				<!-- #ifndef APP -->
				<view v-for="(item,index) in likeList" :data-t="index" :key="index" :class="item.class"></view>
				<!-- #endif -->
			</view>
		</view>
		<uni-transition 
			:mode-class="['slide-left']" 
			:styles="{ 'position':'absolute', 'left':'0', 'top':'-60rpx', }"
			:show="enterNoticeVisible">
			<view class="hl88-lr-coming">
				<text class="hl88-lr-coming-text">{{ enterNoticeNickname }} 他来了他来了~</text>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: 'LiveRoomMessage',
		data() {
			return {
				anchorScrollIntoId: 'msg1',
				enterNoticeVisible: false,
				enterNoticeNickname: '',
				enterNoticeTimer: null,
				msgList: [],
				likeList: [],
				// 短时去重：同一条文字消息（如发送端+推送）2 秒内相同指纹只显示一次
				lastTextMsgFingerprints: []
			};
		},
		created() {
			setTimeout(() => {
				this.msgList.push({
					form: {
						id: 0,
						nickname: 'Tips'
					},
					text: 'Beware of being deceived！'
				});
			}, 500);
			// #ifndef APP
			setInterval(() => {
				this.likeStart();
			}, 300);
			// #endif
		},
		methods: {
			// 测试使用
			likeStart() {
				var b = Math.floor(Math.random() * 6) + 1,
					bl = Math.floor(Math.random() * 11) + 1;
				this.likeList.push({class: `bubble b${b} bl${bl}`});
			},
			onMessage(msg) {
				var message = msg.message;
				var form = msg.form;
				if (message.type == 'msg' || message.type == 'seek' || message.type == 'follow' || message.type =='like' || message.type == 'review') {
					if(message.type =='like'){
						this.likeStart();
					}
					// 文字类消息短时去重，避免同一句显示多条（如重复监听或推送重复）
					const textFp = `${(form && form.id) || ''}|${message.type}|${(message.text || '').slice(0, 200)}`;
					const now = Date.now();
					const recent = this.lastTextMsgFingerprints.filter(e => now - e.t < 2000);
					if (recent.some(e => e.fp === textFp)) {
						return;
					}
					this.lastTextMsgFingerprints = recent.concat([{ fp: textFp, t: now }]).slice(-50);

					this.msgList.push({
						form: form,
						text: message.text
					});
					this.$nextTick(() => {
						this.anchorScrollIntoId = `msg${this.msgList.length - 1}`;
					});
				}else if (message.type == 'coming') {
					if (this.enterNoticeVisible) {
						clearTimeout(this.enterNoticeTimer);
						this.enterNoticeVisible = false;
					}
					this.enterNoticeNickname = form.nickname;
					this.openComing();
				}
			},
			openComing() {
				this.enterNoticeVisible = true;
				this.enterNoticeTimer = setTimeout(() => {
					this.enterNoticeVisible = false;
				}, 1000);
			},
			iscolor(id) {
				return ['text-orange', 'text-white', 'text-orange', 'text-yellow', 'text-green', 'text-olive', 'text-green','text-purple', 'text-pink', 'text-pink', 'text-purple'][parseInt(id % 10)]
			}
		}
	};
</script>


<style>
	@import '@/static/style/wanlnvue.css';
	.hl88-lr-message {
		background-color: transparent;
	}
	/* 群组消息 */
	.hl88-lr-comment{
		/* #ifndef APP */
		-webkit-mask: -webkit-gradient(linear,left 30%,left top,from(#000),to(transparent));
		/* #endif */
		margin-left: 25rpx;
		justify-content: space-between;
		flex-direction: row;
		position: relative;
	}
		.hl88-lr-comment-item{
			overflow: hidden;
			color: #FFFFFF;
			flex: 1;
		}
			.hl88-lr-comment-item-scroll{
				/* #ifdef H5 || MP */
				max-height: 500rpx;
				min-height: 60rpx;
				/* #endif */
				/* #ifdef APP */
				height: 500rpx;
				/* #endif */
			}
			/* #ifdef H5 || MP */
			.hl88-lr-comment-item-scroll-h5{
				margin-top: 6rpx;
				overflow: hidden;
				display: flex;
			}
			.hl88-lr-comment-item-scroll-mp{
				margin-bottom: 6rpx;
				overflow: hidden; 
				display: block;
			}
				.hl88-lr-comment-item-tag{
					background-color: rgba(0,0,0,.2);
					padding-top: 8rpx;
					padding-right: 16rpx;
					padding-bottom: 8rpx;
					padding-left: 16rpx;
					border-radius: 10rpx;
					overflow: hidden;
					display: inline-block;
				}
			/* #endif */
			.hl88-lr-comment-item-scroll-app{
				flex-direction: row;
				margin-top: 6rpx;
			}
				.hl88-lr-comment-item-scroll-app-item{
					background-color: rgba(0,0,0,.2); 
					padding-top: 8rpx;
					padding-right: 16rpx;
					padding-bottom: 8rpx;
					padding-left: 16rpx;
					border-radius: 10rpx;
					flex-direction: row;
				}
	
		/* 点赞特效	 */
		.hl88-lr-like{
			position: relative;
			/* #ifndef APP */
			flex: 0 0 120rpx;
			/* #endif */
			width: 120rpx; 
			height: 500rpx;
		}
			/* #ifndef APP */
			.bubble {
				position: absolute;
				width: 90rpx;
				height: 90rpx;
				bottom: 0;
				background-repeat: no-repeat;
				background-size: 100%;
				transform-origin: bottom;
			}
			.b1 {background-image: url(/static/images/live/1.png);}
			.b2 {background-image: url(/static/images/live/2.png);}
			.b3 {background-image: url(/static/images/live/3.png);}
			.b4 {background-image: url(/static/images/live/4.png);}
			.b5 {background-image: url(/static/images/live/5.png);}
			.b6 {background-image: url(/static/images/live/6.png);}
			.bl1 {animation: bubble_1 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl2 {animation: bubble_2 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl3 {animation: bubble_3 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl4 {animation: bubble_4 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl5 {animation: bubble_5 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl6 {animation: bubble_6 3s linear 1 forwards,bubble_big_3 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl7 {animation: bubble_7 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl8 {animation: bubble_8 3s linear 1 forwards,bubble_big_3 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl9 {animation: bubble_9 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl10 {animation: bubble_10 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			.bl11 {animation: bubble_11 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
			@keyframes bubble_11 {0% {}25% {margin-left: -20rpx;}50% {margin-left: -20rpx;}100% {margin-left: -36rpx;}}
			@keyframes bubble_10 {0% {}25% {margin-left: -40rpx;}50% {margin-left: -40rpx;}100% {margin-left: -40rpx;}}
			@keyframes bubble_9 {0% {}25% {margin-left: 20rpx;}50% {margin-left: 20rpx;}100% {margin-left: 20rpx;}}
			@keyframes bubble_8 {0% {}25% {margin-left: 40rpx;}50% {margin-left: 40rpx;}100% {margin-left: 40rpx;}}
			@keyframes bubble_7 {0% {}25% {margin-left: 6rpx;}50% {margin-left: 2rpx;}75% {margin-left: 4rpx;}100% {margin-left: 6rpx;}}
			@keyframes bubble_6 {0% {}25% {margin-left: -6rpx;}50% {margin-left: -2rpx;}75% {margin-left: -4rpx;}100% {margin-left: -6rpx;}}
			@keyframes bubble_5 {0% {}25% {margin-left: 10rpx;}50% {margin-left: -10rpx;}75% {margin-left: -20rpx;}100% {margin-left: -40rpx;}}
			@keyframes bubble_4 {0% {}25% {margin-left: -10rpx;}50% {margin-left: -10rpx;}75% {margin-left: 40rpx;}100% {margin-left: 20rpx;}}
			@keyframes bubble_3 {0% {}25% {margin-left: -40rpx;}50% {margin-left: 20rpx;}75% {margin-left: 40rpx;}100% {margin-left: -20rpx;}}
			@keyframes bubble_2 {0% {}25% {margin-left: 40rpx;}50% {margin-left: 50rpx;}75% {margin-left: 20rpx;}100% {margin-left: 10rpx;}}
			@keyframes bubble_1 {0% {}25% {margin-left: -16rpx;}50% {margin-left: 16rpx;}75% {margin-left: -30rpx;}100% {margin-left: 30rpx;}}
			@keyframes bubble_big_1 {0% {transform: scale(0.3);}100% {transform: scale(1.2);}}
			@keyframes bubble_big_2 {0% {transform: scale(0.3);}100% {transform: scale(0.9);}}
			@keyframes bubble_big_3 {0% {transform: scale(0.3);}100% {transform: scale(0.6);}}
			@keyframes bubble_y {0% {margin-bottom: 0;}10% {margin-bottom: 0;}75% {opacity: 1;}100% {margin-bottom: 400rpx;opacity: 0;}}
			/* #endif */
	/* 欢迎信息 */
	.hl88-lr-coming {
		margin-left: 25rpx;
		background-color: rgba(255, 86, 136, .7);
		padding-top: 8rpx;
		padding-right: 16rpx;
		padding-bottom: 8rpx;
		padding-left: 16rpx;
		border-radius: 10rpx;
	}
		.hl88-lr-coming-text {
			color: #ffffff;
			font-size: 28rpx;
		}
	.hl88-lr-msgAppNm{
		font-size: 29rpx;
	}
	.hl88-lr-msgAppBody{
		font-size: 29rpx;
		color: #ffffff;
	}
	.hl88-lr-msgWebNm{
		font-size: 26rpx;
	}
	.hl88-lr-msgWebBody{
		font-size: 26rpx;
		color: #ffffff;
	}
</style>
