<template>
  <div class="scroll-list" :style="`height: ${height}px`" @scroll="onScroll">
    <div class="content">
      <slot></slot>
    </div>
    <div class="loading" v-if="loading && !finished">
      <Icon type="ios-loading" />
    </div>
  </div>
</template>

<script>
export default {
  components: {

  },

  mixins: [],

  props: {
    height: {
      type: Number,
      default: 320
    },
    offset: {
      type: Number,
      default: 50
    },
    finished: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      l: ''
    }
  },

  computed: {

  },

  mounted () {

  },

  methods: {
    onScroll () {
      if (this.finished && this.loading) {
        return
      }
      clearTimeout(this.l)
      this.l = setTimeout(() => {
        let content = document.querySelector('.content')
        let box = document.querySelector('.scroll-list')
        let SH = content.scrollHeight
        let ST = box.scrollTop
        let CH = this.height // 可视区
        if (SH - this.offset <= CH + ST) {
          console.log('onloadd')
          this.$emit('onLoad')
        }
      }, 1000)
    }
  }

}
</script>

<style scoped lang="less" >
.scroll-list {
  position: relative;
  overflow-y: auto;
  .loading {
    text-align: center;
    color: #2db7f5;
    i {
       animation: circle 1s ease-in-out infinite;
    }
  }
}
@keyframes circle {
  0% {
    transform: rotate(0)
  }
  50% {
    transform: rotate(180deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
</style>
