<template>
  <div :class="_class">
    <label :class="_titleClass">{{ title }}</label>

    <span
      :class="_itemClass"
      v-for="(item, key) in count"
      :key="key"

      @mousemove="setCurrentValue(item, $event)"
      @mouseleave="onLeave">
      <Icon
        :class="getIconClass(item)"
        @click="onClick(item)"
        :icon="icon"
      >
      </Icon>
      <Icon
        :class="_itemAddClass"
        :icon="icon">
      </Icon>

    </span>

    <label :class="_infoClass">{{ textMap[hoverIndex - 1] }}</label>
  </div>
</template>

<script>
  import Icon from '../icon';

  const name = 'hive-rate';

  export default {
    name,
    components: {
      Icon,
    },
    props: {
      value: {
        type: Number,
        default: 0,
      },
      count: {
        type: Number,
        default: 5,
      },
      title: String,
      textMap: {
        type: Array,
        default() {
          return [];
        },
      },
      happyThreshold: {
        type: Number,
        default: 0,
      },
      disabled: Boolean,
      icon: {
        type: String,
        default: 'star',
      },
      allowHalf: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        pointerAtLeftHalf: true,
        curValue: this.value,
        curActive: this.value,
        hoverIndex: this.value,
      };
    },
    computed: {
      _class() {
        return [
          name,
        ];
      },
      _titleClass() {
        return [
          `${name}-title`,
        ];
      },
      _itemClass() {
        return [
          `${name}-item`,
        ];
      },
      _itemAddClass() {
        return [
          `${name}-icon`,
        ];
      },

      _infoClass() {
        return [
          `${name}-info`,
          {
            unhappy: !this.isHappy,
          },
        ];
      },

      isHappy() {
        return this.curValue > this.happyThreshold;
      },

    },
    watch: {
      // 响应value修改
      value(value) {
        this.curValue = value;
        this.curActive = value;
        this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
      },
    },

    methods: {
      getIconClass(index) {
        if (index - 1 < this.curValue && index > this.curValue) {
          return [
            `${name}-icon`,
            this.isHappy ? 'active halfWidth' : 'unhappy halfWidth',
          ];
        }
        return [
          `${name}-icon`,
          index <= this.curValue ? this.isHappy ? 'active' : 'unhappy' : '',
        ];
      },

      onClick(index) {
        if (this.disabled) return;
        this.curActive = this.curValue;
        if (this.allowHalf && this.pointerAtLeftHalf) {
          this.$emit('input', this.curActive);
          this.$emit('change', this.curActive);
        } else {
          this.$emit('input', index);
          this.$emit('change', index);
        }
      },

      setCurrentValue(index, event) {
        if (this.disabled) return;
        if (this.allowHalf) {
          let target = event.target;
          if (target.clientWidth === 0) {
            target = document.querySelector('.hive-rate-icon');
          }
          this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
          this.curValue = this.pointerAtLeftHalf ? index - 0.5 : index;
        } else {
          this.curValue = index;
        }
        this.hoverIndex = index;
      },

      onLeave() {
        if (this.disabled) return;
        this.curValue = this.curActive;
        if (this.curValue !== Math.floor(this.curValue)) {
          this.hoverIndex = this.curValue + 0.5;
        } else {
          this.hoverIndex = this.curActive;
        }
      },

    },
  };
</script>
