<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  currentPage: number
  pageSize: number
  total: number
}>()

const emit = defineEmits(['update:currentPage', 'update:pageSize'])

defineOptions({ name: 'Pagination' })

const currentPageVal = computed({
  get: () => props.currentPage,
  set: val => emit('update:currentPage', val),
})
const pageSizeVal = computed({
  get: () => props.pageSize,
  set: val => emit('update:pageSize', val),
})
</script>

<template>
  <div class="mj-pagination">
    <el-pagination
      v-model:current-page="currentPageVal"
      v-model:page-size="pageSizeVal"
      :page-sizes="[10, 25, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :disabled="!total"
    />
  </div>
</template>

<style lang="scss">
$fz: 32px;
$color: #4b4b68;
$btn_w: 64px;
$btn_h: 5.33vh;
$btn_gap: 8px;
$radius: 8px;
$shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
$btn_bg: rgba(0, 0, 0, 0.65);

.el-select__popper {
  background-color: $btn_bg !important;
  border-radius: $radius !important;

  .el-select-dropdown {
    .el-select-dropdown__list {
      display: flex;
      flex-direction: column;
      row-gap: $btn_gap;

      .el-select-dropdown__item {
        color: #fff;
        font-size: $fz;
        font-family: $font-special !important;

        &.is-hovering {
          color: #4de798 !important;
        }
      }
    }
  }
}

.mj-pagination {
  .el-pagination {
    display: flex;
    align-items: center;
    height: 8.33vh;
    column-gap: 16px;

    .el-pagination__total,
    .el-pagination__goto,
    .el-pagination__classifier {
      opacity: 0.65;
    }

    .el-icon {
      font-size: $fz + 4px;
      color: #4de798;
    }

    .el-pagination__jump {
      column-gap: $btn_gap;
    }

    .el-input {
      width: $btn_w;
    }

    span {
      font-size: $fz;
      font-family: $font-special;
      color: $color;
    }

    .el-select {
      width: 216px;
      height: $btn_h;

      .el-select__wrapper {
        height: $btn_h;
        font-family: $font-special;
        border-radius: $radius;
        box-shadow: $shadow;

        .el-select__selected-item {
          overflow: visible;
          span {
            color: #fff;
          }
        }
      }
    }

    .btn-next,
    .btn-prev {
      &[disabled] {
        // background-color: #fff;
      }
    }

    .btn-next,
    .btn-prev,
    .el-select__wrapper {
      background-color: $btn_bg;
    }

    .btn-next,
    .btn-prev,
    li,
    .el-input__wrapper {
      font-size: $fz;
      width: $btn_w;
      height: $btn_h;
      border-radius: $radius;
      box-shadow: $shadow;
      font-family: $font-special;
    }

    .el-pager {
      display: flex;
      column-gap: $btn_gap;

      li {
        color: $color;
        background-color: #fff;
        border: 0.33vh solid #fff;
        &.is-active {
          background-color: #4de798;
          box-shadow: none;
        }
      }
    }
  }
}
</style>
