<template>
	<niu-page>
		<niu-navbar fixed color="white" bg="#39b54a">
			Socket
		</niu-navbar>
		<view class="content">
			<view class="input-box">
				<input type="text" v-model="loginName" :disabled="isLogin" class="input" placeholder="请输入名字">
				<view class="button success" @click="connect">连接</view>
				<view class="button del" @click="disconnect">断开</view>
			</view>
			<view class="input-box">
				<input type="text" v-model="msg" class="input" placeholder="请输入消息">
				<view class="button" @click="submit">提交</view>
			</view>
			<view class="talkbox" v-for="(item, index) in msgList" :key="index">
				<view v-if="item.ev==='msg'" class="msg">
					<view class="text">
						{{item.data}}
					</view>
				</view>
				<view class="other talk" v-if="item.ev==='text'&&item.user&&item.user.id!=loginName">
					<view class="talk__info">
						{{item.user.id}}
					</view>
					<view class="talk__content" @click="clickSend(item,index)">
						<view class="text">
							{{item.data}}
						</view>
						<view class="error" v-if="item._success==2"></view>
					</view>
				</view>
				<view class="my talk" v-if="item.ev==='text'&&(item.user&&item.user.id==loginName || item._success==2)">
					<view class="talk__content" @click="clickSend(item,index)">
						<view class="error" v-if="item._success==2"></view>
						<view class="text">
							{{item.data}}
						</view>
					</view>
					<view class="talk__info">
						{{loginName}}
					</view>
				</view>
			</view>
		</view>
	</niu-page>
</template>

<script>
	import socket, {
		Msg
	} from "./socket.js"
	export default {
		data() {
			return {
				isLogin: false,
				loginName: '',
				msg: '',
				msgList: []
			};
		},
		onLoad() {
			socket.event.on("onOpen", this.onOpen)
			socket.event.on("onClose", this.onClose)
			socket.event.on("onMessage", this.onMessage)
		},
		beforeDestroy() {
			socket.event.off("onMessage", this.onMessage)
			socket.event.off("onOpen", this.onOpen)
			socket.close()
		},
		methods: {
			async onClose() {
				this.isLogin = false
			},
			async onOpen() {
				this.isLogin = true
				socket.send(Msg.create("login", this.loginName, 0))
				/**
				 * 自动发送未成功的消息
				 */
				// let list = this.msgList.filter(v=>v._success!==1).reverse();
				// this.msgList = this.msgList.filter(v=>v._success==1);
				// let len = list.length;
				// for (var i = len -1; i >= 0; i--) {
				// 	const msg = list[i]
				// 	if(msg&&msg._success!==1){
				// 		await socket.send({...msg, _success: 0})
				// 	}
				// }
			},
			onMessage(data) {
				console.log("onMessage", data);
				if (data.ev === "text") {
					this.msgList.push(data)
				}
				if (data.ev === "msg") {
					this.msgList.push(data)
				}
			},
			async clickSend(msg, i) {
				if (msg._success == 2) {
					this.msgList.splice(i, 1);
					try {
						await socket.send(Msg.clone(msg, 0))
					} catch (e) {
						console.log(e);
					}
				}
			},
			connect() {
				if(!this.loginName) return
				socket.initConnect()
			},
			disconnect() {
				socket.close()
			},
			async submit() {
				if (this.msg == "") return
				await socket.send(Msg.create("text", this.msg, 0))
				this.msg = ""
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "./Socket.scss";
</style>