<template>
  <el-popover
    trigger="hover"
    :close-delay="0"
  >
    <div class="l-flex--col c-pop-list">
      <event-item
        v-for="event in list"
        :key="event.key"
        class="c-pop-list__item"
        :event="event"
        fill
        v-bind="$attrs"
        v-on="$listeners"
      />
    </div>
    <template #reference>
      <slot />
    </template>
  </el-popover>
</template>

<script>
import EventItem from './EventItem'

export default {
  name: 'PopList',
  components: {
    EventItem
  },
  props: {
    events: {
      type: Array,
      default: null
    }
  },
  computed: {
    list () {
      return this.events ? this.events.slice(1) : []
    }
  }
}
</script>

<style lang="scss" scoped>
.c-pop-list {
  width: 200px;
  max-height: 200px;
  overflow-y: auto;
}
</style>
