<view class="index-view">
	<image class='background-img' src="/images/background-img.png" mode="widthFix"></image>
	<view hidden="{{!showInput}}" class='msg-input' style="bottom: {{msgInputBottom}}px;">
		<input type="text" confirm-type="send" bindfocus="foucusInput" focus="{{showInput}}"
					bindconfirm="sendMsg" bindblur="blurInput" adjust-position="{{false}}" value="{{inputVal}}"/>
		<button size="mini" bindtap="sendMsg">發(fā)送</button>
	</view>
	<image hidden="{{showInput}}" class='click-img' src="/images/msg-click-btn.png" bindtap="clickSendMsg"></image>
</view>

<view class="barrage-view">
	<view wx:for="{{barrageLineCount}}" wx:for-item="count" 
			wx:for-index="lineIndex" data-index="{{lineIndex}}" 
			wx:key="*this" class="barrage-line">
		<view class='barrage-msg' wx:for="{{barrageMsgs[lineIndex].msgInfos}}" 
				wx:key="msg">
			<image class='barrage-avatar' src='{{item.avatarUrl}}'></image>
			<text class='barrage-text'>{{item.msg}}</text>
		</view>
	</view>
</view>

const app = getApp();
Page({
	/**
	 * 頁面的初始數(shù)據(jù)
	 */
	data: {
			msgInputBottom: 0,
			inputVal: "",
			showInput: false,
			barrageLineCount: 10,
			// 拉取最新彈幕的毫秒值
			barragePullMillis: 0,
			// 最新的彈幕
			barrageNewMsgs: [],
			// 已顯示的彈幕，無新彈幕時則循環(huán)
			barrageSendedMsgs: [],
			// 彈幕顯示數(shù)據(jù)
			barrageMsgs: []
	},
	foucusInput: function(e) {
		this.setData({ msgInputBottom: e.detail.height })
	},
	blurInput: function(e) {
		this.setData({ inputVal: e.detail.value, msgInputBottom: 0, showInput: false })
	},
	clickSendMsg: function(e) {
		this.setData({ showInput: true })
	},
	sendMsg: function(e) {
			const msg = this.data.inputVal;
			if (msg == "") return;
			
			const userInfo = app.getUserInfo();
			wx.request({
				url: app.globalData.baseUrl + '/barrageMsg/',
				data: { memberId: userInfo.id, msg: msg},
				method: 'PUT'
			})
			this.setData({ inputVal: "" });
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面加載
	 */
	onLoad(options) {
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
	 */
	onReady() {
		// 初始化barrageLineCount個彈幕行
		let barrageMsgs = this.data.barrageMsgs;
		const barrageLineCount = this.data.barrageLineCount;
		const nowTimeMillis = new Date().getTime();
		for(var i = 0; i < barrageLineCount; i++)
			barrageMsgs.push({'showTimeMillis': new String(nowTimeMillis - 
				Math.round(Math.random() * barrageLineCount) * 1000), msgInfos: []});
		this.setData({ barrageMsgs: barrageMsgs });
		// 每隔2s拉取最新的彈幕
		setInterval((that) => {
			wx.request({
				url: app.globalData.baseUrl + '/barrageMsg/',
				data: { timeMillis: that.data.barragePullMillis },
				method: 'GET',
				success: res => {
					const data = res.data.data;
					if (data == null) return;
					that.setData({ barrageNewMsgs: data.barrageMsgList, 
						barragePullMillis: data.lastPullMillis });
				}
			});
		}, 2000, this);
		// 動態(tài)顯示彈幕
		setInterval((that) => {
			var arrSort = [];
			const barrageLineCount = this.data.barrageLineCount;
			for(var i = 0; i < barrageLineCount; i++) arrSort.push(i);
			arrSort.sort(() => (0.5 - Math.random()));
			var nowTimeMillis = new Date().getTime();
			var barrageNewMsgs = that.data.barrageNewMsgs;
			if (barrageNewMsgs != null && barrageNewMsgs.length > 0) {
				// 有最新彈幕
				var barrageMsgs = that.data.barrageMsgs;
				for(var j = 0; j < arrSort.length; j++) {
					var barrageMsg = barrageMsgs[arrSort[j]];
					// 獲取最后發(fā)起的彈幕超過5s則跟在后面
					if (nowTimeMillis - barrageMsg.showTimeMillis > 5000) {
						// 顯示
						barrageMsg.showTimeMillis = nowTimeMillis;
						const barrageNewMsg = barrageNewMsgs[0];
						barrageNewMsg.showTimeMillis = nowTimeMillis;
						barrageMsg.msgInfos.push(barrageNewMsg);
						barrageMsgs[arrSort[j]] = barrageMsg;
						// 在最新彈幕中刪除此條彈幕
						barrageNewMsgs.splice(0, 1);
						that.setData({ barrageNewMsgs: barrageNewMsgs, 
							barrageMsgs: barrageMsgs });
						break;
					}
				}
			}
			// 回收每個超過10s的彈幕放到barrageSendedMsgs中
			var barrageMsgs = that.data.barrageMsgs;
			for(var i = 0; i < barrageMsgs.length; i++) {
				var barrageMsg = barrageMsgs[i];
				var msgInfos = barrageMsg.msgInfos;
				if (msgInfos == null || msgInfos.length == 0 ||
					nowTimeMillis -	msgInfos[0].showTimeMillis <= 10000) continue;
				var barrageSendedMsgs = that.data.barrageSendedMsgs;
				for (var j = 0; j < msgInfos.length; j++) {
					var msgInfo = msgInfos[j];
					if (nowTimeMillis - msgInfo.showTimeMillis <= 10000) break;
					msgInfos.splice(j, 1); j--;
					barrageSendedMsgs.push(msgInfo);
				}
				barrageMsg.msgInfos = msgInfos;
				barrageMsgs[i] = barrageMsg;
				that.setData({ barrageMsgs: barrageMsgs, 
					barrageSendedMsgs: barrageSendedMsgs });
			}
			// 新的彈幕未發(fā)完，老彈幕不循環(huán)
			if (barrageNewMsgs != null && barrageNewMsgs.length > 0) return;
			// 從barrageSendedMsgs取開頭1條進(jìn)行播放后刪除，由上文代碼再次放入實現(xiàn)循環(huán)
			var barrageSendedMsgs = that.data.barrageSendedMsgs;
			if (barrageSendedMsgs.length == 0) return;
			var barrageSendedMsg = barrageSendedMsgs[0];
			for(var j = 0; j < arrSort.length; j++) {
				var barrageMsg = barrageMsgs[arrSort[j]];
				// 獲取最后發(fā)起的彈幕超過5s則跟在后面
				if (nowTimeMillis - barrageMsg.showTimeMillis > 5000) {
					// 顯示
					barrageMsg.showTimeMillis = nowTimeMillis;
					barrageSendedMsg.showTimeMillis = nowTimeMillis;
					barrageMsg.msgInfos.push(barrageSendedMsg);
					barrageMsgs[arrSort[j]] = barrageMsg;
					// 在已發(fā)彈幕中刪除此條彈幕
					barrageSendedMsgs.splice(0, 1);
					that.setData({ barrageSendedMsgs: barrageSendedMsgs, 
						barrageMsgs: barrageMsgs });
					break;
				}
			}
		}, 500, this);
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面顯示
	 */
	onShow() {
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
	 */
	onHide() {
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面卸載
	 */
	onUnload() {
	},
	/**
	 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
	 */
	onPullDownRefresh() {
	},
	/**
	 * 頁面上拉觸底事件的處理函數(shù)
	 */
	onReachBottom() {
	},
	/**
	 * 用戶點(diǎn)擊右上角分享
	 */
	onShareAppMessage() {
	}
})

.index-view {
	display: flex;
	width: 100%;
	align-content: center;
	justify-content: center;
}
.background-img { width: 100%; }
.msg-input { position: absolute; width: 100%; bottom: 0px; 
	background-color: rgba(241, 213, 135, 0.911); }
.msg-input input{ margin: 20rpx 1% 10rpx 1%; width: 75%; height: 60rpx;
	border: none; padding: 5rpx 10px 5rpx 10px; border-radius: 8px; 
	background-color: #ffffff; display: inline-block; }
.msg-input button { width: 15%; display: inline-block; font-size: 30rpx; color: rgba(241, 213, 135, 0.911);
	margin: 20rpx 0px 13rpx 0px; border-radius: 5px; background-color: rgb(247, 40, 40);}
.click-img { position: absolute; width: 40%; height: 20%; bottom: 18%; }

.barrage-view { position: absolute; top: 10rpx; margin-top: 30rpx; }
.barrage-line { height: 80rpx; }
.barrage-msg { position: fixed; left: 100%; width: 80%; animation: barrage-msg 10s linear 0s 1; }
.barrage-text { height: 45rpx; }
.barrage-avatar { width: 45rpx; height: 45rpx; border-radius: 20rpx; margin-right: 10rpx; }
@keyframes barrage-msg {
  from {
    left: 100%;
    transform: translateX(0);
  }
  to {
    left: 0;
    transform: translateX(-100%);
  }
}