<template>
	<view class="barrage" v-if="!!barrageInfo&&(!!barrageInfo.avatar)">
		<view class="mbList" :style="{ top: topH, left: topW }">
			<view class="mbPackage">
				<image :src="barrageInfo.avatar" class="barrageImg verCenter" v-if="!!barrageInfo.avatar"></image>
				<text class="font26 colorW lineH50 verCenter pL10">{{ barrageInfo.nickname }}开通了{{ barrageInfo.day }}天{{ halfcardtext }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		barrageList: {
			type: Array,
			default: []
		},
		barrageType: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			barrageInfo:{},
			topH: null,
			topW: null,
			itempx: null,
			halfcardtext: ''
		};
	},
	mounted() {
		let _this = this;
		// console.info('barrageInfo',(!!_this.barrageInfo.avatar))
		uni.getStorage({
			key: 'TextSubstitution',
			success: function(res) {
				_this.halfcardtext = res.data.halfcardtext;
			}
		});
		setTimeout(()=>{
			_this.clock()
		},5000)
	},
	watch: {
	},
	onReady() {
		let _this = this;
	},
	onHide() {
		console.info('onHide');
		let _this = this;
	},
	onUnload() {
		console.info('onUnload');
	},
	methods: {
		clearSet() {
			console.info('我执行了');
			let _this = this;
			clearInterval(_this.set1);
			clearInterval(_this.set2);
			clearInterval(_this.set3);
		},
		clock(w, h) {
			let _this = this;
			console.info('执行2');
			_this.set1 = setInterval(barrage, 4000);
			function barrage() {
				let i = Math.ceil(Math.random() * _this.barrageList.length);
				_this.barrageInfo = _this.barrageList[i - 1];
				// console.info('barrageInfo',(!!_this.barrageInfo.avatar))
			}
			_this.set2 = setInterval(barrageh, 4000);
			function barrageh() {
				let i = Math.ceil(Math.random() * uni.upx2px(400));
				uni.createSelectorQuery()
					.select('.mbList')
					.boundingClientRect(data => {
						_this.itempx = uni.upx2px(750) + 'px';
						_this.topH = i + 'px';
					})
					.exec();
			}
			_this.set3 = setInterval(barrageW, 4000);
			function barrageW() {
				let i = Math.ceil(Math.random() * h);
				_this.topW = i - _this.itempx;
				if (_this.topW < 0) {
					_this.topW = 0 + 'px';
				} else {
					_this.topW = i - _this.itempx + 'px';
				}
			}
		}
	}
};
</script>

<style lang="less">
@keyframes myfirst {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.barrageImg {
	width: 30upx;
	height: 30upx;
	border-radius: 50%;
}
.mbList {
	animation-iteration-count: infinite;
	animation-duration: 4s;
	animation-name: myfirst;
	position: absolute;
	height: 50upx;
	background: rgba(0, 0, 0, 0.65);
	display: inline-block;
	border-radius: 20upx;
}
.mbPackage {
	padding: 0 20upx;
}
.font26 {
	font-size: 26upx;
}
.colorW {
	color: white;
}
.lineH50 {
	line-height: 50upx;
}
.verCenter {
	vertical-align: middle;
}
.pL10 {
	padding-left: 10upx;
}
</style>
