<template>
  <div>
    <h2>Virtual Scroll - Lazy Load</h2>
    <p>The virtual scroll can be used to display large amounts of records without paging.</p>
    <DataGrid style="height:250px"
        :virtualScroll="true"
        :lazy="true"
        :loading="loading"
        :data="data"
        :total="total"
        :pageNumber="pageNumber"
        :pageSize="pageSize"
        @pageChange="onPageChange($event)">
      <GridColumn field="inv" title="Inv No"></GridColumn>
      <GridColumn field="name" title="Name"></GridColumn>
      <GridColumn field="amount" title="Amount" align="right"></GridColumn>
      <GridColumn field="price" title="Price" align="right"></GridColumn>
      <GridColumn field="cost" title="Cost" align="right"></GridColumn>
      <GridColumn field="note" title="Note"></GridColumn>
    </DataGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageSize: 20,
      pageNumber: 1,
      data: [],
      loading: false
    };
  },
  created() {
    this.loadPage(this.pageNumber, this.pageSize);
  },
  methods: {
    onPageChange(event) {
      this.loadPage(event.pageNumber, event.pageSize);
    },
    loadPage(pageNumber, pageSize){
      this.loading = true;
      setTimeout(() => {
        let result = this.getData(pageNumber, pageSize);
        this.total = result.total;
        this.pageNumber = result.pageNumber;
        this.pageSize = result.pageSize;
        this.data = result.rows;
        this.loading = false;
      },300)
    },
    getData(pageNumber, pageSize) {
      let total = 100000;
      let data = [];
      let start = (pageNumber - 1) * pageSize;
      for(let i=start+1; i<=start + pageSize; i++){
        let amount = Math.floor(Math.random()*1000);
        let price = Math.floor(Math.random()*1000);
        data.push({
          inv: 'Inv No '+i,
          name: 'Name '+i,
          amount: amount,
          price: price,
          cost: amount*price,
          note: 'Note '+i
        });
      }
      return {
        total: total,
        pageNumber: pageNumber,
        pageSize: pageSize,
        rows: data
      };
    }

  }
};
</script>