<template>
    <div :class="bem({ hover })">
        <div
            :class="bem('star-wrapper')"
            v-for="i in maxValue"
            @mouseenter="mouseenter"
            @mouseleave="mouseleave"
            @click="click(i)"
            :data-value="i"
            :key="i"
        >
            <i :class="bem('star')"/>
            <transition name="gd-fade" >
                <i
                    v-show="i <= innerValue"
                    :class="bem('star', ['active'])"
                />
            </transition>
            <transition name="gd-fade" >
                <i
                    v-show="(i <= innerValue) && hover"
                    :class="bem('star', ['hover'])"
                />
            </transition>

        </div>
        <div :class="bem('tip')" v-if="innerValue">{{tips[innerValue - 1]}}</div>
    </div>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';
export default {
    name: createComponentName('rate'),
    mixins: [componentMixin],
    model: {
        name: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: Number,
            default: 0,
        },
        maxValue: {
            type: Number,
            default: 5,
        },
        tips: {
            type: Array,
            default() {
                return ['非常不满意', '不满意', '一般', '满意', '非常满意'];
            }
        }
    },
    data() {
        return {
            hover: false,
            hoverValue: 0,
        };
    },
    computed: {
        innerValue() {
            if (this.hover) {
                return this.hoverValue;
            }
            return this.value;
        }
    },
    methods: {
        mouseenter(e) {
            this.hover = true;
            this.hoverValue = +e.target.getAttribute('data-value');
        },
        mouseleave() {
            this.hover = false;
            this.hoverValue = 0;
        },
        click(value) {
            this.mouseleave();
            this.$emit('change', value);
        }
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';
@import '../_styles/transitions/fade.less';

@b: @rate;

.@{b} {
    display: flex;
    align-items: center;

    &__star-wrapper {
        position: relative;
        width: 32px;
        height: 32px;
        display: block;
        margin-right: @margin-sm;

        &:last-child {
            margin-right: 0;
        }
    }

    &__star {
        position: absolute;
        left: 0;
        top: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: url(./assets/icon-star-normal.svg);

        &--active {
            background: url(./assets/icon-star-select.svg);
        }
        &--hover {
            background: url(./assets/icon-star-hover.svg);
        }
    }

    &__tip {
        color: #95BEFF;
        font-size: @font-size-xsm;
    }
}

// .@{b}--hover {
//     .@{b}__star.@{b}__star--active {
//         background: url(./assets/icon-star-hover.svg);
//     }
// }

</style>
