<template>
    <div class="nus_indexlist">
        <template v-for="(item, index) in comList">
            <div
                class="nu_index-cont"
                v-if="item.key === 'cont'"
                :key="index">
                <nu-sticky
                    :activeIndex.sync="myActiveIndex"
                    :list="list"
                    :filterKey="filterKey"
                    :scrollAanimation="scrollAanimation"
                    :time="time"
                    :duration="duration"
                    @itemmove="_itemMove"
                    @checked="_onChecked">
                    <template slot-scope="{itemKey, itemData, itemIndex}">
                        <nu-celllist
                            v-if="_slotFilter({
                                itemKey:itemKey,
                                itemData:itemData,
                                itemIndex:itemIndex
                            })"
                            v-bind="_filterProps(itemKey, itemData, itemIndex)"
                            @confirmchange="_onConfirmchange"
                            @click="_onClick"
                            @tap="_onTap">
                        </nu-celllist>
                        <slot
                            v-else
                            v-bind="_filterProps(itemKey, itemData, itemIndex)"
                            :confirmchange="_onConfirmchange"
                            :click="_onClick"
                            :tap="_onTap">
                            <nu-celllist
                                v-bind="_filterProps(itemKey, itemData, itemIndex)"
                                @confirmchange="_onConfirmchange"
                                @click="_onClick"
                                @tap="_onTap">
                            </nu-celllist>
                        </slot>
                    </template>
                </nu-sticky>
            </div>
            <div
                class="nu_index-nav-wrap"
                :class="[item.className]"
                v-if="item.key === 'nav'"
                :key="index">
                <nu-scrollnav
                    class="nu_index-nav"
                    :activeIndex.sync="myActiveIndex"
                    :list="list"
                    :isNavTouch="isNavTouch"
                    :filterKey="filterKey">
                </nu-scrollnav>
            </div>
        </template>
    </div>
</template>

<script>
import { callFn } from 'nimble-lib';
import attrSync from '../../../Mixins/attrSync/attrSync';
import NuScrollnav from '../scrollnav';
import NuSticky from '../sticky';
import BaseTmp from '../_comm/BaseTmp';
import NuCelllist from '../celllist';

export default {
    name: 'NuIndexlist',
    extends: BaseTmp,
    components: {
        NuScrollnav,
        NuSticky,
        NuCelllist
    },
    props: {
        /**
         * 数据列表
         */
        list: {
            type: Array
        },
        /**
         * 过滤key
         */
        filterKey: {
            type: Function
        },
        /**
         * 滚动动画
         */
        scrollAanimation: {
            default: false
        },
        /**
         * 每步时长
         */
        time: {},
        /**
         * 总时长
         */
        duration: {},
        /**
         * 是否开启手指滑动导航
         */
        isNavTouch: {},
        /**
         * nav的方向 (r是右边；l为左边;其它为不显示)
         */
        navDir: {
            default: 'r'
        },
        /**
         * 内容插槽过滤器
         */
        slotFilter: {
            default: false
        },
        /**
         * 懒加载参数
         */
        lazyOptions: {
            type: Object
        },
        /**
         * 是否需要lazy
         */
        isLazy: {
            type: Boolean,
            default: true
        },
        /**
         * label是否显示浮动
         */
        labelFixed: {
            type: [Boolean, Function]
        },
        /**
         * 过滤Label名称
         * @returns {String}
         */
        filterItemTitle: {
            type: Function
        },
        /**
         * 过滤item数据
         * @returns {String}
         */
        filterItemData: {
            type: Function
        }
    },
    mixins: [attrSync('activeIndex')],
    computed: {
        comList() {
            let _that = this;
            let res = [{
                key: 'cont'
            }];
            switch ((_that.navDir + '').toLowerCase()) {
                case 'l':
                    res.unshift({
                        key: 'nav',
                        className: 'nu_nav-left'
                    });
                    break;
                case 'r':
                    res.push({
                        key: 'nav'
                    });
                    break;
            }
            return res;
        }
    },
    methods: {
        /**
         * 过滤索引名称
         * @param {Object} item 当前项的数据
         * @param {Number} index 索引
         * @returns {*}
         */
        _filterKey(item, index) {
            let _index = index;
            if (item && typeof item.index !== 'undefined') {
                _index = item.index;
            }
            return callFn(this.filterKey || _index, [item, index]);
        },
        /**
         * 过滤内容的props
         * @param {any} itemKey 当前项的key
         * @param {Object} itemData 当前项的数据
         * @param {Number} itemIndex 当前项的索引
         * @returns {Object}
         */
        _filterProps(itemKey, itemData, itemIndex) {
            let _that = this;
            return {
                lazyOptions: _that.lazyOptions,
                isLazy: _that.isLazy,
                itemKey: itemKey,
                itemData: itemData,
                itemIndex: itemIndex,
                labelFixed: _that.labelFixed,
                filterItemTitle: _that.filterItemTitle,
                filterItemData: _that.filterItemData
            };
        },
        /**
         * 选中项数据
         * @param {Object} itemData item项数据
         */
        _onChecked(itemData) {
            this.$emit('itemmove', itemData);
        },
        /**
         * item项移动
         * @param {Object} res 当前数据
         */
        _itemMove(res) {
            this.$emit('checked', res);
        },
        /**
         * slot过滤是否使用默认内容
         * @param {Object} data item项数据
         * @returns {Boolean}
         */
        _slotFilter(data) {
            return !!callFn(this.slotFilter, [data]);
        },
        /**
         * 提交确认事件
         * @param {Event} evt 事件对象
         */
        _onConfirmchange(evt) {
            this.$emit('confirmchange', evt);
        }
    }
};
</script>

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

.nus_indexlist{
    user-select: none;
    outline: none;
    position: relative;
    height: 100%;
    overflow: hidden;
    border-color: $nuindexlist-border-color;
    font-size: $nuindexlist-font-size;
    * {
        border-color: inherit;
    }
    ul,li{
        padding: 0;
        list-style: none;
    }
    .nu_cell-list-label,.nu_sticky-label-text{
        color: $nuindexlist-label-color;
        background: $nuindexlist-label-bg-color;
        padding: 6px;
        font-size: 0.8em;
        text-align: left;
        font-weight: bold;
    }
    .nu_index-nav-wrap{
        position: absolute;
        padding-top: 25px;
        top: 5%;
        height: 90%;
        right: 0;
        width: 30px;
        text-align: center;
        z-index: 1;
    }
    .nu_nav-left{
        left: 0;
        right: auto;
    }
    .nu_index-cont{
        -webkit-overflow-scrolling:touch;
        height: 100%;
        width: 100%;
        overflow-y: auto;
    }
}
</style>
