<template>
  <RecycleList ref="scroll" :on-fetch="onFetch" :options="scrollOption" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
    <template slot="item" slot-scope="{ data }">
      <slot name="item" :data="data">
      </slot>
    </template>
  </RecycleList>
</template>

<script>
import {Scroll, RecycleList} from 'cube-ui';

export default {
  name: 'LayoutScroll',
  props: {
    onFetch: Function,
    infinite: Boolean,
    scrollOption: {
      type: Object,
      default() {
        return {
          pullDownRefresh: true,
          observeDOM: false,
          pullUpLoad: true
        };
      }
    }
  },
  methods: {
    onPullingUp(evt) {
      this.$emit('pulling-up', evt);
    },
    onPullingDown(evt) {
      this.$emit('pulling-down', evt);
    },
  },
  components: {Scroll, RecycleList}
};
</script>