<template>
    <div class="nus_loop"
        :style="elHeight && {height: elHeight}"
        v-if="list && list.length">
        <transition-group
            tag="ul"
            class='nu_scroll-ul'
            name="n_list"
            @after-leave="_autoPlay">
            <template
                v-if="showFlag + '' === '1'"
                v-for="(item, index) in list">
                <li class="nu_scroll-item"
                    ref="hook_item"
                    v-if="myActiveIndex === index"
                    @click="_click($event, item)"
                    @tap="_tap($event, item)"
                    :key="index + ''">
                        <slot
                            :itemData="_filterItem(item)">
                        </slot>
                </li>
            </template>
            <template
                v-else
                v-for="(item, index) in list">
                <li class="nu_scroll-item"
                    ref="hook_item"
                    v-show="myActiveIndex === index"
                    @click="_click($event, item)"
                    @tap="_tap($event, item)"
                    :key="index + ''">
                        <slot
                            :itemData="_filterItem(item)">
                        </slot>
                </li>
            </template>
        </transition-group>
    </div>
</template>
<script>
import { callFn } from 'nimble-lib';
import BaseTmp from '../_comm/BaseTmp';
import attrSync from '../../../Mixins/attrSync';

export default {
    extends: BaseTmp,
    name: 'NuLoop',
    model: {
        prop: 'activeIndex',
        event: 'indexChange'
    },
    props: {
        /**
         * 展示类型
         */
        showFlag: { // 0为v-show,1为v-if
            default: 1
        },
        /**
         * 停留时间
         */
        durationTime: {
            type: Number,
            default: 2000
        },
        /**
         * 轮播文字列表
         */
        list: {
            type: Array,
            requird: true
        },
        /**
         * 过滤数据项
         */
        dataFilter: {
            type: Function
        }
    },
    data() {
        return {
            cHeight: 0
        };
    },
    mixins: [attrSync('activeIndex', {
        myValueInit(value) {
            return value === undefined ? 0 : value;
        },
        mValueChange(nowVal) {
            let _that = this;
            _that._setIndex(nowVal);
            _that._initCom();
        }
    })],
    computed: {
        elHeight() {
            let _height = this.cHeight;
            let res = '';
            if (_height) {
                res = _height + 'px';
            }
            return res;
        }
    },
    watch: {
        list() {
            this._initCom();
        }
    },
    created() {
        let _that = this;
        _that._onResize = () => {
            _that.cHeight = '';
            setTimeout(() => {
                _that._resetHeight();
            });
        };
        window.addEventListener('resize', _that._onResize);
    },
    mounted() {
        this._initCom();
    },
    methods: {
        /**
         * 初始化
         */
        _initCom() {
            let _that = this;
            let _list = _that.list;
            if (_list && _list.length) {
                _that._setIndex(_that.myActiveIndex);
                _that._autoPlay();
            }
        },
        /**
         * 重设高度
         */
        _resetHeight() {
            let _that = this;
            let _hookItem = _that.$refs.hook_item;
            _hookItem = _hookItem && _hookItem[0];
            _that.cHeight = _hookItem && _hookItem.clientHeight;
        },
        /**
         * 点击事件
         * @param {Event} evt 事件对象
         * @param {Object} item 事件对象
         */
        _click(evt, item) {
            let _that = this;
            _that._onClick(evt);
            _that._clickItem({
                Event: evt,
                data: item
            });
        },
        /**
         * 点击事件
         * @param {Event} evt 事件对象
         * @param {Object} item 事件对象
         */
        _tap(evt, item) {
            let _that = this;
            _that._onTap(evt);
            _that._clickItem({
                Event: evt,
                data: item
            });
        },
        /**
         * 自动播放
         */
        _autoPlay() {
            let _that = this;
            if (typeof _that.timeOut !== 'undefined') {
                clearTimeout(_that.timeOut);
            }
            _that.timeOut = setTimeout(() => {
                _that._resetHeight();
                setTimeout(() => {
                    _that._setIndex((_that.myActiveIndex + 1) || 0);
                }, 0);
            }, _that.durationTime || 2000);
        },
        /**
         * 设置索引
         * @param {Number} index 索引
         */
        _setIndex(index) {
            let _that = this;
            if (index > (_that.list && _that.list.length - 1)) {
                _that.myActiveIndex = 0;
            } else {
                _that.myActiveIndex = index;
            }
        },
        /**
         * 过滤数据
         * @param {Object} item 数据
         * @return {Object}
         */
        _filterItem(item) {
            let _that = this;
            let _item = callFn(_that.dataFilter || item, [item]);
            return _item;
        },
        _clickItem(item) {
            this.$emit('clickItem', item);
        }
    }
};
</script>
<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';
.nus_loop{
    $time: 1s;
    height: 100%;
    overflow: hidden;
    .nu_scroll-ul{
        position: relative;
        height: 100%;
        line-height: 1;
    }
    .nu_scroll-item {
        width: 100%;
        height: 100%;
    }
    .n_list{
        @at-root #{&}-{
            &enter-active,&leave-active{
                transition: transform $time ease;
                transform: translateY(0);
            }
            &enter-to,&leave-to {
                transform: translateY(-100%);
            }
        }
    }
}
</style>
