<template>
  <div>
     <span class="iconfont-star"
          v-for="item in count"
          :class=" [item<=mytempscore?'star-on':'star-off', disabled?'':'pointer'] "
          @mouseenter="mouseEnter(item)"
          @mouseleave="mouseLeave"
          @click="handleScore(item)"

          ></span>
  </div>
</template>

<script>
export default {
  name: 'my-star',
  created() {

  },
  mounted() {
  },
  methods: {
    handleScore(item){
      if(this.disabled){ return;}
      this.myscore = item;
    },
    mouseEnter(item){
      if(this.disabled){ return;}
      this.mytempscore = item;
    },
    mouseLeave(){
      if(this.disabled){ return;}
      this.mytempscore = this.myscore;
    },
  },
  props:{
    count:{//小星星的总个数
      type:Number,
      default: 5
    },
    value: {//评分的小星星的个数(值)  接受 v-mdole 传入的值，默认v-model 接受 value 属性作为值，input 作为触发事件
      // type:Number,
      required: true
    },
    disabled: { // 是否禁用 操作 评分（默认false)
      type: Boolean,
      default: false,
    }

  },
  watch: {
    value(newVal, oldVal){
      this.myscore = newVal;
      this.mytempscore = newVal;
    },
    myscore(newVal, oldVal) { //向外部发送 变更通知
      this.$emit('input', newVal)
    }
  },
  data() {
    return {
      myscore: this.value,
      mytempscore: this.value
    };
  },

}
</script>

<style  scoped lang="scss">
  .iconfont-star{
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: 0 3px;
  }
  .star-on{
    background: url('../assets/img/public/icon-star-on.png');
  }
  .star-off{
    background: url('../assets/img/public/icon-star-off.png');
  }
  .pointer{
    cursor: pointer;
  }
</style>
