<template>
    <li
        class="nus_nav-item"
        :class="[activeIndex === itemkey && 'nu_active']"
        @click="_click"
        @tap="_tap"
        @mouseover.stop.prevent="_onMouseover"
        @touchmove="_onTouchMove"
        @touchstart="_onTouchStart">
        <slot>
            {{myName || ''}}
        </slot>
    </li>
</template>

<script>
import ScrollnavTmp from '../_comm/ScrollnavTmp';
import attrSync from '../../../../Mixins/attrSync/attrSync';

export default {
    extends: ScrollnavTmp,
    props: {
        /**
         * 名称
         */
        nameText: {},
        /**
         * 索引的key
         */
        itemkey: {},
        /**
         * 是否开启手指滑动导航
         */
        isNavTouch: {}
    },
    mixins: [attrSync('activeIndex', {
        mValueChange(nowval) {
            if (nowval === this.itemkey) {
                this.$emit('checked', {
                    itemkey: nowval
                });
            }
        }
    })],
    computed: {
        myName() {
            let res = this.nameText;
            if (typeof res === 'undefined') {
                res = this.itemkey;
            }
            return res;
        }
    },
    methods: {
        /**
         * 点击事件
         * @param {Event} evt 事件对象
         */
        _click(evt) {
            let _that = this;
            _that._onClick(evt);
            _that.myActiveIndex = _that.itemkey;
        },
        /**
         * 点击事件
         * @param {Event} evt 事件对象
         */
        _tap(evt) {
            let _that = this;
            _that._onTap(evt);
            _that.myActiveIndex = _that.itemkey;
        },
        /**
         * 鼠标移入
         */
        _onMouseover() {
            let _that = this;
            _that.$emit('selectChange', _that.itemkey);
        },
        /**
         * 手指按下
         * @param {Event} evt 事件对象
         */
        _onTouchStart (evt) {
            let _that = this;
            if (_that.isNavTouch) {
                _that.myActiveIndex = _that.itemkey;
            }
            _that.$emit('touchstart', evt);
        },
        /**
         * 手指移动
         * @param {Event} evt 事件对象
         */
        _onTouchMove (evt) {
            this.$emit('touchmove', evt);
        }
    }
};
</script>

<style lang="scss">
</style>
