<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-01-06 15:10:51
 * @LastEditors: fakerwu fakerwu@msi.com
 * @LastEditTime: 2023-08-17 09:57:05
-->
<template>
  <div class="main-div pagination-container">
    <el-pagination
      :current-page.sync="pageInfo[customPage]"
      :page-size.sync="pageInfo[customSize]"
      :total="totalCount"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'FireflyPagination',

  data() {
    return {};
  },

  watch: {
    tableData(newVal) {
      if (!newVal.length && this.pageInfo[this.customPage] !== 1) {
        this.handleCurrentChange(1)
      }
    }
  },

  props: {
    pageInfo: {
      type: Object
    },
    totalCount: {
      type: Number
    },
    customPage: {
      type: String
    },
    customSize: {
      type: String
    },
    tableData: Array
  },
  methods: {
    handleSizeChange(val) {
      this.pageInfo[this.customSize] = val;
      let totalPage = Math.ceil(this.totalCount / val);
      this.pageInfo[this.customPage] = this.pageInfo[this.customPage] > totalPage ? totalPage : this.pageInfo[this.customPage];
      // console.log(this.pageInfo[this.customPage]);
      // this.pageInfo[this.customPage] = Math.ceil(this.totalCount/val)
      this.$emit('paginationChange', this.pageInfo);
    },
    handleCurrentChange(val) {
      this.pageInfo[this.customPage] = val;
      this.$emit('paginationChange', this.pageInfo);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../../css/fireflyPagination.scss';
</style>
