<template>
  <div class="hello">
    <div class="no-data"
         v-if="noData">
      暂无数据
    </div>
    <div class="list"
         v-else>
      <div class="list-content">
        <!-- 数据列表 -->
      </div>
      <div class="is-loading"
           v-if="hasMore">加载中...</div>
      <div class="no-more"
           v-else> -- 我是有底线哒 -- </div>
    </div>
  </div>
</template>

export default {
  name: 'HelloWorld',
  data () {
    return {
      pageSize: 10,
      currentPage: 1,
      noData: false,
      hasMore: false,
      isLoading: false
    }
  },
  created () {
    this.getInit()
  },
  mounted () {
    window.addEventListener('scroll', this.scroll, false) // 监听（绑定）滚轮滚动事件
  },
  methods: {
    getInit () {
      this.currentPage = 1
      // 请求后台数据
      // 请求成功调用 initDataCallback 方法
      // this.initDataCallback(res.data)
    },
    getGoodList () {
      // 请求后台数据
      // 请求成功调用 initDataCallback 方法
      // this.initDataCallback(res.data)
    },
    initDataCallback (data) {
      this.list = data.result.data ? Object.assign(data.result.data) : []
      this.noData = !data.result.data
      this.hasMore = data.result.totalPage > this.currentPage
      this.currentPage = this.currentPage + 1
      this.loadShow = false
    },
    getMoreCallback (data) {
      let list = this.list
      list = list.concat(data.result.data)
      this.list = Object.assign(list)
      this.hasMore = data.result.totalPage > this.currentPage
      this.currentPage = this.currentPage + 1
      this.isLoading = false
    },
    // 滚动
    scroll () {
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 设备/屏幕高度
      let scrollObj = document.querySelector('.home') // 滚动区域
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let scrollHeight = scrollObj.scrollHeight // 滚动条的总高度

      if (scrollTop + clientHeight === scrollHeight) {
        // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
        // 滚动条到底部的条件
        if (this.hasMore && !this.isLoading) {
          this.isLoading = true
          // 请求后台数据
          // 请求成功调用 getMoreCallback 方法
          // this.getMoreCallback(res.data)
        }
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scroll) //  离开页面清除（移除）滚轮滚动事件
  }
}