<template>
	<view class="wanl-live-message">
		<view class="wanl-live-comment">
			<view class="wanl-live-comment-item">
				 <scroll-view scroll-y="true" :show-scrollbar="false" :scroll-into-view="scrollToView" :scroll-with-animation="true" class="wanl-live-comment-item-scroll">
					<!-- #ifdef APP -->
					<view class="wanl-live-comment-item-scroll-app" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
						<view class="wanl-live-comment-item-scroll-app-item">
							<text :class="[iscolor(item.form.id)]" class="app-text">{{item.form.nickname}}：</text>
							<text class="app-context">{{item.text}}</text>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<div class="wanl-live-comment-item-scroll-h5" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
					 	<div class="wanl-live-comment-item-tag">
					 		<text :class="[iscolor(item.form.id)]" class="mph5-text">{{item.form.nickname}}：</text>
							<text class="mph5-context">{{item.text}}</text>
					 	</div>
					</div>
					<!-- #endif -->
		            <!-- #ifdef MP -->
					<div class="wanl-live-comment-item-scroll-mp" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
					 	<div class="wanl-live-comment-item-tag">
					 		<text :class="[iscolor(item.form.id)]" class="mph5-text">{{item.form.nickname}}：</text>
							<text class="mph5-context">{{item.text}}</text>
					 	</div>
					</div>
		            <!-- #endif -->
		        </scroll-view>
			</view>
			<view class="wanl-live-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="comingShow">
			<view class="wanl-live-coming">
				<text class="wanl-live-coming-text">{{comingName}} 他来了他来了~</text>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: "wanlLiveMessage",
		data() {
			return {
				scrollToView: 'msg1',
				comingShow: false,
				comingName: '',
				watchTimer: null,
				msgList: [],
				likeList: []
			};
		},
		created() {
			setTimeout(() => {
				this.msgList.push({
					form: {
						id: 0,
						nickname: '平台提醒'
					},
					text: '谨防上当受骗！'
				});
			}, 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();
					}
					this.msgList.push({
						form: form,
						text: message.text
					});
					this.$nextTick(() => {
						this.scrollToView = `msg${this.msgList.length - 1}`;
					});
				}else if (message.type == 'coming') {
					if (this.comingShow) {
						clearTimeout(this.watchTimer);
						this.comingShow = false;
					}
					this.comingName = form.nickname;
					this.openComing();
				}
			},
			openComing() {
				this.comingShow = true;
				this.watchTimer = setTimeout(() => {
					this.comingShow = 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';
	/* 群组消息 */
	.wanl-live-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;
	}
		.wanl-live-comment-item{
			overflow: hidden;
			color: #FFFFFF;
			flex: 1;
		}
			.wanl-live-comment-item-scroll{
				/* #ifdef H5 || MP */
				max-height: 500rpx;
				min-height: 60rpx;
				/* #endif */
				/* #ifdef APP */
				height: 500rpx;
				/* #endif */
			}
			/* #ifdef H5 || MP */
			.wanl-live-comment-item-scroll-h5{
				margin-top: 6rpx;
				overflow: hidden;
				display: flex;
			}
			.wanl-live-comment-item-scroll-mp{
				margin-bottom: 6rpx;
				overflow: hidden; 
				display: block;
			}
				.wanl-live-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 */
			.wanl-live-comment-item-scroll-app{
				flex-direction: row;
				margin-top: 6rpx;
			}
				.wanl-live-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;
				}
	
		/* 点赞特效	 */
		.wanl-live-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 */
	/* 欢迎信息 */
	.wanl-live-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;
	}
		.wanl-live-coming-text {
			color: #ffffff;
			font-size: 28rpx;
		}
	.app-text{
		font-size: 29rpx;
	}
	.app-context{
		font-size: 29rpx;
		color: #ffffff;
	}
	.mph5-text{
		font-size: 26rpx;
	}
	.mph5-context{
		font-size: 26rpx;
		color: #ffffff;
	}
</style>
