<template>
  <div>
    <list class="list">
      <refresh  class = "refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
        <text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh </text>
        <loading-indicator class="indicator"></loading-indicator>
      </refresh>
      <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{rows}}" index="{{$index}}">
        <div class="item">
          <text class="item-title">row {{id}}</text>
        </div>
      </cell>
      <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
        <text if="{{(loading_display==='hide')}}">↑ Loadmore </text>
        <loading-indicator class="indicator"></loading-indicator>
      </loading>
    </list>
    <text class="count">Appear items:{{appearMin}} - {{appearMax}}</text>
  </div>
</template>

<style>
  .list {
    height:850;
  }
  .count {
    font-size: 48;
    margin:10;
  }
  .indicator {
    height: 40;
    width: 40;
    color:#45b5f0;
  }

  .refresh-arrow {
    font-size: 30px;
    color: #45b5f0;
  }

  .row {
    width: 750;
  }
  
  .item {
    justify-content: center;
    border-bottom-width: 2;
    border-bottom-color: #c0c0c0;
    height: 100;
    padding:20;
  }

  .item:active {
    background-color: #00BFFF;
  }

  .item-title {
  }
  .refresh-view {
    width: 750;
    height: 100;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .loading-view {
    width: 750;
    height: 100;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .indicator {
    height: 60;
    width: 60;
    color: #889967;
  }
</style>

<script>

  module.exports = {
    methods: {
      onappear: function (e) {
        var appearId = this.rows[e.target.attr.index].id;
        nativeLog('+++++', appearId);
        var appearIds = this.appearIds;
        appearIds.push(appearId);
        this.getMinAndMaxIds(appearIds);
      },
      ondisappear:function (e) {
        var disAppearId = this.rows[e.target.attr.index].id;
        nativeLog('+++++', disAppearId);
        var appearIds = this.appearIds;
        var index = appearIds.indexOf(disAppearId);
        if (index > -1) {
          appearIds.splice(index, 1);
        }
        this.getMinAndMaxIds(appearIds);
      },
      getMinAndMaxIds:function (appearIds) {
        appearIds.sort(function(a, b) {
          return a - b;
        });
        this.appearIds = appearIds;
        this.appearMax = appearIds[appearIds.length - 1];
        this.appearMin = appearIds[0];
      },
      onrefresh: function(e) {
        var self = this;
        self.refresh_display = 'show';
        self.$call('modal', 'toast', {
          'message': 'onrefresh'
        });

        this.$call('timer', 'setTimeout', function () {
          self.refresh_display = 'hide';
        }, 3000);
      },

      onloading: function() {
        var self = this;
        self.loading_display = 'show';
        self.$call('modal', 'toast', {
          'message': 'onloading'
        });

        this.$call('timer', 'setTimeout', function () {
          if (self.rows.length <= 33) {
              self.rows.push(self.moreRows[self.rows.length - 29]);
            }
          self.loading_display = 'hide';
        }, 3000);
      },
    },
    data: {
      refresh_display: 'hide',
      loading_display: 'hide',
      appearMin:1,
      appearMax:1,
      appearIds:[],
      rows:[
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
        {id: 6},
        {id: 7},
        {id: 8},
        {id: 9},
        {id: 10},
        {id: 11},
        {id: 12},
        {id: 13},
        {id: 14},
        {id: 15},
        {id: 16},
        {id: 17},
        {id: 18},
        {id: 19},
        {id: 20},
        {id: 21},
        {id: 22},
        {id: 23},
        {id: 24},
        {id: 25},
        {id: 26},
        {id: 27},
        {id: 28},
        {id: 29}
      ],
      moreRows: [
        {id: 30},
        {id: 31},
        {id: 32},
        {id: 33}
      ]
    }
  }
</script>