<template>
    <div :class="bem()">
        <div :class="bem('items')">
            <div
                v-for="i in maxValue + 1"
                :class="bem('item', { active: i - 1 === value })"
                @click="click(i - 1)"
                :key="i"
            >
                {{i - 1}}
            </div>
        </div>
        <div :class="bem('tips')">
            <span>非常不愿意</span>
            <span>非常愿意</span>
        </div>
    </div>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';
export default {
    name: createComponentName('nps'),
    mixins: [componentMixin],
    model: {
        name: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: Number,
        },
        maxValue: {
            type: Number,
            default: 10,
        }
    },
    data() {
        return {
            hover: false,
            hoverValue: 0,
        };
    },
    computed: {
        innerValue() {
            if (this.hover) {
                return this.hoverValue;
            }
            return this.value;
        }
    },
    methods: {
        click(value) {
            this.$emit('change', value);
        }
    }
};
</script>

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

@b: ~'@{prefix}-nps';


.@{b} {
    &__items {
        display: flex;
    }

    &__item {
        width:34px;
        height:34px;
        background:rgba(247,250,255,1);
        border-radius:2px;
        border:1px solid rgba(149,190,255,1);
        cursor: pointer;
        font-size:12px;
        color:rgba(92,153,255,1);
        line-height:34px;
        margin-right: @margin-sm;
        text-align: center;
        transition: all 0.3s ease;

        &:hover {
            background:rgba(149,190,255,1);
            border-radius:2px;
            color: white;
        }

        &--active:hover,
        &--active {
            background: #106AFF;
            border-color: #106AFF;
            color: white;
        }

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

    &__tips {
        font-size:12px;
        margin-top: @margin-xsm;
        display: flex;
        justify-content: space-between;
    }
}

</style>
