<template>
  <div>
		<h2>Virtual Scroll - Lazy Load</h2>
		<p>The Virtual Scroll allows the ComboBox to display millions of items.</p>
		<ComboBox valueField="id" textField="name"
				:virtualScroll="true"
        :lazy="true"
				:data="data" 
				:total="total" 
        :pageNumber="pageNumber"
				:pageSize="pageSize" 
				:rowHeight="rowHeight"
        @filterChange="onFilterChange($event)">
    </ComboBox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      rowHeight: 30,
      dataSource: []
    };
  },
  created() {
    for (let i = 1; i <= 10000; i++) {
      this.dataSource.push({
        id: "Id" + i,
        name: "Item" + i
      });
    }
  },
  methods: {
    onFilterChange(event) {
      setTimeout(() => {
        let result = this.getData(
          event.filterValue,
          event.pageNumber,
          event.pageSize
        );

        this.total = result.total;
        this.pageNumber = result.pageNumber;
        this.data = result.rows;
      },100);
    },

    getData(term, pageNumber, pageSize) {
      term = (term || "").trim();
      let data = this.dataSource.filter(
        row => row.name.toLowerCase().indexOf(term.toLowerCase()) != -1
      );
      let start = (pageNumber - 1) * pageSize;
      let rows = data.slice(start, start + pageSize);
      return {
        total: data.length,
        pageNumber: pageNumber,
        pageSize: pageSize,
        rows: rows
      };
    }
  }
};
</script>