<template>
  <view class="rating-stars" :class="`rating-${size}`">
    <!-- 星级 -->
    <view v-if="showStars" class="stars-wrap">
      <view
        v-for="i in 5"
        :key="i"
        class="star"
        :class="getStarClass(i)"
        @click="handleClick(i)"
      >
        <text class="star-icon">★</text>
      </view>
    </view>

    <!-- 评分数值 -->
    <text v-if="showScore" class="score">{{ displayScore }}</text>

    <!-- 评价文字（如：好评） -->
    <text v-if="label" class="label">{{ label }}</text>

    <!-- 评价数量 -->
    <text v-if="count !== undefined" class="count">({{ count }}条评价)</text>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

type RatingSize = 'small' | 'medium' | 'large'

interface Props {
  score: number               // 分数 0-5
  max?: number                // 最大分数
  size?: RatingSize           // 尺寸
  showStars?: boolean         // 是否显示星星
  showScore?: boolean         // 是否显示分数
  label?: string              // 评价文字
  count?: number              // 评价数量
  readonly?: boolean          // 是否只读
  precision?: number          // 精度（小数位）
}

const props = withDefaults(defineProps<Props>(), {
  max: 5,
  size: 'medium',
  showStars: true,
  showScore: true,
  readonly: true,
  precision: 1
})

const emit = defineEmits<{
  (e: 'change', score: number): void
}>()

// 显示分数
const displayScore = computed(() => {
  return Number(props.score).toFixed(props.precision)
})

// 获取星星样式
const getStarClass = (index: number) => {
  const score = props.score
  if (score >= index) {
    return 'star-full'
  } else if (score >= index - 0.5) {
    return 'star-half'
  }
  return 'star-empty'
}

// 点击星星
const handleClick = (index: number) => {
  if (props.readonly) return
  emit('change', index)
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 8rpx;
}

/* ========== 尺寸 ========== */
.rating-small {
  .star-icon {
    font-size: 20rpx;
  }
  .score {
    font-size: $font-xs;
  }
  .label,
  .count {
    font-size: $font-xs;
  }
}

.rating-medium {
  .star-icon {
    font-size: 24rpx;
  }
  .score {
    font-size: $font-sm;
  }
  .label,
  .count {
    font-size: $font-sm;
  }
}

.rating-large {
  .star-icon {
    font-size: 32rpx;
  }
  .score {
    font-size: $font-base;
  }
  .label,
  .count {
    font-size: $font-sm;
  }
}

/* ========== 星星容器 ========== */
.stars-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2rpx;
}

/* ========== 星星 ========== */
.star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.star-icon {
  line-height: 1;
}

/* 实心 */
.star-full .star-icon {
  color: #FFC107;
}

/* 半实心 */
.star-half .star-icon {
  background: linear-gradient(90deg, #FFC107 50%, #E5E7EB 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 空 */
.star-empty .star-icon {
  color: #E5E7EB;
}

/* ========== 分数 ========== */
.score {
  color: $primary-color;
  font-weight: $font-semibold;
}

/* ========== 评价文字 ========== */
.label {
  color: $text-secondary;
  font-weight: $font-medium;
}

/* ========== 评价数量 ========== */
.count {
  color: $text-tertiary;
}
</style>
