<!--
 * @Author: your name
 * @Date: 
 * @LastEditTime: 2024-2-22 10:18:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aiguo_erp_vue\src\components\pagination\pagination.vue
-->
<template>
  <div class="block">
    <div style="display: flex;">
      <span v-if="costVisible" style="font-weight: bold; padding-left:10px;width: 90px;">本页信息:</span>
      <div v-if="costVisible" class="box">
        <span style="padding: 0 10px" v-for="(item, index) in cost" :key="index">{{ item.text + item.value }}</span>
      </div>
      <div v-else></div>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNum"
      :page-sizes="page.pagesizes" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      :page-size.sync="page.pageSize"></el-pagination>
  </div>
</template>

<script>
export default {
  name:"erpEltablePagination",
  data() {
    return {
      Obj: {
        list_row: this.page.pageSize,
      },
    };
  },
  props: {
    currentPage4: {
      type: Number,
    },
    page: {
      type: Object,
      default: () => {
        return {};
      },
    },
    costVisible: {
      default: () => false
    },
    //统计
    cost: {
      default: () => []
    }
  },
  methods: {
    //选择每页条数
    handleSizeChange(data) {
      this.Obj.list_row = data;
      this.$emit("handleSizeChange", this.Obj);
    },
    //点击页码
    handleCurrentChange(data) {
      this.Obj.page = data;
      this.$emit("handleCurrentChange", this.Obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  height: 50px;
  padding: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;

  .box {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
