<style type="text/css" scoped>
	
	.popup-body {
		position: fixed;
		bottom: 15px;
		right: 15px;
		min-height: 50px;
		min-width: 200px;
		max-width: calc(100% - 20px);
		z-index: 1002;
		border-top: 2px solid #21ba45;
		box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;

		color: var(--text_color);
		background-color: var(--background_color);
	}
	.popup-row {
		padding: 1em 5px;
		cursor: pointer;
		white-space: nowrap;
	}
	.popup-row > span {
		width: calc(100% - 50px);
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
		padding: 0 10px 0;
		font-size: 1.25em;
	}
	.popup-row + .popup-row {
		border-top: 1px solid #000;
	}

</style>

<template>
	<div class="popup-body" v-on:click="dismiss" v-if="notifications.length > 0">
		<div class="popup-row" v-for="item in notifications">
			<i class="disabled angle left icon"></i>
			<span>{{ item }}</span>
			<i class="disabled angle right icon"></i>
		</div>
	</div>
</template>

<script>

	import axios from 'axios'

	export default {
		name: 'GlobalNotificationComponent',
		data () {
			return {
				notifications: [],
				totalTimeout: null,
			}
		},
		beforeMount(){
			this.$bus.$on('notification', info => {
				this.displayNotification(info)
			})
		},
		mounted(){
			

		},
		methods: {
			displayNotification(newNotification){
				this.notifications.push(newNotification)
				clearTimeout(this.totalTimeout)
				this.totalTimeout = setTimeout(() => {
					this.dismiss()
				}, 4000)
			},
			dismiss(){
				this.notifications = []
			}
		}
	}
</script>
