<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">Infinite Scroll</div>
      </div>
    </div>
    <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">
      <div class="block-title">Scroll bottom</div>
      <div class="list simple-list">
        <ul>
          {{#each items}}
          <li key="{{@index}}">Item {{this}}</li>
          {{/each}}
        </ul>
      </div>
      {{#if hasMoreItems}}
      <div class="preloader infinite-scroll-preloader"></div>
      {{/if}}
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {
        allowInfinite: true,
        hasMoreItems: true,
        lastItem: 20,
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
      }
    },
    methods: {
      loadMore: function () {
        var self = this;

        var $ = self.$$;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(function () {
          if (self.lastItem >= 200) {
            self.$setState({
              hasMoreItems: false,
            });
            return;
          }

          for (var i = 1; i <= 20; i++) {
            self.items.push(self.lastItem + i);
          }

          self.allowInfinite = true;

          self.$setState({
            lastItem: self.lastItem + 20,
            items: self.items,
          })
        }, 1000);
      }
    }
  }
</script>
