Component({
  data: {
    lastY: "",
    translateHeight: 0,
    state: -1,
    scrollTop: 0,
    enablePulldownFresh: false
  },
  options: {
    multipleSlots: true
  },
  properties: {
    upperDistance: {
      type: Number,
      value: 80
    }
  },
  methods: {
    onPageScroll (e) {
      this.data.scrollTop = e.scrollTop
      this.data.enablePulldownFresh = false
    },
    touchstart (e) {
      this.data.lastY = e.touches[0].clientY
      if (this.data.scrollTop === 0) {
        this.data.enablePulldownFresh = true
      } else {
        this.data.enablePulldownFresh = false
      }
    },
    touchmove (e) {
      let clientY = e.touches[0].clientY
      let offset = clientY - this.data.lastY
      if (this.data.scrollTop > 0 || offset < 0) {
        return false
      }
      this.data.translateHeight = offset
      this.data.state = 1

      if (this.data.enablePulldownFresh) {
        if (this.data.translateHeight > this.data.upperDistance) {
          this.data.state = 2
        }
        this.setData({
          translateHeight: this.data.translateHeight > 100 ? 100 : this.data.translateHeight,
          state: this.data.state
        })
      }
    },
    touchend () {
      if (this.data.translateHeight > this.data.upperDistance) {
        if (this.data.enablePulldownFresh) {
          this.setData({
            translateHeight: 100,
            state: 3
          })
          this.triggerEvent("pullDownRefresh")
        }
      } else if (this.data.scrollTop <= 0) {
        this.stopRefresh()
      }
    },
    stopRefresh () {
      this.setData({
        translateHeight: 0,
        state: -1
      })
    }
  }
})