<template>
  <view class="contribution-list" v-if="visible">
    <!-- <view class="list-header">
      <text class="header-title">实时贡献</text>
    </view> -->
    <scroll-view class="list-content" scroll-y>
      <view
        v-for="(record, index) in records"
        :key="record.id"
        class="contribution-item"
        :class="{ 'new-item': index === 0, 'fading-out': record.fading }"
      >
        <view class="user-info">
          <image class="user-avatar" :src="record.avatar_url" mode="aspectFill" />
          <text class="user-nickname">{{ record.nickname }}</text>
        </view>
        <image class="item-icon" :src="record.item_icon" mode="aspectFill" />
        <view class="quantity-info">
          <text class="item-quantity">x</text>
          <text class="item-count">{{ record.combo_count > 1 ? record.combo_count : record.quantity }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useContributionPolling } from '../composables/useContributionPolling.js'

const props = defineProps({
  activityId: {
    type: String,
    required: true
  }
})

const isPageActive = ref(true)

// 使用轮询 composable
const { records, visible, loading, error, start, stop, reset } = useContributionPolling(
  computed(() => props.activityId),
  isPageActive
)

onMounted(() => {
  isPageActive.value = true
})

// 页面生命周期集成
onUnmounted(() => {
  stop()
})

// 暴露给父组件使用
defineExpose({
  reset
})
</script>

<style scoped>
.contribution-list {
  width: 100%;
  padding: 0 24rpx;
  margin-top: 32rpx;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.header-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  /* text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5); */
}

.list-content {
  height: 280rpx;
  border-radius: 16rpx;
  padding: 16rpx;
}

.contribution-item {
  width: 384rpx;
  height: 8rpx;
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  background:  rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-out;
  position: relative;
  top: 32rpx;
  border-radius: 999rpx;
  margin-bottom: 48rpx;
}

.contribution-item:last-child {
  border-bottom: none;
}

.new-item {
  animation: slideIn 0.3s ease-out;
}

.fading-out {
  animation: fadeOut 0.5s forwards;
}

.user-info {
  display: flex;
  align-items: center;
  background-image: url('@/static/rank/activity-support-icon/beijingkuang.png');
  background-size: 105% 130%;
  background-position: center;
  /* padding: 0 32rpx 0 40rpx; */
  border-radius: 999rpx;
  margin-right: 32rpx;
}

.user-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-nickname {
  font-size: 16rpx;
  color: #fff;
  padding: 0 32rpx 0 16rpx;
  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}


.item-icon {
  width: 72rpx;
  height: 72rpx;
  position: relative;
  bottom: 8rpx;
  margin-right: 24rpx;
}

.quantity-info {
  position: relative;
  right: 0;
  bottom: 8rpx;
  display: flex;
  align-items: baseline;
}

.item-quantity {
  font-size: 20rpx;
  color: #ffcc00;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  margin-right: 8rpx;
}

.item-count {
  font-size: 38rpx;
  color: #ffcc00;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
</style>