<template>
  <div>
		<h2>Pagination Layout</h2>
		<Panel :bodyStyle="{padding:'20px'}" style="margin-bottom:10px">
			<p>Page Number: {{pageNumber}}</p>
			<template slot="footer">
				<Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" :layout="layout1" @pageChange="onPageChange($event)"></Pagination>
			</template>
		</Panel>
		<Panel :bodyStyle="{padding:'20px'}" style="margin-bottom:10px">
			<p>Page Number: {{pageNumber}}</p>
			<template slot="footer">
				<Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" :layout="layout2" @pageChange="onPageChange($event)"></Pagination>
			</template>
		</Panel>
		<Panel :bodyStyle="{padding:'20px'}" style="margin-bottom:10px">
			<p>Page Number: {{pageNumber}}</p>
			<template slot="footer">
				<Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" :layout="layout3" @pageChange="onPageChange($event)"></Pagination>
			</template>
		</Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 114,
      pageNumber: 1,
      pageSize: 10,
      layout1: [
        "list",
        "sep",
        "first",
        "prev",
        "next",
        "last",
        "sep",
        "refresh",
        "info"
      ],
      layout2: ["first", "prev", "next", "last", "info"],
      layout3: ["links", "info"]
    };
  },
  methods: {
    onPageChange(event) {
      this.pageNumber = event.pageNumber;
      this.pageSize = event.pageSize;
    }
  }
};
</script>