<script lang="ts" setup>
import { computed } from "vue";
defineOptions({
  name: "MyPagination"
});
const props = defineProps({
  // total 总条数
  total: {
    required: true,
    type: Number,
    default: 0
  },
  // page 当前页
  page: {
    type: Number,
    default: 1
  },
  //  每页条数
  limit: {
    type: Number,
    default: 20
  },
  // 每页条数选项
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 50, 100];
    }
  },
  // 分页布局
  layout: {
    type: String,
    default: "total,  prev, pager, next, sizes, jumper"
  },
  // 是否显示背景色
  background: {
    type: Boolean,
    default: true
  },
  // 是否自动滚动到顶部
  autoScroll: {
    type: Boolean,
    default: true
  }
});
// 定义emit
const emit = defineEmits(["pagination", "update:page", "update:limit"]);
// 定义当前页
const currentPage = computed({
  get() {
    return props.page;
  },
  set(newValue) {
    // 更新当前页
    emit("update:page", newValue);
    console.log(newValue);
  }
});
// 定义每页条数
const pageSize = computed({
  get() {
    return props.limit;
  },
  set(newValue) {
    // 更新每页条数
    emit("update:limit", newValue);
  }
});
// 监听每页条数变化
const handleSizeChange = val => {
  emit("pagination", { page: currentPage.value, limit: val });
};
// 监听当前页变化
const handleCurrentChange = val => {
  emit("pagination", { page: val, limit: pageSize.value });
};
</script>
<template>
  <div class="MyPagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      :background="background"
      v-bind="$attrs"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>
<style lang="scss" scoped>
.MyPagination {
  display: flex;
  justify-content: center;
}
</style>

<template>
    <div>
      <my-pagination
        :page="from.page"
        :limit="from.size"
        :total="stationTotal"
        @pagination="getList"
      />
  </div>
</template>
<script lang="ts" setup>
const from = ref({
  page: 1,
  size: 10
})
const total = ref(999)
const getList = async () => {
  // await 请求
}
</script>