<template>
  <div class="score">
    <span>{{rateName}}</span>
    <img :src="score<3?imgUrl:trueImg" class="score_img" @mouseleave="mouseLeave(index,$event)" @click="mouserClick(index)" @mouseenter="mouseHover(index,$event)" v-for="(item,index) in score" :key="index" width="20" alt="">
    <img :src="falseImg" class="score_img" @mouseleave="mouseLeave((5-index-1),$event)" @click="mouserClick(index)" @mouseenter="mouseHover((5-index-1),$event)" v-for="(item,index) in 5-score" :key="5-index-1" width="20" alt="">
    <span class="score" v-if="isShowScore">{{score.toFixed(1)}}</span>
    <span class="scoreText" v-else>{{evaluateText[score-1]}}</span>
  </div>
</template>

<script>
export default {
  name: "enoRate",
  data() {
    return {
      score: this.value || 0,
      scoreRecord: this.value || 0,
      imgUrl: this.imgArr[0] || require('../../images/smile2.svg'),
      trueImg: this.imgArr[0] || require('../../images/smile.svg'),
      falseImg: this.imgArr[1] || require('../../images/smile3.svg')
    }
  },
  props: {
    rateName: {
      type: String,
      default: '评分:'
    },
    value: {},
    disabled: Boolean,
    evaluateText: {
      type: Array,
      default: () => {
        return ['失望', '不满意', '一般', '满意', '非常满意']
      }
    },
    // 评分背景图(选中与不选中)
    imgArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否显示评分值
    isShowScore: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  watch: {
    value(newVal) {
      this.score = newVal || 0;
    }
  },
  methods: {
    mouseHover: function (index, evt) {
      if (this.disabled) return;
      this.score = index + 1;

    },
    mouseLeave: function (index, evt) {
      if (this.disabled) return;
      this.score = this.scoreRecord;

    },
    mouserClick: function (index, evt) {
      if (this.disabled) return;
      this.score = index + 1;
      this.scoreRecord = index + 1;
      this.$emit('input', this.scoreRecord);
    }
  }
}
</script>

<style lang="less" scoped>
.score {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  span {
    display: inline-block;
    color: @textColor;
    padding: 0 16px;
    text-align: right;
    font-size: 12px;
  }
  img + img {
    margin-left: 8px;
  }
  .score {
    text-align: left;
    color: #ffcd0e;
    font-size: 14px;
    font-weight: bold;
  }
  .scoreText {
    text-align: left;
    color: #bfbfbf;
    font-size: 12px;
  }
}
</style>