<template>
  <div :class="classes">
    <div class="coicon coicon-collection_fill" v-for="item in count" :style='iconStyle'
         :class="starCls(item)" @click="handleClick(item)">
      <span :class="['coicon-collection_fill', prefixCls + '-star--content']" type="half"></span>
    </div>
    <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
      <slot>
        {{ currentValue }}星
      </slot>
    </div>
  </div>
</template>
<script>
  // 触发表单的 change 事件
  // import Emitter from '/src/mixins/emitter';

  const prefixCls = 'co-rate';

  export default {
    // mixins: [Emitter],
    name: 'co-rate',
    props: {
      count: {
        type: Number,
        default: 5
      },
      value: {
        type: Number,
        default: 0
      },
      allowHalf: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      showText: {
        type: Boolean,
        default: false
      },
      size: {
        type: Number,
        default: 22
      }
    },
    data() {
      return {
        prefixCls: prefixCls,
        isHalf: false,
        currentValue: this.value
      };
    },
    computed: {
      classes() {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}-disabled`]: this.disabled
          }
        ];
      },
      iconStyle() {
        return {
          fontSize: this.size + 'px'
        };
      }
    },
    watch: {
      value(val) {
        this.currentValue = val;
      },
      currentValue(val) {
        this.setHalf(val);
      }
    },
    methods: {
      starCls(value) {
        const hoverIndex = this.hoverIndex;
        const currentIndex = this.isHover ? hoverIndex : this.currentValue;

        let full = false;
        let isLast = false;

        if (currentIndex >= value) full = true;

        if (this.isHover) {
          isLast = currentIndex === value;
        } else {
          isLast = Math.ceil(this.currentValue) === value;
        }

        return [
          `${prefixCls}-star`,
          {
            [`${prefixCls}-star--full`]: (!isLast && full) || (isLast && !this.isHalf),
            [`${prefixCls}-star--half`]: isLast && this.isHalf,
            [`${prefixCls}-star--zero`]: !full
          }
        ];
      },
      setHalf(val) {
        this.isHalf = val.toString().indexOf('.') >= 0;
      },
      handleClick(value) {
        if (this.disabled) return;
        if (this.allowHalf && this.currentValue === value) {
          this.isHalf = !this.isHalf;
          value -= 0.5;
        }
        this.currentValue = value;
        this.$emit('input', value);
        this.$emit('on-change', value);
        // this.dispatch('FormItem', 'on-form-change', value);
      }
    },
    created() {
      this.setHalf(this.currentValue);
    }
  };
</script>

<style>
  @component-namespace co {
    @component rate {
      display: inline-block;
      margin: 0;
      padding: 0;
      font-size: 1rem;
      vertical-align: middle;
      font-weight: normal;
      font-style: normal;

      @descendent disabled .co-rate-star {
        &::before,
        &--content::before {
          cursor: default;
        }
        &:hover {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }

      @descendent star {
        display: inline-block;
        margin: 0;
        padding: 0;
        margin-right: 0.4rem;
        position: relative;
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }
        &::before,
        &--content::before {
          color: #e9e9e9;
          cursor: pointer;
          -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
          display: block;
        }
        @modifier content {
          position: absolute;
          left: 0;
          top: 0;
          width: 50%;
          height: 100%;
          overflow: hidden;
          &::before {
            color: transparent;
          }
        }
        @modifier zero {
          &::before {
            color: #e9e9e9;
          }
        }
        &--half &--content::before,
        &--full::before {
          color: #f5a623;
        }

        &--half:hover &-content::before,
        &--full:hover::before {
          color: #f7b84f;
        }
      }

      @descendent text {
        margin-left: 0.4rem;
        vertical-align: middle;
        display: inline-block;
        font-size: 0.8rem;
      }
    }
  }
</style>
