<template>
    <div class="nus_start"
        v-if="maxLen && maxLen > 0"
        @click="_onClick"
        @tap="_onTap"
        @mouseleave="_onResetRating">
        <div class="nu_star-item"
            ref="hook_starItem"
            v-for="(item, index) in maxLen"
            :key="index"
            :class="[fillList[index] === 100 && 'nu_star-active' || fillList[index] > 0 && 'nu_star-half']"
            @mousemove="_onSetRating($event, index + 1)"
            @click="_onSetRating($event, index + 1, true)">
            <nu-icon
                class="nu_star-icon nu_star-def"
                :class="iconClass"
                :icon="(fillList[index] && iconActive) || icon">
            </nu-icon><nu-icon
                v-if="fillList[index]"
                class="nu_star-icon nu_star-vista"
                :class="iconClass"
                :icon="iconActive || icon"
                :style="{width: fillList[index] + '%'}">
            </nu-icon>
        </div><slot
            v-if="isShow"
            :myValue="myValue"><span class="nu_star-text">{{ myValue || '0' }}</span>
        </slot>
    </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
import vModel from '../../../Mixins/vModel';
import NuIcon from '../icon';
export default {
    extends: WidgetTmp,
    name: 'NuStar',
    components: {
        NuIcon
    },
    mixins: [
        vModel()
    ],
    props: {
        /**
         * 步长
         */
        step: {
            default: 1
        },
        /**
         * 最大评分数
         */
        maxLen: {
            default: 5
        },
        /**
         * 是否显示评分
         */
        isShow: {
            type: Boolean,
            default: true
        },
        /**
         * 评分的icon
         */
        icon: {
            type: String,
            default: '\ue615'
        },
        /**
         * 活动评分的icon
         */
        iconActive: {
            type: String
        },
        /**
         * 自定义icon的class名称
         */
        iconClass: {
            type: String
        },
        /**
         * 是否可以编辑
         */
        isEdit: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            fillList: [] // 每个活动星星宽度
        };
    },
    mounted () {
        this._initCom();
    },
    watch: {
        myValue(nowVal) {
            this._setFillList(nowVal);
        }
    },
    methods: {
        /**
         * 初始化组件
         */
        _initCom () {
            const _that = this;
            const _starItem = _that.$refs['hook_starItem'];
            _that.starWidth = (_starItem && _starItem[0] && _starItem[0].offsetWidth) || 1; // 星星的宽度
            _that._valueCache = _that.myValue;
            _that._setFillList(_that.myValue);
        },
        /**
         * 创建评分
         * @param {Number} count 数据
         * @returns {Number}
         */
        _setFillList (count) {
            const _that = this;
            const _maxRating = _that.maxLen || 5;
            count = count || 0;
            let _list;
            for (let i = 0; i < _maxRating; i++) {
                let _level = 0;
                _list = _list || [];
                if (i < count) {
                    let _rating = count - i;
                    _level = (_rating > 1 && 100) || (_rating * 100);
                }
                _list.push(Math.round(_level));
            }
            _that.fillList = _list || _that.fillList;
            return count;
        },

        /**
         * 获取位置信息
         * @param {Event} evt 事件对象
         * @returns {Number} 返回位置信息
         */
        _getPos (evt) {
            const _target = evt && evt.target;
            let _pos = 1;
            if (_target) {
                const _offset = Math.max(evt.offsetX, 1);
                const _starWidth = this.starWidth || 1;
                _pos = Math.min(Math.round((100 / _starWidth) * _offset), 100);
            }
            return _pos;
        },
        /**
         * 设置评分
         * @param {Event} evt 事件对象
         * @param {Number} index 索引
         * @param {Boolean} isActive 是否激活
         */
        _onSetRating (evt, index, isActive) {
            const _that = this;
            if (_that.isEdit && index) {
                let _pos = _that._getPos(evt) || 0;
                _pos = _pos / 100;
                _that.myValue = _filterRating(Math.min(_that.maxLen, ((index + _pos) - 1).toFixed(2)) || 0);
                if (isActive) {
                    _that._valueCache = _that.myValue;
                }
            }
            /**
             * 过滤评分
             * @param {Number} rating 需要过滤的评分
             * @returns {Number} 返回过滤后的评分
             */
            function _filterRating (rating) {
                let _step = parseFloat((_that.step || '1') + '');
                _step = 1 / (_step || 1);
                return Math.min(_that.maxLen, Math.ceil(rating * _step) / _step);
            }
        },
        /**
         * 重置评分
         */
        _onResetRating () {
            const _that = this;
            if (_that.isEdit) {
                _that.myValue = _that._valueCache;
            }
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_start {
    display: inline-block;
    line-height: 1;
    color: $nustar-star-active-color;
    white-space: nowrap;
    .nu_star-icon{
        display: block;
    }
    .nu_star-def{
        color: $nustar-star-def-color;
    }
    .nu_star-vista {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    .nu_star-item {
        position: relative;
        display: inline-block;
        margin-left: 0.2em;
        &:first-child {
            margin-left: 0;
        }
    }
    .nu_star-text {
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
    }
}
</style>
