<template>
  <div>
		<h2>Pagination Template</h2>
		<Panel :bodyStyle="{padding:'20px'}">
			<p>Total: {{total}}</p>
			<p>Page Number: {{pageNumber}}</p>
			<p>Page Size: {{pageSize}}</p>
			<template slot="footer">
				<Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" :layout="layout" @pageChange="onPageChange($event)">
          <template slot-scope="scope">
						<LinkButton :plain="true" iconCls="icon-add"></LinkButton>
						<LinkButton :plain="true" iconCls="icon-remove"></LinkButton>
						<NumberBox class="page-num" v-model="pageNumber" :min="1" :max="scope.pageCount"></NumberBox>
					</template>
        </Pagination>
			</template>
		</Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 114,
      pageNumber: 1,
      pageSize: 10,
      layout: ["list", "links", "sep", "tpl"]
    };
  },
  methods: {
    onPageChange(event) {
      this.pageNumber = event.pageNumber;
      this.pageSize = event.pageSize;
    }
  }
};
</script>
<style>
.page-num {
  width: 80px;
  height: 28px;
  margin-left: 4px;
}
</style>