var app = getApp();
Page({
  data: {
    list: [
      { value: 1, hadReport: false }, 
      { value: 2, hadReport: false },
      { value: 3, hadReport: false },
      { value: 4, hadReport: false },
      { value: 5, hadReport: false },
      { value: 6, hadReport: false },
      { value: 7, hadReport: false },
      { value: 8, hadReport: false },
      { value: 9, hadReport: false },
    ],
    showLoading: false,
  },
  onLoad() {
    this.observer();
  },
  observer(){
    if (this._observer){
      this._observer.disconnect();
    }
    this._observer = wx.createIntersectionObserver(this, { observeAll: true })
    this._observer.relativeToViewport({ bottom: 0 })
      .observe('.item', (res) => {
        const { index } = res.dataset;
        if (!this.data.list[index].hadReport) {
          console.log(`report ${index}`)
          this.data.list[index].hadReport = true;
          this.setData({ list: [].concat(this.data.list) })
        }

      })
  },
  onReachBottom(){
    this.setData({showLoading: true })
    setTimeout(() => {
      this.setData({ 
        showLoading: false,
        list: [].concat(this.data.list, [{ value: 9, hadReport: false }]) }, 
        () => {
          this.observer();
        }
      )
    }, 2000)
  },
  onUnload() {
    if (this._observer) this._observer.disconnect()
  }
})