<template>
  <transition-group tag="div" class="n-notice" name="n-notice" appear
                    @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
    <template v-for="data in dataList">
      <div class="n-notice-position" :key="data.id">
        <n-notice-item :key="data.id" v-bind="data" @destroy="onDestroy(data)"></n-notice-item>
      </div>
    </template>
  </transition-group>
</template>
<script>
import NNoticeItem from './notice-item'
import { delay, spliceBy } from '@uif/next/lib/utils/tools'

let count = 0

export default {
  name: 'n-notice',
  components: {NNoticeItem},
  data () {
    return {
      dataList: []
    }
  },
  methods: {
    show (data) {
      this.dataList.push(Object.assign({}, data, {id: count++}))
    },
    onDestroy (data) {
      spliceBy(this.dataList, ({id}) => id !== data.id)
    },
    onBeforeLeave (el) {
      el.style.width = el.offsetWidth + 'px'
      el.style.height = el.offsetHeight + 'px'
    },
    async onAfterLeave () {
      await delay(200)
      if (!this.dataList.length) {
        this.$emit('destroy')
      }
    }
  }
}
</script>
