<template>
	<div class="logs">
		<div class="message" v-for="item in messages">{{ item }}</div>
	</div>
</template>

<script>
export default {
	name: "Logs",
	data: function () {
		return {
			messages: []
		}
	},
	mounted() {
		this.bindEvents();
	},
	methods: {
		bindEvents () {
			this.$socket.on('log', this.handleSocketLog, this);
		},
		handleSocketLog(data) {
			const time = new Date().toLocaleString();
			this.messages.push(time + '\t' + data.title);
		}
	},
}
</script>

<style scoped lang="scss">
.logs {
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	overflow: hidden;
	overflow-y: auto;
	.message {
		text-align: left;
		font-size: 18px;
	}
}
</style>
