<template>
    <div class="tab-container page-tab">
        <!--:class="
                finalTabsStyle.tabType == 'border-card' ? '' : 'default-tab'
            "
             :type="finalTabsStyle.tabType" 动态tab样式--> 
        <el-tabs
            class="fullheight tab-container-root"
            v-model="currentTabComponent"
            type="border-card"
            @tab-click="handlePaneClick"
            v-if="tabComponentOptions.length > 0"
        >
            <el-tab-pane
                :name="tabComponent.alias"
                v-for="(tabComponent, index) in tabComponentOptions"
                :key="index"
            >
                <span slot="label">
                    <el-link
                        :underline="false"
                        :href="genHref(tabComponent.alias)"
                        >{{ tabComponent.name }}</el-link
                    >
                </span>

                <component
                    v-if="currentTabComponent == tabComponent.alias"
                    v-bind:is="currentTabComponent"
                ></component>
            </el-tab-pane>
        </el-tabs>

        <component
            :class="currentTabComponent == 'tenantInfoManager' ? 'default-tab' : ''"
            class="single-page-component"
            v-if="tabComponentOptions.length <= 0"
            v-bind:is="currentTabComponent"
        ></component>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import utils from '@/hotent-ui-util.js'
import menuApi from '@/api/menu.js'

// 懒加载组件 只加载当前页面用到的组件
// 个人设置

// const secretary = () => import('@/biz/views/personal/Secretary/SecretaryList.vue');
// // 任务中心
// const vTodo = () => import("@/biz/views/flow/todo.vue");
// const vDone = () => import("@/biz/views/flow/done.vue");
// const vRequest = () => import("@/biz/views/flow/myRequest.vue");
// const vFlowList = () => import("@/biz/views/flow/flowList.vue");
// const vTodoRead = () => import("@/biz/views/flow/todoRead.vue");
// const vDoneRead =() => import("@/biz/views/flow/doneRead.vue");
// const vMyRead = () => import("@/biz/views/flow/myRead.vue");
// const vMyDelegate = () => import("@/biz/views/flow/myDelegate.vue");
//养护管理路由
import moduleRouter from '@/module_components.js'
//元件管理
export default {
    name: 'front-tabs-component',
    components: {
        ...moduleRouter
    },
    props: {},
    computed: {
        ...mapGetters({
            tabsStyle: 'styleSetting/tabsStyle',
        }),
        finalTabsStyle: function () {
            // 使用菜单的配置
            if (
                (this.tabsStyle.tabType == 'menuSetting' ||
                    this.tabsStyle.tabType == null) &&
                this.menuTabsStyle
            ) {
                return this.menuTabsStyle
            }

            // 使用默认的
            if (
                this.tabsStyle.tabType == null ||
                ((this.tabsStyle.tabType == 'menuSetting' ||
                    this.tabsStyle.tabType == null) &&
                    !this.menuTabsStyle)
            ) {
                return {tabType: ''}
            }
            // 使用全局的配置
            return this.tabsStyle
        },
    },
    data() {
        return {
            tabComponentOptions: [],
            currentTabComponent: '',
            menuTabsStyle: null,
        }
    },
    methods: {
        handlePaneClick: function (data) {
            if (data.alias) {
                this.currentTabComponent = data.alias
            }
        },
        genHref(anchor) {
            if (this.$router.mode == 'history') {
                return '#' + anchor
            }
            return '/#' + this.$route.path + '#' + anchor
        },
        activeTab(fullpath) {
            let lastIdx = fullpath.lastIndexOf('#')
            if (lastIdx != -1) {
                let urlAnchor = fullpath.substr(lastIdx + 1)
                this.tabComponentOptions.filter((item) => {
                    if (item.alias == urlAnchor) {
                        this.currentTabComponent = urlAnchor
                    }
                })
            }
        },
    },
    mounted() {},
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            // 通过 `vm` 访问组件实例
            let routePath = vm.$route.path
            let activePlat
            if (routePath) {
                let i = routePath.lastIndexOf('/')
                routePath = routePath.slice(i + 1)

                if (vm.$route.path.indexOf('frontPlat') !== -1) {
                    activePlat = 'getFrontMenuByAlias'
                } else {
                    activePlat = 'getMenuByAlias'
                }
            }
            menuApi[activePlat](routePath, (m) => {
                if (m) {
                    vm.$emit('menuChange', m)
                    if (m.children && m.children.length > 0) {
                        vm.tabComponentOptions = m.children
                        vm.currentTabComponent =
                            m.activeTab || vm.tabComponentOptions[0].alias
                        vm.activeTab(to.fullPath)
                    } else {
                        vm.tabComponentOptions = []
                        vm.currentTabComponent = m.alias
                    }
                    if (m.tabsStyle) {
                        vm.menuTabsStyle = utils.parseToJson(m.tabsStyle)
                    } else {
                        vm.menuTabsStyle = null
                    }
                } else {
                    // 没有菜单的路由跳转   需要显示TAb名称需要定义tobName参数传递过来
                    vm.tabComponentOptions = []
                    vm.currentTabComponent = to.name
                    vm.$emit('menuChange', {name: to.params.tobName?to.params.tobName:to.meta.menuLabel})
                }
            })
        })
    },
    beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        this.activeTab(to.fullPath)
        next()
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.tab-container >>> .is-active .el-link {
    color: $--color-primary;
    font-weight: bold;
}

.tab-container-root.default-tab {
    padding: 0;
}
.tab-container > div.tab-container-root /deep/ > .el-tabs__content {
    height: calc(100% - 60px);
}

.tab-container .el-tab-pane {
    height: 100%;
    overflow: auto;
}
.single-page-component {
    margin: 10px;
    box-sizing: border-box;
}
.default-tab.single-page-component {
    margin: 0;
    box-sizing: border-box;
}
.tab-container >>> .el-tabs--border-card {
    border: 0px;
}
</style>
