<template>
  <div class="news-pagination-bar">
    <span class="news-pagination-total">共{{ total }}篇新闻报告</span>
    <div class="news-pagination"> 
      <button class="pg-btn" :disabled="currentPage <= 1" @click="$emit('update:currentPage', currentPage - 1)">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M10 3l-5 5 5 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </button> 
      <template v-for="p in pageList" :key="p">
        <span v-if="p === '...'" class="pg-ellipsis">...</span>
        <button
          v-else
          :class="['pg-num', { active: p === currentPage }]"
          @click="$emit('update:currentPage', p)"
        >{{ p }}</button>
      </template> 
      <button class="pg-btn" :disabled="currentPage >= totalPages" @click="$emit('update:currentPage', currentPage + 1)">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  total: { type: Number, default: 0 },
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 12 },
})
defineEmits(['update:currentPage'])

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

const pageList = computed(() => {
  const tp = totalPages.value
  const cp = props.currentPage
  if (tp <= 7) return Array.from({ length: tp }, (_, i) => i + 1)
  const pages = []
  pages.push(1)
  if (cp > 3) pages.push('...')
  const start = Math.max(2, cp - 1)
  const end = Math.min(tp - 1, cp + 1)
  for (let i = start; i <= end; i++) pages.push(i)
  if (cp < tp - 2) pages.push('...')
  pages.push(tp)
  return pages
})
</script>

<style scoped>
.news-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0 0;
}
.news-pagination-total {
  font-size: 14px;
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  color: rgba(132, 136, 142, 1);
}
.news-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pg-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 231, 232, 1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 1);
  color: rgba(95, 101, 108, 1);
  cursor: pointer;
  transition: all 0.15s;
}
.pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pg-num {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 231, 232, 1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  color: rgba(59, 65, 75, 1);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0 4px;
}
.pg-num.active {
  background: rgba(5, 95, 194, 1);
  border-color: rgba(5, 95, 194, 1);
  color: #fff;
}
.pg-ellipsis {
  font-size: 14px;
  color: rgba(132, 136, 142, 1);
  width: 32px;
  text-align: center;
}
</style>
