<script setup lang="ts">
interface Props {
  // 当前评分值
  modelValue: number
  // 最大星级数量
  maxStars?: number
  // 星星大小
  starSize?: number
  // 激活颜色
  activeColor?: string
  // 未激活颜色
  inactiveColor?: string
  // 是否显示评分数值
  showScore?: boolean
  // 是否禁用交互
  disabled?: boolean
  // 自定义类名
  customClass?: string
}

interface Emits {
  (e: 'update:modelValue', value: number): void
  (e: 'change', value: number): void
}

const props = withDefaults(defineProps<Props>(), {
  maxStars: 5,
  starSize: 44,
  activeColor: '#F86F1F',
  inactiveColor: '#D1D1D1',
  showScore: true,
  disabled: false,
  customClass: ''
})

const emit = defineEmits<Emits>()

// 点击星星设置评分
const setRating = (rating: number) => {
  if (props.disabled) return
  
  emit('update:modelValue', rating)
  emit('change', rating)
}
</script>

<template>
  <view :class="['star-rating flex items-center', customClass]">
    <!-- 星级评分 -->
    <view class="flex items-center gap-10rpx">
      <view 
        v-for="star in maxStars" 
        :key="star"
        :class="[
          'mr-8rpx last:mr-0 flex-center',
          disabled ? '' : 'cursor-pointer'
        ]"
        @click="setRating(star)"
      >
        <image
            v-show="star <= modelValue"
            src="@img/chef/155.png"
            mode="aspectFill"
            class="w-24rpx h-24rpx"
        />
        <image
            v-show="star > modelValue"
            src="@img/chef/154.png"
            mode="aspectFill"
            class="w-24rpx h-24rpx"
        />
      </view>
    </view>
    
    <!-- 评分数值 -->
    <text 
      v-if="showScore"
      class="text-28rpx lh-28rpx text-#333 font-500 ml-80rpx"
    >
      {{ modelValue }}.0
    </text>
  </view>
</template>

<style scoped lang="scss">
.star-rating {
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .bg-active {
    transition: background-color 0.2s ease;
  }

  .bg-inactive {
    transition: background-color 0.2s ease;
  }
}
</style>