<template>
  <div class="component__rating">
    <span :key="n" v-for="(n) in size">
      <a href="#" @mouseover="highlight(n)" @mouseleave="highlight(0)" @click="select(n)" :class="{'rating-hover': (n <= hover), 'rating-selected': (n <= selected)}">
        <i :class="setIcon(n)"></i>
      </a>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Rating',
  data () {
    return {
      hover: 0,
      selected: 0
    }
  },
  props: {
    name: {type: String},
    size: {type: Number, default: 5},
    icon: {type: String, default: 'far fa-star'},
    iconSelected: {type: String, default: 'fa fa-star'}
  },
  methods: {
    setIcon (n) {
      return (n <= this.selected) ? this.iconSelected : this.icon
    },
    highlight (value) {
      this.$set(this.$data, 'hover', value)
    },
    select (value) {
      this.$set(this.$data, 'selected', value)
      this.$emit('select', {name: this.name, value: value})
    }
  }
}
</script>
