<template>
    <div class="pagination-page">
        <el-pagination v-if="type == 'app'" class="pagination" :current-page="configer.current"
            :page-size="configer.size" :page-sizes="pageSizeArr" layout="total, prev, pager, next, sizes, jumper"
            :total="configer.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <el-pagination v-else class="pagination" :current-page="configer.currentPage" :page-size="configer.pageSize"
            :page-sizes="pageSizeArr" layout="total, prev, pager, next, sizes, jumper" :total="configer.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue"

const props = defineProps({
    type: {
        type: String,
        default: ""
    },
    pageSizeArr: {
        type: Array,
        default: () => [10, 20, 50, 100]
    },
    background: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
    small: {
        type: Boolean,
        default: false
    },
    marginTop: {
        type: Number,
        default: 95
    },
    pageConfiger: {
        type: Object,
        default: () => {
            return {
                pageSize: 20,
                currentPage: 1,
                total: 20
            }
        }
    }
})
let configer = reactive({})
const emit = defineEmits(["changeSize", "changeNo"])
// 改变每页条数
const handleSizeChange = (val) => {
    emit("changeSize", val)
}
// 翻页
const handleCurrentChange = (val) => {
    emit("changeNo", val)
}
watchEffect(() => {
    configer = props.pageConfiger
})
</script>

<style lang="scss" scoped></style>
