<template>
    <div class="nus_sticky">
        <sticky-list
            :list="list"
            :filterKey="filterKey"
            :scrollAanimation="scrollAanimation"
            :time="time"
            :duration="duration"
            :activeIndex.sync="myActiveIndex"
            @itemmove="_itemMove"
            @checked="_onChecked">
            <template
                slot-scope="{itemKey, itemIndex, itemData}">
                <slot
                    :itemKey="itemKey"
                    :itemIndex="itemIndex"
                    :itemData="itemData">
                </slot>
            </template>
        </sticky-list>
        <div
            class="nu_sticky-label"
            ref="hook_label"
            v-if="isLabelFixed">
            <slot
                name="hook_label"
                :itemData="activeItemData"
                :activeIndex="myActiveIndex">
                <div class="nu_sticky-label-text">
                    {{_filterItemTitle}}
                </div>
            </slot>
        </div>
    </div>
</template>

<script>
import attrSync from '../../../Mixins/attrSync';
import StickyTmp from './_comm/StickyTmp';
import StickyList from './stickyList/StickyList';
import { callFn, prefixStyle } from 'nimble-lib';

export default {
    extends: StickyTmp,
    name: 'NuSticky',
    props: {
        /**
         * label是否显示浮动
         */
        labelFixed: {
            type: [Boolean, Function],
            default() {
                return function(activeIndex, index, top) {
                    let res = false;
                    if ((index <= 0 && top < 0) || index > 0) {
                        res = true;
                    }
                    return res;
                };
            }
        },
        /**
         * 过滤Label名称
         * @returns {String}
         */
        filterItemTitle: {
            type: Function
        }
    },
    components: {
        StickyList
    },
    mixins: [attrSync('activeIndex')],
    computed: {
        /**
         * 过滤Label名称
         * @returns {String}
         */
        _filterItemTitle() {
            let _that = this;
            let itemKey = _that.myActiveIndex || '';
            let itemData = _that.activeItemData || {};
            return callFn(_that.filterItemTitle || itemData.text || itemKey, [itemData, itemKey, _that.itemIndex]);
        }
    },
    data() {
        return {
            /**
             * 标题是否浮动
             */
            isLabelFixed: false,
            activeItemData: null
        };
    },
    mounted() {
        let _that = this;
        _that.$nextTick(() => {
            setTimeout(() => {
                _that._getLabelHeight();
            }, 0);
        });
    },
    methods: {
        /**
         * 选中项数据
         * @param {Object} itemData item项数据
         */
        _onChecked(itemData) {
            this.activeItemData = itemData;
            this.$emit('itemmove', itemData);
        },
        /**
         * 获取label的高度
         * @param {Boolean} isReset 是否重新获取高度
         * @returns {Number}
         */
        _getLabelHeight(isReset) {
            let _that = this;
            let _refs = _that.$refs || {};
            let _labelEl = _refs.hook_label;
            let _res = _that._labelHeight || 0;
            if (_labelEl && (isReset || !_res)) {
                _res = _labelEl.offsetHeight;
            }
            _that._labelHeight = _res;
            return _res;
        },
        /**
         * 设置标题浮动
         * @param {Number} index 索引
         * @param {Boolean} top 当前距离顶部位置
         * @return {Boolean}
         */
        _setIsLabelFixed(index, top) {
            let _that = this;
            _that.isLabelFixed = callFn(_that.labelFixed, [_that.myActiveIndex, index, top]);
            return _that.isLabelFixed;
        },
        /**
         * 设置标题浮动
         * @param {Object} res 数据
         */
        _itemMove(res) {
            let _that = this;
            let _labelEl = _that.$refs.hook_label;
            _that._setIsLabelFixed(res.index || 0, res.top);
            if (_labelEl) {
                let _labelBottom = _that._labelBottom || 0;
                let _labelHeight = _that._getLabelHeight();
                if (_labelHeight && (_labelBottom <= _labelHeight || (_labelBottom > _labelHeight && res.bottom <= _labelHeight))) {
                    let _bottom = res.bottom <= _labelHeight ? (res.bottom - _labelHeight) : 0;
                    _labelEl.style[prefixStyle('transform')] = 'translate3d(0px, ' + _bottom + 'px, 0px)';
                    _that._labelBottom = _bottom;
                }
            }
            _that.$emit('checked', res);
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';
.nus_sticky {
    .nu_sticky-label{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: inline-block;
    }
    .nu_sticky-label-text{
        text-align: left;
    }
}
</style>
