<template>
    <div class="card-page-box" :style="`justify-content:${align};`">
        <el-pagination background layout="total, prev, pager, next, sizes, jumper" :page-sizes="sizes" :total="totalv" :page-size="sizev" :current-page="currentv" @size-change="sizesUpdate" @current-change="pagesUpdate"/>
    </div>
</template>

<script setup>
import {ref,watch} from "vue";
const props = defineProps({
    sizes: {
        type: Array,
        default: () => ([10, 20, 30, 40, 50])
    },
    pages: {
        type: Object,
        default: () => ({
            current: 1,
            size: 10,
            total: 0
        })
    },
    align: {
        type: String,
        default: 'flex-end'
    },
})

//变量
const objData = ref(JSON.parse(JSON.stringify(props.pages)))
const currentv = ref(objData.value?.current ?? 0)
const sizev = ref(objData.value?.size ?? 0)
const totalv = ref(objData.value?.total ?? 0)

//监听
watch(() => [
    props.pages?.current,
    props.pages?.size,
    props.pages?.total
], ([current, size, total]) => {
    currentv.value = current ?? 0;
    sizev.value = size ?? 0;
    totalv.value = total ?? 0;
})

//事件
const emit = defineEmits(['change'])
const pagesUpdate = (val) => {
    //currentv.value = val;
    emit('change', {
        current: val,
        size: sizev.value
    })
}

//条数改变
const sizesUpdate = (val) => {
    //sizev.value = val;
    emit('change', {
        current: currentv.value,
        size: val
    })
}
</script>

<style lang="scss" scoped>
.card-page-box {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}
</style>

<style lang="scss">
.card-page-box {
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        border: 1px solid #e2e2e2;
    }
    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
        border: 1px solid var(--el-color-primary);
    }
    .el-pagination .el-select .el-input {
        width: 100px;
    }
    .el-pagination__sizes {
        margin: 0 0 0 16px;
    }
}

</style>
