<template>
  <div class="activity-reviews-page">
    <van-nav-bar
      title="活动评价"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多评价了"
        @load="onLoad"
      >
        <div v-for="item in list" :key="item.id" class="review-card">
          <div class="header">
            <div class="user-info">
               <van-image round width="30" height="30" :src="item.userAvatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
               <span class="username">{{ item.userName }}</span>
            </div>
            <span class="time">{{ formatTime(item.createdAt) }}</span>
          </div>
          <van-rate v-model="item.rating" readonly size="14px" color="#ffd21e" />
          <p class="content">{{ item.content || '暂无内容' }}</p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getReviewsByActivity } from '@/services/review';
import type { Review } from '@/types/review';
import dayjs from 'dayjs';

const route = useRoute();
const activityId = Number(route.params.id);

const list = ref<Review[]>([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const currentPage = ref(1);

const onClickLeft = () => history.back();

const onLoad = async () => {
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }

  try {
    const res = await getReviewsByActivity({
      activityId,
      current: currentPage.value,
      size: 10
    });
    
    // Check struct
    const records = res.records || [];
    const total = res.total || 0;
    
    list.value.push(...records);
    loading.value = false;
    currentPage.value++;

    if (list.value.length >= total) {
      finished.value = true;
    }
  } catch (error) {
    loading.value = false;
    finished.value = true;
  }
};

const onRefresh = () => {
  finished.value = false;
  loading.value = true;
  currentPage.value = 1;
  onLoad();
};

const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD');
};
</script>

<style scoped lang="scss">
.activity-reviews-page {
  min-height: 100vh;
  background-color: #f7f8fa;

  .review-card {
    background: #fff;
    margin: 16px;
    padding: 16px;
    border-radius: 8px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .user-info {
        display: flex;
        align-items: center;
        
        .username {
          margin-left: 8px;
          font-size: 14px;
          color: #333;
        }
      }

      .time {
        font-size: 12px;
        color: #999;
      }
    }

    .content {
      margin: 8px 0 0;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }
}
</style>
