<template>
  <div class="pageination-data">
    <el-pagination
      :current-page="pagination.pageNum"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      layout="total, sizes, pager"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
export default {
  props: ["value", "handlePage"],
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      pagination: {},
      flag: true,
      flag2: true,
    };
  },
  watch: {
    value: {
      handler(val) {
        if (this.flag) {
          this.pagination = val;
          this.flag = false;
        }
      },
      deep: true,
    },
    pagination: {
      handler(val) {
        console.log(val);
        // if (this.flag2) {
        //   this.flag2 = false;
        //   return;
        // }
        // 总页数变化不触发
        if (val.total !== this.value.total) {
          return;
        }
        this.$emit("input", val);
        this.$emit("handlePage", val);
      },
      deep: true,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pagination.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
    },
  },
};
</script>
