<template>
  <div id="wrapper">
    <div id="scroller">
      <div id="pullDown">
        <span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span>
      </div>
      <ul id="thelist"
        @mouseup="handlerMouseUp($event)"
        @mousedown="handlerMousedown($event)"
      >
        <li v-for="(item, index) in items" class="message-item"
        :key="index" @click="openMessageContent(item,$event)">
          <div class="message-item-title">{{item.title}}</div>
          <div class="message-desc">{{item.content_text}}</div>
          <div class="message-desc">{{item.push_time | fomatDate}}</div>
        </li>
      </ul>
      <div id="pullUp">
        <span class="pullUpIcon" style="display: none"></span><span class="pullUpLabel">上拉加载更多</span>
      </div>
    </div>
  </div>
</template>

<script>
require('@/lib/iscroll/iscroll')
const IScroll = window.iScroll
let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset
export default {
  name: 'message',
  data () {
    return {
      items: [],
      myScroll: null,
      pageNo: 0,
      isLastPage: false,
      eventType: '',
      eventMouseStarEl: null,
      eventMouseEndEl: null
    }
  },
  components: {},
  created () {
    this.getListDataFromNet(1, 10)
  },

  watch: {},
  computed: {},
  mounted () {
    this.$nextTick(() => {
      this.loaded()
    })
  },
  methods: {
    async getListDataFromNet () {
      if (this.isLastPage) {
        this.myScroll.refresh()
        return false
      }
      this.pageNo++
      // 延时一秒,模拟联网
      const res = await this.axios.get(
        'http://rap2api.taobao.org/app/mock/115626/store/notice!getStoreNoticeListByPageAction.do',
        {
          params: {
            pageNo: this.pageNo,
            pageSize: 20,
            push_state: 2
          }
        }
      )
      if (res.data.code === 0) {
        const resData = res.data.data
        const length = this.items.length
        if (length <= resData.totalCount) {
          this.items = this.items.concat(resData.dataList)
        } else {
          this.isLastPage = true
        }
      }
      this.myScroll.refresh()
    },
    loaded () {
      pullDownEl = document.getElementById('pullDown')
      pullDownOffset = pullDownEl.offsetHeight
      pullUpEl = document.getElementById('pullUp')
      pullUpOffset = pullUpEl.offsetHeight
      this.myScroll = new IScroll('wrapper', {
        scrollbarClass: 'myScrollbar' /* 重要样式 */,
        useTransition: false /* 此属性不知用意，本人从true改为false */,
        topOffset: pullDownOffset,
        onRefresh: () => {
          this.$nextTick(() => {
            if (pullDownEl.className.match('loading')) {
              pullDownEl.className = ''
              pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新'
            } else if (pullUpEl.className.match('loading')) {
              pullUpEl.className = ''
              pullUpEl.querySelector('.pullUpLabel').innerHTML = this.isLastPage
                ? '没有更多数据'
                : '释放加载'
            }
          })
        },
        onScrollMove: function () {
          if (this.y > 5 && !pullDownEl.className.match('flip')) {
            pullDownEl.className = 'flip'
            pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放加载'
            this.minScrollY = 0
          } else if (this.y < 5 && pullDownEl.className.match('flip')) {
            pullDownEl.className = ''
            pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新'
            this.minScrollY = -pullDownOffset
          } else if (
            this.y < this.maxScrollY - 5 &&
            !pullUpEl.className.match('flip')
          ) {
            pullUpEl.className = 'flip'
            pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载'
            this.maxScrollY = this.maxScrollY
          } else if (
            this.y > this.maxScrollY + 5 &&
            pullUpEl.className.match('flip')
          ) {
            pullUpEl.className = ''
            pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新'
            this.maxScrollY = pullUpOffset
          }
        },
        onScrollEnd: () => {
          this.$nextTick(() => {
            if (pullDownEl.className.match('flip')) {
              pullDownEl.className = 'loading'
              pullDownEl.querySelector('.pullDownLabel').innerHTML =
                '加载中...'
              this.pullDownAction()
            } else if (pullUpEl.className.match('flip')) {
              pullUpEl.className = 'loading'
              pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...'
              this.pullUpAction()
            }
          })
        }
      })
      document.addEventListener(
        'touchmove',
        function (e) {
          e.preventDefault()
        },
        false
      )
    },
    handlerMouseUp(event) {
      this.eventMouseStarEl = event.target
      this.eventType = ''
      console.log(event)
    },
    handlerMousedown(event) {
      this.eventMouseEndEl = event.target
      console.log(event)
      if (this.eventMouseStarEl && this.eventMouseStarEl === this.eventMouseEndEl) {
        this.eventType = 'click'
      } else {
        this.eventType = 'mousemove'
      }
      this.eventMouseStarEl = this.eventMouseEndEl = null
    },
    pullDownAction () {
      this.items = []
      this.pageNo = 0
      this.isLastPage = false
      this.getListDataFromNet()
    },

    pullUpAction () {
      this.getListDataFromNet()
    },

    openMessageContent (item) {
      console.log(arguments)
      if (this.eventType === 'click') {
        this.$alert(`${item.content}`, '', {
          dangerouslyUseHTMLString: true,
          customClass: 'message-panel'
        })
      }
    }
  }
}
</script>

<style scoped>
#wrapper {
  width: 100%;
  position: absolute;
  top: 18px;
  bottom: 0;
  overflow: hidden;
}
#pullDown,
#pullUp {
  border-bottom: none;
  text-align: center;
  height: 40px;
  box-sizing: border-box;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pullUp {
  border-top: solid 1px #d7d7d7;
  text-align: center;
}
</style>

<style lang="scss" scoped>
.message-item {
  border-top: 1px dashed #ddd;
  padding: 5px 20px;
  cursor: pointer;
  &:first-child {
    border-top: none;
  }
}

.message-item-title {
  font-size: 15px;
}

.message-desc {
  font-size: 13px;
}
</style>
