<template>
    <el-pagination
        :current-page="pageResult.page"
        :page-size="pageResult.pageSize"
        :page-sizes="[10, 20, 50, 100, 200]"
        :total="pageResult.total"
        size="default"
        background
        class="super-pagination"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="currentChange"
    >
    </el-pagination>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    pageResult: {
        type: Object,
        default: () => ({
            page: 1,
            pageSize: 20,
            total: 0
        })
    }
})

const emit = defineEmits(['size-change', 'current-change'])

function sizeChange(val: number) {
    emit('size-change', val)
}

function currentChange(val: number) {
    emit('current-change', val)
}
</script>

<style lang="scss">
.super-pagination .el-select__placeholder {
    color: var(--theme-text-primary) !important;
}
.super-pagination .el-select__placeholder .is-transparent {
    color: var(--theme-text-primary) !important;
}
.super-pagination {
    justify-content: flex-end;
    .el-pagination__total,
    .el-pagination__jump {
        color: var(--theme-text-primary) !important;
    }

    .el-pagination__jump {
        display: inline-flex !important;
        align-items: center;
        column-gap: 3px;
        margin-left: 10px;

        .el-pagination__editor {
            width: 45px;

            .el-input__inner {
                font-size: 14px;
            }
        }
    }

    .el-pager {
        transition: all 0.15s;

        .number,
        .more {
            color: var(--theme-text-primary) !important;
            background-color: var(--theme-box-color-1) !important;

            &::before {
                color: var(--theme-text-primary) !important;
            }

            &:hover {
                color: $system-hover-active-text !important;

                &::before {
                    color: $system-hover-active-text !important;
                }
            }

            &.active {
                background-color: $system-hover-active-text !important;
                color: var(--theme-text-primary) !important;
            }
        }
        .is-active {
            background-color: $system-hover-active-text !important;
            color: #ffffff !important;
        }
    }

    button {
        background-color: var(--theme-box-color-1) !important;

        &[disabled] {
            background-color: var(--theme-system-disabled-bg) !important;

            i {
                color: $color-text-placeholder !important;
            }

            &:hover {
                i {
                    color: $color-text-placeholder !important;
                }
            }
        }

        &:hover {
            i {
                color: $system-hover-active-text !important;
            }
        }
    }
}
</style>
