<template>
  <footer class="list-foot enterprise-pagination">
    <span class="page-summary">{{ summaryText }}</span>

    <div class="pager" aria-label="分页">
      <button
        class="page-nav"
        type="button"
        :disabled="currentPage <= 1"
        aria-label="上一页"
        @click="setPage(currentPage - 1)"
      >
        <i class="mdi mdi-chevron-left"></i>
      </button>

      <template v-for="item in pageItems" :key="String(item)">
        <span v-if="item === 'ellipsis'" class="page-ellipsis" aria-hidden="true">...</span>
        <button
          v-else
          class="page-number"
          :class="{ active: currentPage === item }"
          type="button"
          :aria-current="currentPage === item ? 'page' : undefined"
          @click="setPage(item)"
        >
          {{ item }}
        </button>
      </template>

      <button
        class="page-nav"
        type="button"
        :disabled="currentPage >= totalPages"
        aria-label="下一页"
        @click="setPage(currentPage + 1)"
      >
        <i class="mdi mdi-chevron-right"></i>
      </button>
    </div>

    <div class="page-tools">
      <EnterpriseSelect
        v-if="showPageSize"
        class="page-size-select"
        :model-value="pageSize"
        :options="pageSizeOptions"
        size="small"
        @change="setPageSize"
      />

      <div class="page-jump">
        <span>跳至</span>
        <input
          :value="pageInput"
          type="text"
          inputmode="numeric"
          pattern="[0-9]*"
          aria-label="输入页码跳转"
          @blur="commitPageInput"
          @input="updatePageInput"
          @keydown.enter.prevent="commitPageInput"
        />
        <span>页</span>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

import EnterpriseSelect from './EnterpriseSelect.vue'

const props = defineProps({
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 10 },
  pageSizeOptions: {
    type: Array,
    default: () => []
  },
  showPageSize: { type: Boolean, default: true },
  summary: { type: String, default: '' },
  total: { type: Number, default: 0 },
  totalPages: { type: Number, default: 1 }
})

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-size-change'])

const pageInput = ref(String(props.currentPage || 1))

const pageItems = computed(() => {
  const total = Math.max(1, Number(props.totalPages) || 1)
  if (total <= 4) {
    return Array.from({ length: total }, (_, index) => index + 1)
  }

  return [1, 2, 3, 'ellipsis', total]
})

const summaryText = computed(() => {
  if (props.summary) {
    return props.summary
  }

  return `共 ${props.total} 条，当前第 ${props.currentPage} / ${props.totalPages} 页`
})

function setPage(page) {
  if (page === 'ellipsis') {
    return
  }

  const nextPage = Math.min(Math.max(Number(page) || 1, 1), props.totalPages)
  if (nextPage !== props.currentPage) {
    emit('update:currentPage', nextPage)
  }
}

function setPageSize(size) {
  emit('update:pageSize', size)
  emit('page-size-change', size)
}

function updatePageInput(event) {
  pageInput.value = String(event.target.value || '').replace(/\D/g, '')
}

function commitPageInput() {
  const nextPage = Math.min(Math.max(Number(pageInput.value) || props.currentPage || 1, 1), props.totalPages)
  pageInput.value = String(nextPage)
  setPage(nextPage)
}

watch(
  () => props.currentPage,
  (page) => {
    pageInput.value = String(page || 1)
  }
)
</script>

<style scoped>
.list-foot.enterprise-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.enterprise-pagination .page-summary {
  min-width: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 650;
}

.enterprise-pagination .pager {
  display: inline-flex;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #f8fafc;
}

.enterprise-pagination .pager button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.enterprise-pagination .pager button:hover:not(.active) {
  background: #fff;
  color: var(--theme-primary-active);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.enterprise-pagination .pager button.active {
  background: var(--theme-primary);
  color: #fff;
  box-shadow: 0 8px 16px var(--theme-primary-shadow);
}

.enterprise-pagination .pager button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
}

.enterprise-pagination .page-ellipsis {
  width: 28px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.enterprise-pagination .page-tools {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.enterprise-pagination .page-size-select {
  width: 112px;
}

.enterprise-pagination .page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.enterprise-pagination .page-jump input {
  width: 54px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d7e0ea;
  border-radius: 4px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.enterprise-pagination .page-jump input:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px var(--theme-focus-ring);
  outline: none;
}

@media (max-width: 760px) {
  .list-foot.enterprise-pagination {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .enterprise-pagination .pager {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .enterprise-pagination .pager button,
  .enterprise-pagination .page-ellipsis {
    flex: 0 0 auto;
  }

  .enterprise-pagination .page-tools {
    justify-self: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>
