<template>
  <vue-scroll ref="vueScroll" :ops="defaultOpt" @handle-scroll="reachBottom">
    <slot></slot>
  </vue-scroll>
</template>
<script>
import VueScroll from 'vuescroll'
import 'vuescroll/dist/vuescroll.css'

export default {
  components: {
    VueScroll,
  },
  props: {
    opt: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultOpt: {
        bar: {
          background: 'rgba(0,0,0,0.2)',
          keepShow: false,
          size: '6px',
          minSize: 0,
        },
        rail: {
          // size: '10px',
          // border: '1px solid #E6E6E6',
          // gutterOfSide: "5px"
        },
        scrollPanel: {
          scrollingX: false,
        },
      },
    }
  },

  computed: {
    option() {
      return Object.assign(this.defaultOpt, this.opt)
    },
  },
  methods: {
    // vertical, horizontal, nativeEvent
    reachBottom(vertical, horizontal, nativeEvent) {
      if (vertical.process === 1) {
        this.$emit('reachBottom')
      }
      this.$emit('onScroll', { vertical, horizontal, nativeEvent })
    },
    getScrollProcess() {
      return this.$refs.vueScroll.getScrollProcess()
    },
    scrollTo(obj) {
      this.$refs.vueScroll.scrollTo(obj)
    },
  },
}
</script>
