<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">Virtual List VDOM</div>
        <div class="subnavbar">
          <form data-search-container=".virtual-list-vdom" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
            <div class="searchbar-inner">
              <div class="searchbar-input-wrap">
                <input type="search" placeholder="Search"/>
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
              </div>
              <span class="searchbar-disable-button">Cancel</span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="searchbar-backdrop"></div>
    <div class="page-content">
      <div class="block">
        <p>This example shows how to use Virtual List with external renderer, like with built-in Virtual DOM</p>
      </div>
      <div class="list simple-list searchbar-not-found">
        <ul>
          <li>Nothing found</li>
        </ul>
      </div>
      <div class="list virtual-list virtual-list-vdom media-list searchbar-found">
        <ul>
          {{#each vlData.items}}
          <li key="{{id}}" style="top: {{../../vlData.topPosition}}px">
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">{{title}}</div>
                </div>
                <div class="item-subtitle">{{subtitle}}</div>
              </div>
            </a>
          </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    data: function() {
      var items = [];
      for (var i = 1; i <= 10000; i++) {
        items.push({
          id: i,
          title: 'Item ' + i,
          subtitle: 'Subtitle ' + i,
        });
      }
      return {
        items: items,
        vlData: {
          items: [],
        },
      };
    },
    on: {
      pageBeforeRemove: function () {
        var self = this;
        self.virtualList.destroy();
      },
      pageInit: function() {
        var self = this;
        self.virtualList = self.$app.virtualList.create({
          // List Element
          el: self.$el.find('.virtual-list'),
          // Pass array with items
          items: self.items,
          // Custom search function for searchbar
          searchAll: function (query, items) {
            var found = [];
            for (var i = 0; i < items.length; i++) {
              if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
            }
            return found; //return array with mathced indexes
          },
          // Item height
          height: self.$theme.ios ? 63 : 73,
          // Render external function
          renderExternal: function(vl, vlData) {
            self.$setState({
              vlData: vlData
            });
          },
        });
      }
    }
  }
</script>
