<template>
  <a-pagination
    class="w-pagination"
    :current="Pagination.current"
    :pageSize="Pagination.pageSize"
    :total="Pagination.total"
    show-less-items
    show-size-changer
    show-quick-jumper
    v-bind="$attrs"
    @change="change"
    @showSizeChange="change"
  />
</template>

<script lang="ts">
import { BasesController } from "@mamba/clients";
import lodash from "lodash";
import { observer } from "mobx-vue";
import { Component, Prop, Vue } from "vue-property-decorator";
@observer
@Component({
  components: {},
})
export default class extends Vue {
  @Prop({ required: true }) PageController: BasesController;
  get Pagination() {
    return this.PageController.Pagination;
  }
  get currentKey() {
    return this.Pagination.PaginationParams.currentKey;
  }
  get pageSizeKey() {
    return this.Pagination.PaginationParams.pageSizeKey;
  }
  get defaultPageSize() {
    return this.Pagination.PaginationParams.defaultPageSize;
  }
  get defaultCurrent() {
    return this.Pagination.PaginationParams.defaultCurrent;
  }
  change(current, pageSize) {
    const values = {
      [this.currentKey]: current,
      [this.pageSizeKey]: pageSize,
    };
    // if (lodash.eq(String(this.defaultCurrent), String(current))) {
    //   lodash.set(values, this.currentKey, null);
    // }
    // if (lodash.eq(String(this.defaultPageSize), String(pageSize))) {
    //   lodash.set(values, this.pageSizeKey, null);
    // }
    this.$MergeQuery(values);
    this.Pagination.onLoad({
      current,
      pageSize,
      // 上次请求的参数
      body: lodash.omit(this.Pagination.oldBody, [
        this.currentKey,
        this.pageSizeKey,
      ]),
    });
  }
  created() {}
}
</script>
<style lang="less">
.w-pagination.ant-pagination {
  margin-top: 8px;
  text-align: right;
}
</style>
