<template>
  <div class='scroll_load' @scroll='handler'>
    <c-loading-icon v-if='position === "top" && loading'>LOAD TOP</c-loading-icon>
    <slot></slot>
    <c-loading-icon v-if='position === "bottom" && loading'>LOAD BOTTOM</c-loading-icon>
  </div>
</template>

<script>

export default {
  name: 'c-scroll-load',
  props: ['position', 'loading'],
  methods: {
    handler (e) {
      let $el = e.target;
      let height = $el.scrollHeight - $el.scrollTop - 16 <= $el.clientHeight;

      if(
          (this.position === 'top' && $el.scrollTop < 16) ||
          (this.position === 'bottom' && height)
      ) {
        this.$emit('load');
      }
    }
  }
};
</script>