<!-- eslint-disable vue/no-template-shadow -->
<template>
  <view
    class="component-comm-star"
    :class="'stars ' + type"
  >
    <image
      v-for="(item, index) in value"
      :key="index"
      src="@/static/images/collect-r.png"
      :data-val="index+1"
      @tap="changeVal"
    />
    <image
      v-for="(item, index) in 5-value"
      :key="index+'1'"
      src="@/static/images/collect.png"
      :data-val="value+index+1"
      @tap="changeVal"
    />
  </view>
</template>

<script setup>

const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  value: Number,
  // eslint-disable-next-line vue/require-default-prop
  type: String,
  // eslint-disable-next-line vue/require-default-prop
  index: Number
})
const emit = defineEmits(['onStarChange'])

const changeVal = (e) => {
  if (props.type) {
    const value = e.currentTarget.dataset.val
    emit('onStarChange', {
      val: Number(value),
      idx: props.index
    })
  }
}

</script>
<style lang="scss" scoped>
@use "./index.scss";
</style>
