<script setup lang="ts">
import type { StudentInfo } from '@/service/types'

interface Props {
  student: StudentInfo
  index: number
  isAttentioned?: boolean
}

interface Emits {
  (e: 'click', student: StudentInfo): void
  (e: 'toggle-attention', student: StudentInfo): void
}

defineProps<Props>()
defineEmits<Emits>()

// 获取排名变化样式
function getRankChangeClass(diff?: number) {
  if (!diff || diff === 0)
    return ''
  return diff > 0 ? 'text-red-500' : 'text-green-500'
}

function getRankChangeIcon(diff?: number) {
  if (!diff || diff === 0)
    return ''
  return diff > 0 ? '↑' : '↓'
}
</script>

<template>
  <view class="flex items-center border-b border-gray-100 bg-white px-4 py-3" @click="$emit('click', student)">
    <!-- 序号 -->
    <view
      class="mr-3 h-8 w-8 flex items-center justify-center rounded-full text-xs font-semibold"
      :class="isAttentioned ? 'bg-red-100 text-red-600' : 'bg-gray-100 text-gray-600'"
    >
      {{ index }}
    </view>

    <!-- 学生信息 -->
    <view class="flex-1">
      <view class="flex items-center gap-2">
        <text class="text-base text-gray-900 font-medium">{{ student.student_name }}</text>
        <text class="text-base text-gray-900 font-semibold">{{ student.full_score || '--' }}分</text>
      </view>

      <view class="mt-1 flex items-center gap-2 text-sm text-gray-500">
        <text>第{{ student.class_rank || '--' }}名</text>
        <view v-if="student.class_diff_rank && student.class_diff_rank !== 0" class="flex items-center">
          <text :class="getRankChangeClass(student.class_diff_rank)">
            {{ getRankChangeIcon(student.class_diff_rank) }}{{ Math.abs(student.class_diff_rank) }}
          </text>
        </view>
      </view>
    </view>

    <!-- 关注按钮 -->
    <view @click.stop="$emit('toggle-attention', student)">
      <view
        class="h-8 w-8 flex items-center justify-center"
        :class="isAttentioned ? 'i-fluent:star-20-filled text-yellow-500' : 'i-fluent:star-20-regular text-gray-400'"
      />
    </view>
  </view>
</template>
