<template>
  <div>
		<h2>Virtual Scroll - Lazy Load</h2>
		<Panel>
			<VirtualScroll style="height:250px"
					:data="data" 
					:lazy="true"
					:total="total" 
					:pageNumber="pageNumber"
					:pageSize="pageSize" 
					:rowHeight="rowHeight" 
					@pageChange="onPageChange($event)"
					@update="items=$event">
				<div v-for="item in items" :key="item.id" class="item f-row">
					<div class="num">{{item.id}}</div>
					<div>
						<div class="name">{{item.name}}</div>
						<div class="desp">{{item.desp}}</div>
					</div>
				</div>
			</VirtualScroll>
		</Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 10000,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      items: [],
      rowHeight: 60
    };
  },
  methods: {
    onPageChange(event) {
      this.getData(event.pageNumber).then(data => {
        this.pageNumber = event.pageNumber;
        this.data = data;
      });
    },
    getData(pageNumber) {
      return new Promise(resolve => {
        setTimeout(() => {
          let data = [];
          let start = (pageNumber - 1) * this.pageSize;
          for (let i = start; i < start + this.pageSize; i++) {
            data.push({
              id: i,
              name: "name" + i,
              addr: "address" + i,
              desp: "description" + i
            });
          }
          resolve(data);
        }, 200);
      });
    }
  }
};
</script>
<style>
.item {
  height: 60px;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.item .num {
  width: 40px;
  height: 40px;
  background: #b8eecf;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  margin: 0 10px;
}
.item .name {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
}
.item .desp {
  color: #666;
  line-height: 18px;
}
</style>