<template>
  <div>
    <!-- SEO层：全部评价文字内容在HTML中可见，供搜索引擎抓取 -->
    <div class="review-list">
      <ReviewsReviewItem v-for="r in visibleReviews" :key="r.id" :review="r" />
      <div v-if="!reviews.length" class="review-empty">
        <p>暂无符合条件的评价</p>
        <button class="review-reset" @click="$emit('reset')">清除筛选，查看全部评价</button>
      </div>
    </div>
    <div v-if="hasMore" class="review-loadmore">
      <button class="loadmore-btn" @click="loadMore">
        查看更多评价（还有{{ remaining }}条）
      </button>
    </div>
    <p v-else-if="reviews.length > pageSize" class="review-end">已展示全部{{ reviews.length }}条评价</p>

    <!--
      SEO 隐藏层：将未展示的评价文字以语义化HTML输出到页面中
      视觉上隐藏但搜索引擎可抓取，确保全部82条评价内容被索引
    -->
    <div v-if="hiddenReviews.length" class="sr-only" aria-hidden="true">
      <div v-for="r in hiddenReviews" :key="'seo-' + r.id">
        <p>{{ r.nickname }} · {{ r.travelDate }} · {{ r.productVersion }}</p>
        <p>{{ r.content }}</p>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({ reviews: { type: Array, required: true } })
defineEmits(['reset'])

const pageSize = 12
const showCount = ref(pageSize)

const visibleReviews = computed(() => props.reviews.slice(0, showCount.value))
const hiddenReviews = computed(() => props.reviews.slice(showCount.value))
const hasMore = computed(() => showCount.value < props.reviews.length)
const remaining = computed(() => props.reviews.length - showCount.value)

function loadMore() {
  showCount.value += pageSize
}

// 筛选条件变化时重置
watch(() => props.reviews.length, () => {
  showCount.value = pageSize
})
</script>

<style lang="less" scoped>
.review-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

  .respond-md({
    grid-template-columns: repeat(2, 1fr);
  });
}

.review-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: @space-2xl;
  color: @color-text-muted;

  p {
    margin-bottom: @space-md;
  }
}

.review-reset {
  padding: @space-sm @space-lg;
  font-size: @font-size-sm;
  color: @color-primary;
  background: @color-bg-white;
  border: 1px solid @color-primary;
  border-radius: @border-radius-full;
  cursor: pointer;
  transition: all @transition-fast;

  &:hover {
    background: @color-primary;
    color: #fff;
  }
}

.review-loadmore {
  text-align: center;
  margin-top: @space-xl;
}

.loadmore-btn {
  padding: @space-sm @space-xl;
  font-size: @font-size-base;
  color: @color-primary;
  background: @color-bg-white;
  border: 1px solid @color-primary;
  border-radius: @border-radius-full;
  cursor: pointer;
  transition: all @transition-fast;

  &:hover {
    background: @color-primary;
    color: #fff;
  }
}

.review-end {
  text-align: center;
  margin-top: @space-lg;
  font-size: @font-size-sm;
  color: @color-text-muted;
}
</style>
