<template>
  <el-pagination v-if="totalCount" class="d-flex flex-row am-pagination" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="totalCount" layout="slot, sizes, prev, pager, next">
    <span class="am-total">共{{ totalCount }}条记录</span>
  </el-pagination>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Pagination } from "element-ui";
/**
 * @Description: 分页组件
 * @author ZPFLY
 * @date 2020/12/30 17:38
 */
@Component({
  name: "AmPagination",
  components: {
    "el-pagination": Pagination
  }
})
export default class AmPagination extends Vue {
  @Prop()
  totalCount: number | undefined; //总记录数  必传项，当为0或不传时不显示分页组件
  @Prop()
  pageSize: number | undefined; //每页条数，可不传，默认 10
  @Prop()
  currentPage: number | undefined; //当前页码，可不传，默认 1
  //DATA
  pageSizes = [10, 20, 30, 40, 50, 100]; //每页条数选项

  created() {
    // this._pageSize = this.pageSize || 10;
    // this._currentPage = this.currentPage || 1;
  }
  /**
   * @Description: 每页条数改变事件
   * @author ZPFLY
   * @date 2020/12/30 17:39
   */
  handleSizeChange(val: number) {
    console.log(`每页 ${val} 条`);
    this.$emit("sizeChange", val);
  }
  /**
   * @Description: 页码改变事件
   * @author ZPFLY
   * @date 2020/12/30 17:39
   */
  handleCurrentChange(val: number) {
    console.log(`当前页: ${val}`);
    this.$emit("currentChange", val);
  }
}
</script>

<style lang="scss">
.am-pagination.el-pagination.is-background {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 8px;
  .el-pagination__total {
    flex: 1;
  }
  .el-pager li {
    font-size: 12px;
    min-width: 24px;
    line-height: 24px;
    height: 24px;
    margin: 0 3px;
    border: 1px solid #ccc;
    background: #ffffff;
  }
  .el-pager li:not(.disabled).active {
    background: #2859d6;
    border: 1px solid #2859d6;
  }
  button,
  span:not([class*="suffix"]) {
    line-height: 24px;
    height: 24px;
    min-width: 24px;
  }
  button {
    border: 1px solid #ccc;
    vertical-align: middle;
    background: #ffffff;
  }
  .el-input--mini .el-input__inner {
    height: 24px;
  }
  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 12px;
  }
  .am-total {
    color: #999999;
    font-size: 14px;
    flex-grow: 1;
    font-weight: 400;
    line-height: 18px;
  }
}
</style>
