<template>
  <div class="flx-center" style="margin: 20px 0 30px; color: #222222">
    <div class="flx-align-center">
      <span style="margin-right: 24px">当前第 {{ pageIndex }} 页</span>
      <span style="margin-right: 24px">总共 {{ totalPages }} 页</span>
      <el-icon
        size="22"
        :class="pageIndex === 1 ? 'prohibit' : ''"
        style="margin-right: 18px; cursor: pointer"
        @click="currentChange('minus')"
        ><i-ep-CaretLeft
      /></el-icon>
      <el-icon
        size="22"
        :class="pageIndex === totalPages ? 'prohibit' : ''"
        style="margin-right: 18px; cursor: pointer"
        @click="currentChange('add')"
        ><i-ep-CaretRight
      /></el-icon>
      <span
        class="tail-page"
        :style="{ cursor: pageIndex === totalPages ? 'no-drop' : '' }"
        @click="tailPage"
        >尾页</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  pageIndex: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    default: 1
  }
})

const emits = defineEmits(['current-change', 'tail-page'])

const totalPages = computed(() => Math.ceil(props.total / props.pageSize))

const currentChange = (type: string) => {
  if (type === 'minus') {
    if (props.pageIndex === 1) return
    emits('current-change', props.pageIndex - 1)
  } else {
    if (props.pageIndex === totalPages.value) return
    emits('current-change', props.pageIndex + 1)
  }
}

const tailPage = () => {
  if (props.pageIndex === totalPages.value) return
  emits('current-change', totalPages.value)
}
</script>

<style lang="scss" scoped>
.tail-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 31px;
  background: #177cfa;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.prohibit {
  color: #909399;
  cursor: no-drop !important;
}
</style>
