<template>
    <div ref="tabCtl" class="go_tab_ctl" :class="type === 'customer' ? 'customer_tab' : ''">
        <div class="ivu-tabs-nav-scroll">
            <div class="nav-text ivu-tabs-nav">
                <div
                    :key="index"
                    @click="changeTabset($event, item)"
                    v-for="(item, index) of items"
                    class="ivu-tabs-tab"
                    :style="tabsStyle(items)"
                    :class="activeClass(item)"
                >
                    {{ item.text }}
                    <span v-if="item.showCount" style="display: inline-block;width: 22px;text-align: center;">
                        {{ item.count||0 }}
                    </span>
                </div>

            </div>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import {AssertUtils, GoingUtils} from "goingutils";

    export default {
        name: "go-tab-router",
        data() {
            return {
                tabCellId: GoingUtils.getUUid(10),
                curActiveCellId:null,
            };
        },
        props: {
            //刷新tab
            flushTab: {
                type: String,
                default: ""
            },
            type: {
                type: String,
                default: "common"
            },
            //tab组件的高度
            height: {
                type: Number,
                default: 0
            },
            //tab表格头的高度
            tabHeaderHeight: {
                type: Number,
                default: 42
            },
            //上下间隔高度
            marginHeight: {
                type: Number,
                default: 4
            },
            //tab组件的宽度
            width: {
                type: Number,
                default: 0
            },
            items: {
                type: Array,
                default: () => []
            }
        },
        computed: {},
        methods: {
            //获取当前激活但panelId
            getCurPanelId(){
                if(this.curActiveCellId!=null){
                    return this.curActiveCellId;
                }else{
                    return null;
                }
            },
            //设置tab但宽度样式信息
            tabsStyle(items) {
                if (this.type === "customer" && this.width > 0) {
                    return {width: this.width / items.length + "px"};
                }
            },
            //消除当前tab的选中状态
            _removeActiveClass() {
                $(this.$refs.tabCtl)
                    .find(".ivu-tabs-tab-active." + this.tabCellId)
                    .removeClass("ivu-tabs-tab-active");

                $(this.$refs.tabCtl)
                    .find(".ivu-tabs-tab-focused." + this.tabCellId)
                    .removeClass("ivu-tabs-tab-focused");

            },
            //隐藏指定的tab
            hideTabByIndex(index){
                $( $(this.$refs.tabCtl).find(".ivu-tabs-tab").get(index)).removeClass("ivu-tabs-tab-active");
                $( $(this.$refs.tabCtl).find(".ivu-tabs-tab").get(index)).removeClass("ivu-tabs-tab-focused");
                $( $(this.$refs.tabCtl).find(".go_tab_panel").get(index)).removeClass("active_panel");
                $( $(this.$refs.tabCtl).find(".ivu-tabs-tab").get(index)).hide();
            },
            //如果是重新加载了tab数据 需要重新设置当前的选中状态
            activeTabByIndex(index) {
                $($(this.$refs.tabCtl).find(".go_tab_panel").get(index)).addClass("active_panel");
                $($(this.$refs.tabCtl).find(".ivu-tabs-tab").get(index)).addClass("ivu-tabs-tab-active ivu-tabs-tab-focused");
            },
            setTabActive(evnet) {
                this._removeActiveClass();
                $(evnet.target)
                    .closest(".ivu-tabs-tab")
                    .addClass("ivu-tabs-tab-active ivu-tabs-tab-focused");
            },
            //跳转相应的界面
            _jumpPage(url) {
                if (AssertUtils.isNotEmpty(url)) {
                    //如果是函数 则需要执行函数来获取跳转的url路径
                    if (AssertUtils.isFunction(url)) {
                        url = url(this);
                    }
                    GoingUtils.jumpLayoutPage(url, this.$router);
                }
            },
            //切换相应的panel 跟panelId
            _changeByPanelId(evnet, panelId) {
                //如果存在panelId
                if (AssertUtils.isNotEmpty(panelId)) {
                    $(evnet.target)
                        .closest(".go_tab_ctl")
                        .find(".active_panel")
                        .removeClass("active_panel");
                    $(evnet.target)
                        .closest(".go_tab_ctl")
                        .find("#" + panelId)
                        .addClass("active_panel");
                }
            },
            //选择相应的tab对象
            changeTabset(evnet, item) {
                let {url, panelId} = item;
                this.curActiveCellId=panelId;
                //设置相应tab为激活状态
                this.setTabActive(evnet);
                //如果存在url路径 则进行跳转
                this._jumpPage(url);
                //切换相应的panel 跟panelId
                this._changeByPanelId(evnet, panelId);
                //执行回调事件
                this.$emit("changeTab", item);
            },
            //获取激活tab的样式
            activeClass({panelId,active}) {
                if (active) {
                    this.curActiveCellId=panelId;
                    //设置相应tab为激活状态
                    return " ivu-tabs-tab-active ivu-tabs-tab-focused " + this.tabCellId;
                } else {
                    return this.tabCellId;
                }
            },
            //如果是重新加载了tab数据 需要重新设置当前的选中状态
            setTabActiveByIndex() {
                let flagIndex = -1;
                this.items.forEach((item, index) => {
                    if (item.active) {
                        flagIndex = index;
                    }
                });
                if (flagIndex >= 0) {
                    this._removeActiveClass();
                    $(this.$refs.tabCtl)
                        .find(".ivu-tabs-tab:eq(" + flagIndex + ")")
                        .addClass("ivu-tabs-tab-active ivu-tabs-tab-focused");
                }
            },
            //因为存在layout  而且layout的渲染快于tab  所以需要查找相应的子元素来进行resize操作
            executeLayoutResize(itemObj) {
                let vueObj = this;
                if (itemObj.$children.length > 0) {
                    itemObj.$children.forEach(function (sonItemObj) {
                        //刷新layout节点
                        if (sonItemObj["resizeLayout"] != null) {
                            sonItemObj["resizeLayout"]();
                        }
                        //如果存在树对象
                        if (sonItemObj["resizeTreeObj"] != null) {
                            sonItemObj["resizeTreeObj"]();
                        }
                        setTimeout(function () {
                            //如果存在表格对象
                            if (sonItemObj["resizeGridObj"] != null) {
                                sonItemObj["resizeGridObj"]();
                            }
                        },100);
                        vueObj.executeLayoutResize(sonItemObj);
                    });
                }
            },
            //设置容器的高度信息
            initTabSetHeight(flag=true){
                let tabSetHeight = 0;
                // 如果存在用户定义的高度 则采用用户的高度
                if (this.height > 0) {
                    tabSetHeight = this.height;
                } else {
                 //如果用户没定义高度 则采用父节点的高度
                    tabSetHeight = $(this.$el).parent().css("height");
                    $(this.$el).css("height", parseFloat(tabSetHeight) - this.marginHeight);
                }
                //如果存在子节点
                if (this.$children.length > 0) {
                    //设置panel的高度
                    $(this.$children[0].$el).css("height", parseFloat(tabSetHeight+"") - this.tabHeaderHeight);
                    //判断如果panel下的子节点的子节点包含layout 则执行resize事件
                    flag&&this.executeLayoutResize(this.$children[0]);

                    if (this.width > 0) {
                        $(this.$children[0].$el).css("width", this.width);
                    }
                }
            }
        },
        mounted() {
            //设置容器的高度信息
            this.$nextTick(function () {
                //初始化 tab的高度
                this.initTabSetHeight();
            });
        },
        watch: {
            flushTab() {
                this.setTabActiveByIndex();
            }
        },
        components: {}
    };
</script>
