<template>
  <a-pagination
    v-model:current="current"
    class="simple-pagination"
    :total="total"
    :default-page-size="pageSize"
    show-quick-jumper
    :showTotal="(totalCount) => `共${totalCount}条`"
    :show-size-changer="false"
    @change="onChange"
  >
    <template #itemRender="{ type, originalElement }">
      <template v-if="type === 'prev'">
        <CaretLeftFilled />
      </template>
      <template v-else-if="type === 'next'">
        <CaretRightFilled />
      </template>
      <component :is="originalElement" v-else></component>
    </template>
  </a-pagination>
</template>

<script setup lang="ts">
import { CaretRightFilled, CaretLeftFilled } from "@ant-design/icons-vue";
import { ref } from "vue";

defineOptions({
  name: "SimplePagination",
});

const props = defineProps<{
  total: number;
  pageSize: number;
}>();
const emit = defineEmits(["change"]);

const current = ref(1);

function onChange(page: number, pageSize: number) {
  emit("change", page, pageSize);
}
</script>

<style lang="less">
.simple-pagination {
  color: @text-color2;

  .ant-pagination-item {
    display: none;
  }
  .ant-pagination-prev,
  .ant-pagination-next {
    border: 1px solid @border-color1;
    font-size: 10px;
  }
  .ant-pagination-disabled {
    color: #d9d9d9;
  }
  .ant-pagination-total-text {
    width: 70px;
    overflow: hidden;
  }
  .ant-pagination-options-quick-jumper {
    margin: 0;
  }
  .ant-pagination-options {
    margin-left: 8px;
    color: @text-color3;

    input {
      width: 32px;
      background: #ffffff;
      border-radius: 6px;
      padding-left: 4px;
      padding-right: 4px;
      margin: 0 5px;
      border: 1px solid @border-color1;
      text-align: center;
    }
  }
}
</style>
