<template>
  <div class="toast-host">
    <div
      v-for="item in list"
      :key="item.id"
      class="toast-item"
      :class="{ 'is-error': item.type === 'error', 'is-success': item.type === 'success' }"
    >
      {{ item.message }}
    </div>
  </div>
</template>

<script>
let uid = 0

export default {
  name: 'ToastHost',
  data() {
    return {
      list: []
    }
  },
  methods: {
    push({ message, type = 'info', duration = 2000 }) {
      const id = ++uid
      this.list.push({ id, message, type })
      setTimeout(() => {
        this.list = this.list.filter((item) => item.id !== id)
      }, duration)
    }
  }
}
</script>
