<template>
  <view class="pagination-footer">
    <text class="total-txt">共 {{ total }} 条</text>

    <picker class="page-select" :range="pageSizeOptionLabels" :value="pageSizeIndex" @change="onPageSizeChange">
      <view class="page-select-inner">
        <text class="page-val">{{ pageSize }} 条/页</text>
        <text class="arrow-down">▼</text>
      </view>
    </picker>

    <view class="page-btns">
      <view class="p-btn" :class="{ disabled: currentPage <= 1 }" @click="onPageBtnClick(currentPage - 1)">
        <text>＜</text>
      </view>

      <view
        v-for="(p, index) in visiblePages"
        :key="index"
        class="p-btn"
        :class="{ active: p === currentPage, 'ellipsis-btn': p === -1 }"
        @click="onPageBtnClick(p)">
        <text>{{ p === -1 ? '...' : p }}</text>
      </view>

      <view class="p-btn" :class="{ disabled: currentPage >= totalPage }" @click="onPageBtnClick(currentPage + 1)">
        <text>＞</text>
      </view>
    </view>

    <view class="page-jump">
      <text class="jump-txt">前往</text>
      <input
        class="jump-input"
        type="number"
        :value="jumpPageInput"
        @input="onJumpInputChange"
        @confirm="onJumpPage"
        @blur="onJumpPage"
        placeholder="页码"
      />
      <text class="jump-txt">页</text>
    </view>
  </view>
</template>

<script setup lang="uts">
const props = defineProps({
  total: { type: Number, default: 0 },
  loading: { type: Boolean, default: false },
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 10 },
  pageSizeOptionLabels: { type: Array, default: (): string[] => [] },
  pageSizeIndex: { type: Number, default: 0 },
  visiblePages: { type: Array, default: (): number[] => [] },
  totalPage: { type: Number, default: 1 },
  jumpPageInput: { type: String, default: '' }
})

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

const onPageSizeChange = (e : any) => {
  emit('page-size-change', e)
}

const onPageBtnClick = (p : number) => {
  if (p !== -1 && p >= 1 && p <= props.totalPage) {
    emit('page-change', p)
  }
}

const onJumpInputChange = (e : any) => {
  emit('update:jumpPageInput', e.detail.value as string)
}

const onJumpPage = () => {
  emit('jump-page')
}
</script>

<style scoped lang="scss">
/* 分页 */
.pagination-footer {
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  border-top: 1px solid #e8eaec;
  background-color: #fff;
}
.total-txt { font-size: 14px; color: #515a6e; }

.page-select {
  border: 1px solid #dcdee2;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: border 0.2s;
}
.page-select:hover { border-color: #2d8cf0; }
.page-select-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  gap: 8px;
}
.page-val { font-size: 14px; color: #515a6e; }
.arrow-down { font-size: 10px; color: #c0c4cc; }

.page-btns { display: flex; flex-direction: row; gap: 4px; }
.p-btn {
  min-width: 32px; height: 32px; padding: 0 4px; border: 1px solid #dcdee2; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #515a6e;
  background-color: #fff; cursor: pointer; transition: all 0.2s;
}
.p-btn:hover:not(.disabled):not(.active):not(.ellipsis-btn) {
  border-color: #2d8cf0; color: #2d8cf0;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c5c8ce; background-color: #f7f7f7; cursor: not-allowed; border-color: #dcdee2; }
.p-btn.ellipsis-btn { border: none; cursor: default; }

.page-jump {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.jump-txt { font-size: 14px; color: #515a6e; }
.jump-input {
  width: 50px;
  height: 32px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #515a6e;
  transition: border 0.2s;
}
.jump-input:focus { border-color: #2d8cf0; outline: none; }
</style>
