<template>
  <view class="u-pagination">
    <!-- 上一页按钮 -->
    <view
      :class="['u-pagination-btn', { disabled: currentPage === 1 }]"
      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
      @click="prev"
    >
      <template v-if="prevText">
        {{ prevText }}
      </template>
      <up-icon v-else name="arrow-left"></up-icon>
    </view>
    <!-- 页码列表 -->
    <block v-for="page in displayedPages" :key="page" v-if="layout.includes('pager')">
      <view :class="['u-pagination-item', { active: page === currentPage }]" @click="goTo(page)">
        {{ page }}
      </view>
    </block>
    <!-- 总数显示 -->
    <view v-if="total > 0 && layout.includes('total')" class="u-pagination-total">{{ currentPage }} / {{ totalPages }}</view>
    <!-- 每页数量选择器 -->
    <!-- <picker
      v-if="layout.includes('sizes')"
      mode="selector"
      :range="pageSizes"
      range-key="label"
      :value="pageSizeIndex"
      @change="handleSizeChange"
      class="u-pagination-sizes"
    >
      <view>{{ pageSizeLabel }}</view>
    </picker> -->
    <!-- 下一页按钮 -->
    <view
      :class="['u-pagination-btn', { disabled: currentPage === totalPages }]"
      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
      @click="next"
    >
      <template v-if="nextText">
        {{ nextText }}
      </template>
      <up-icon v-else name="arrow-right"></up-icon>
    </view>
    <!-- 跳转输入框 -->
    <!-- <view v-if="layout.includes('jumper')">
      <text>前往</text>
      <input
        type="number"
        class="u-pagination-jumper"
        :value="currentPageInput"
        @input="onInputPage"
        @confirm="onConfirmPage"
      />
      <text>页</text>
    </view> -->
  </view>
</template>
<script>
import { t } from '../../libs/i18n';
export default {
  name: 'u-pagination',
  props: {
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页条目数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总数据条目数
    total: {
      type: Number,
      default: 0
    },
    // 上一页按钮文案
    prevText: {
      type: String,
      default: ''
    },
    // 下一页按钮文案
    nextText: {
      type: String,
      default: ''
    },
    buttonBgColor: {
      type: String,
      default: '#f5f7fa'
    },
    buttonBorderColor: {
      type: String,
      default: '#dcdfe6'
    },
    // 可选的每页条目数
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50]
    },
    // 布局方式（类似 el-pagination）
    layout: {
      type: String,
      default: 'prev, pager, next'
    },
    // 是否隐藏只有一个页面时的分页控件
    hideOnSinglePage: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:currentPage', 'update:pageSize', 'current-change', 'size-change'],
  data() {
    return {
      currentPageInput: this.currentPage + ''
    };
  },
  computed: {
    totalPages() {
      return Math.max(1, Math.ceil(this.total / this.pageSize));
    },
    pageSizeIndex() {
      const index = this.pageSizes.findIndex((size) => size.value === this.pageSize);
      return index >= 0 ? index : 0;
    },
    pageSizeLabel() {
      const found = this.pageSizes.find((size) => size.value === this.pageSize);
      return found?.label || this.pageSize;
    },
    displayedPages() {
      const total = this.totalPages;
      const current = this.currentPage;
      if (total <= 4) {
        return Array.from({ length: total }, (_, i) => i + 1);
      }
      const pages = [];
      // 当前页靠近头部
      if (current <= 2) {
        for (let i = 1; i <= 4; i++) {
          pages.push(i);
        }
        pages.push('...');
        pages.push(total);
      }
      // 当前页在尾部附近
      else if (current >= total - 1) {
        pages.push(1);
        pages.push('...');
        for (let i = total - 3; i <= total; i++) {
          pages.push(i);
        }
      }
      // 中间情况
      else {
        pages.push(1);
        pages.push('...');
        pages.push(current - 1);
        pages.push(current);
        pages.push(current + 1);
        pages.push('...');
        pages.push(total);
      }
      return pages;
    }
    // 控制是否隐藏
  },
  watch: {
    currentPage(val) {
      this.currentPageInput = val + '';
    }
  },
  methods: {
    t,
    handleSizeChange(e) {
      const selected = e.detail.value;
      const size = this.pageSizes[selected]?.value || this.pageSizes[0].value;
      this.$emit('update:pageSize', size);
      this.$emit('size-change', size);
    },
    prev() {
      if (this.currentPage > 1) {
        this.goTo(this.currentPage - 1);
      }
    },
    next() {
      if (this.currentPage < this.totalPages) {
        this.goTo(this.currentPage + 1);
      }
    },
    goTo(page) {
      if (page === '...' || page === this.currentPage) return;
      this.$emit('update:currentPage', page);
      this.$emit('current-change', page);
    },
    onInputPage(e) {
      this.currentPageInput = e.detail.value;
    },
    onConfirmPage(e) {
      const num = parseInt(e.detail.value);
      if (!isNaN(num) && num >= 1 && num <= this.totalPages) {
        this.goTo(num);
      }
    }
  }
};
</script>
<style scoped>
.u-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
  color: #606266;
}
.u-pagination .u-pagination-total {
  margin-right: 10px;
}
.u-pagination .u-pagination-sizes {
  margin-right: 10px;
  padding: 4px 4px;
  border: 1rpx solid #dcdfe6;
  border-radius: 4px;
}
.u-pagination .u-pagination-btn {
  margin: 0 3px;
  padding: 4px 4px;
  border: 1rpx solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
}
.u-pagination .u-pagination-btn.disabled {
  opacity: 0.5;
}
.u-pagination .u-pagination-item {
  margin: 0 2px;
  padding: 4px 8px;
  border-radius: 4px;
}
.u-pagination .u-pagination-item.active {
  background-color: #409eff;
  color: white;
}
.u-pagination .u-pagination-jumper {
  width: 40px;
  height: 28px;
  margin: 0 5px;
  padding: 0 5px;
  border: 1rpx solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}
</style>
