<template>
  <div>
    <co-header fixed title="Pull down/up">
      <fallback slot="left"></fallback>
    </co-header>
    <div class="co-wrapper">
      <p class="page-loadmore-desc page-content-main">在列表顶端, 按住 - 下拉 - 释放可以获取更多数据</p>
      <p class="page-loadmore-desc page-content-main">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
      <cus-loadmore
          ref="loadmore"
          :top-method="loadmore"
          :bottom-method="loadBottom"
          :show-top-end="true">
        <co-cell v-for="(item, i) in list" :key="i"
                 :title="'测试数据-'+item" class=""></co-cell>
      </cus-loadmore>
    </div>
  </div>
</template>

<script type="es6">
  import cusLoadmore from 'public/components/cus-loadmore';

  // 获取数据
  var getData = (index = 0, callback) => {
    let arr = [];
    for (let i = 1; i <= 10; i++) arr.push(index + i);
    // 模拟数据没有更多数据
    if (index > 28) arr.length = 2;
    // 模拟网络请求，延时回调
    setTimeout(t => callback(arr), 1500);
  };

  export default {
    components: { cusLoadmore },

    data() {
      return {
        list: []
      };
    },

    created() {
      this.loadmore();
    },

    methods: {
      loadBottom() {
        this.loadmore(true);
      },
      // onTopLoaded 和 onBottomLoaded 方法接收 Boolean 值
      // true 关闭上拉加载，显示无更多数据
      // false 开启上拉加载，显示上拉加载更多
      loadmore(more) {
        if (more) {
          getData(this.list.length, data => {
            this.list = this.list.concat(data);
            this.$refs.loadmore.onBottomLoaded(data.length < config.pageSize);
          });
        } else {
          getData(0, data => {
            this.list = data;
            this.$refs.loadmore.onTopLoaded(data.length < config.pageSize);
          });
        }
      }
    }
  };
</script>

<style lang="less">
  .page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
    &:last-of-type {
      border-bottom: solid 1px #eee;
    }
  }
</style>
