<template>
    <div class="nus_tabview">
        <nu-layout
            class="nu_layout-contain"
            :fit="fit"
            :layout="layout"
            :bdClassName="bdClassName"
            :hdClassName="hdClassName"
            @scroll="_scroll">
            <template :slot="isBottom ? 'hook_ft' : 'hook_hd'">
                <slot name="hook_tabbar">
                    <nu-tabbar
                        class="nu_tab-nav"
                        :list="list"
                        :width="width"
                        :activeCls="activeCls"
                        :filterItem="filterItem"
                        :activeIndex.sync="myActiveIndex"
                        :activeKey.sync="myActiveKey"
                        :tabsMap.sync="myTabsMap">
                        <template
                            slot-scope="{ itemData, index, data }">
                            <slot name="hook_tab"
                                v-bind="_filterProps({itemData, index, data})">
                                <span class="nu_tab-text">{{itemData.text}}</span>
                            </slot>
                        </template>
                    </nu-tabbar>
                </slot>
            </template>
            <template>
                <div class="nu_tabview-cont">
                    <slot
                        v-bind="_filterProps({tabLinkage:_tabsMapChange})">
                        <template v-for="(item, index) in list">
                            <div
                                class="nu_tabview-item"
                                v-show="(myActiveIndex + '') === (index + '')"
                                :key="index">
                                <slot
                                    name="hook_item"
                                    v-bind="_filterProps({itemData:_filterItem(item, index), index:index, data:item,tabLinkage:_tabsMapChange})">
                                </slot>
                            </div>
                        </template>
                    </slot>
                </div>
            </template>
        </nu-layout>
    </div>
</template>

<script>
import { callFn, extend, diffData } from 'nimble-lib';
import attrSync from '../../../Mixins/attrSync/attrSync';
import LayoutTmp from '../_comm/LayoutTmp';
import NuLayout from '../layout';
import NuTabbar from '../../widget/tabbar';

export default {
    extends: LayoutTmp,
    name: 'NuTabView',
    components: {
        NuLayout,
        NuTabbar
    },
    props: {
        /**
         * 适配（iphonex和华为底边的问题）
         */
        fit: {},
        /**
         * header和footer固定定位
         */
        layout: {},
        /**
         * 页面内容class名称
         */
        bdClassName: {},
        /**
         * 页面头class名称
         */
        hdClassName: {
            default: 'nu_tab-head'
        },
        /**
         * 当前菜单级别
         */
        level: {
            type: Number,
            default: -1
        },
        /**
         * tab列表
         */
        list: {
            type: Array
        },
        /**
         * 活动的class名称
         */
        activeCls: {
            type: String
        },
        /**
         * tab项的宽度
         */
        width: {
            default: true
        },
        /**
         * 过滤展示的文案
         */
        filterItem: {
            type: Function
        },
        /**
         * 是否显示在底部（默认显示在顶部）
         */
        isBottom: {
            type: Boolean,
            default: false
        }
    },
    mixins: [
        /**
         * tab的级连关系
         */
        attrSync('tabsMap'),
        /**
         * 活动项索引
         */
        attrSync('activeIndex'),
        attrSync('activeKey')
    ],
    methods: {
        /**
         * 滚动事件
         * @param {Event} evt 事件对象
         */
        _scroll(evt) {
            this.$emit('scroll', evt);
        },
        /**
         * 过滤slot传出的Props参数
         * @param {Object} options 选项参数
         * @returns {Object}
         */
        _filterProps(options) {
            const _that = this;
            return Object.assign({
                tabsMap: _that.myTabsMap,
                activeIndex: _that.myActiveIndex,
                level: (_that.level || 0) + 1
            }, options || {});
        },
        /**
         * 过滤展示的导航栏的数据项
         * @param {Object} item tab数据项
         * @param {Number} index tab数据项索引
         * @returns {Object} 返回过滤后的数据项
         */
        _filterItem (item, index) {
            const _that = this;
            let res = callFn(_that.filterItem || item, [item, index], _that);
            if (!(res instanceof Object)) {
                res = {
                    text: res
                };
            }
            return res;
        },
        /**
         * 更改tabsMap
         * @param {Object} nowVal 对应索引项的tabsMap
         * @param {Number} index tabsMap索引
         */
        _tabsMapChange(nowVal, index) {
            let _myTabsMap = this.myTabsMap;
            if (!diffData(_myTabsMap && _myTabsMap[index], nowVal)) {
                _myTabsMap = extend(_myTabsMap);
                _myTabsMap[index] = nowVal || {};
                this.myTabsMap = _myTabsMap;
            }
        }
    }
};
</script>
<style lang="scss">
.nus_tabview{
    height: 100%;
    .nu_tabview-item{
        height: 100%;
    }
}
</style>
