<template>
  <div class="uif-score" :class="{disabled}" @mouseover="mouseover" @mouseleave="mouseleave" @click="onClick">
    <u-icon :type="isSolid(currentValue > 0)" data-index="1"></u-icon>
    <u-icon :type="isSolid(currentValue > 1)" data-index="2"></u-icon>
    <u-icon :type="isSolid(currentValue > 2)" data-index="3"></u-icon>
    <u-icon :type="isSolid(currentValue > 3)" data-index="4"></u-icon>
    <u-icon :type="isSolid(currentValue > 4)" data-index="5"></u-icon>
  </div>
</template>

<script>
import {toNumber} from '@uif/hq/src/utils/format'
export default {
  name: 'u-score',
  props: {
    value: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  methods: {
    mouseover (e) {
      if (this.disabled) return false
      this.currentValue = toNumber(e.target.getAttribute('data-index'))
    },
    mouseleave () {
      if (this.disabled) return false
      this.currentValue = this.value
    },
    onClick (e) {
      if (this.disabled) return false
      const index = toNumber(e.target.getAttribute('data-index'))
      if (index) {
        this.$emit('input', index)
        this.$emit('change', index)
      }
    },
    isSolid (value) {
      return value ? 'star-solid' : 'star'
    }
  }
}
</script>
