<template>
  <div>
    <h1>Page 分页器</h1>
    <p class="fbg-text">当数据量过多时，使用分页分解数据。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="basePageStr">
      <el-page style="margin-top:10px" :total="total" :current-page.sync="page" :page-size="20" :page-sizes="pageSize" @current-change="handleChange"/>
    </demo>
    <h3 class="fbg-title">自定义控件显示</h3>
    <demo :code="layoutPageStr">
      <el-page style="margin-top:10px" layout="total,pager" :total="total" :page-size="20" :page-sizes="pageSize"  />
    </demo>

    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>total</td>
          <td>总数</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>page-size</td>
          <td>每页显示条目个数</td>
          <td>Number</td>
          <td>--</td>
          <td>10</td>
        </tr>
        <tr>
          <td>page-count</td>
          <td>总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>pager-count</td>
          <td>页码按钮的数量，当总页数超过该值时会折叠</td>
          <td>Number</td>
          <td>大于等于 5 且小于等于 21 的奇数</td>
          <td>--</td>
        </tr>
        <tr>
          <td>current-page</td>
          <td>当前页数，支持 .sync 修饰符</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>layout</td>
          <td>组件布局，子组件名用逗号分隔(不能调整控件顺序)</td>
          <td>Number</td>
          <td>sizes, prev, pager, next, jumper, ->, total, slot</td>
          <td>'total,prev,pager,next,sizes,jumper'</td>
        </tr>
        <tr>
          <td>page-sizes</td>
          <td>每页显示个数选择器的选项设置</td>
          <td>Number[]</td>
          <td>[]</td>
          <td>--</td>
        </tr>
        <tr>
          <td>prev-text</td>
          <td>替代图标显示的上一页文字</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>next-text</td>
          <td>替代图标显示的下一页文字</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disabled</td>
          <td>是否禁用</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>size-change</td>
          <td>pageSize 改变时会触发</td>
          <td>每页条数</td>
        </tr>
        <tr>
          <td>current-change</td>
          <td>currentPage 改变时会触发</td>
          <td>当前页</td>
        </tr>
        <tr>
          <td>prev-click</td>
          <td>用户点击上一页按钮改变当前页后触发</td>
          <td>当前页</td>
        </tr>
        <tr>
          <td>next-click</td>
          <td>用户点击下一页按钮改变当前页后触发</td>
          <td>当前页</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: '',
      total: 100,
      pageSize: [10, 50, 100],
      page: 2,
      basePageStr: `
      <template>
        <el-page style="margin-top:10px" :total="total" :current-page.sync="page" :page-size="20" :page-sizes="pageSize" @current-change="handleChange"/>
      </template>
      <script>
      export default {
        data() {
          return {
            data: '',
            total: 100,
            pageSize: [10, 50, 100],
            page: 2
          }
        },
        methods: {
          handleChange(page) {
            this.page = page;
          }
        }
      }
      <\/script>
      `,
      layoutPageStr: `
      <el-page style="margin-top:10px" layout="total,pager" :total="100" :page-sizes="[10, 50, 100]"  />`,
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleChange(page) {
      console.log(this.page)
    }
  }
}
</script>