<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 formManager = () => import('@/views/form/FormManager.vue')
const mobileFormManager = () => import('@/views/form/MobileFormManager.vue')
const customDialogList = () =>
    import('@/views/form/customDialog/CustomDialogList.vue')
const customQueryList = () =>
    import('@/views/form/customquery/CustomQueryList.vue')
const businessObj = () => import('@/views/form/BusinessObj.vue')
const formTemplateList = () => import('@/views/form/FormTemplateList.vue')
const flowChartManager = () => import('@/views/form/FlowChartManager.vue')

const customChartManager = () => import('@/views/form/CustomChartManager.vue')
const formTable = () => import('@/views/form/TableDesign/FormTable.vue')
const dataTable = () => import('@/views/form/TableDesign/DataTable.vue')
const createView = () => import('@/views/form/TableDesign/CreateView.vue')
const dataDicManager = () => import('@/views/meta/DataDicManager.vue')

/** 用户中心相关页面 **/
const tenantManager = () => import('@/views/uc/Tenant/TenantManager.vue')
const tenantInfoManager = () => import('@/views/system/TenantInfoManager.vue')
const Demension = () => import('@/views/uc/org/Demension.vue')
const roleManager = () => import('@/views/uc/RoleManager.vue')
const reportLine = () => import('@/views/uc/ReportLine.vue')
const userListManager = () => import('@/views/uc/UcManager/UserListManager.vue')
const tenantTypeManager = () =>
    import('@/views/uc/Tenant/TenantTypeManager.vue')
const tenantParamsManager = () =>
    import('@/views/uc/Tenant/TenantParamsManager.vue')
const orgManager = () => import('@/views/uc/org/Organization.vue')
const heiOrganization = () =>
    import('@/views/uc/heiorgmanager/HeiOrganization.vue')
//  用户中心-职务岗位-职务管理
const JobManagement = () => import('@/views/uc/Position/JobManager.vue')
//  用户中心-职务岗位-岗位管理
const PostManagement = () => import('@/views/uc/Position/PostManager.vue')
const prgParamManage = () => import('@/views/uc/org/PrgParamManage.vue')
const userParamManager = () =>
    import('@/views/uc/UcManager/UserParamManager.vue')
const matrixManager = () => import('@/views/uc/MatrixManager.vue')
const holidayManager = () => import('@/views/uc/Scheduling/HolidayManager.vue')
const shiftRuleManager = () => import('@/views/uc/ShiftRuleManager.vue')
const groupManage = () => import('@/views/uc/Scheduling/groupManage.vue')
const DataAuth = () => import('@/views/uc/DataAuth.vue')
/** 流程相关页面 **/
const printRecordManager = () => import('@/views/flow/PrintRecordManager.vue')
const defManager = () => import('@/views/flow/DefManager.vue')
const instanceManager = () => import('@/views/flow/InstanceManager.vue')
const taskManager = () => import('@/views/flow/TaskManager.vue')
const delegationManager = () => import('@/views/flow/DelegationManager.vue')
const agentManager = () => import('@/views/flow/AgentManager.vue')
const secretaryManager = () => import('@/views/flow/SecretaryManager.vue')
const transferManager = () => import('@/views/flow/TransferManager.vue')
const approvalItemList = () => import('@/views/flow/help/ApprovalItemList.vue')
const msgTemplateList = () => import('@/views/flow/help/MsgTemplateList.vue')
const flowAuthManager = () => import('@/views/flow/FlowAuthManager.vue')
const scriptList = () => import('@/views/flow/help/ScriptList.vue')
const conditionScriptList = () =>
    import('@/views/flow/help/ConditionScriptList.vue')
const bpmCommonDefList = () => import('@/views/flow/BpmCommonDefList.vue')

/** 门户相关页面 **/
const fileList = () => import('@/views/system/Enclosure/FileList.vue')
const identityManager = () => import('@/views/meta/IdentityManager.vue')
const dataSourceManager = () => import('@/views/meta/DataSourceManager.vue')
const i18nMessageManager = () =>
    import('@/views/system/i18n/I18nMessageManager.vue')
const i18nMessageTypeManager = () =>
    import('@/views/system/i18n/I18nMessageTypeManager.vue')
const MenuManager = () => import('@/views/system/Menu/MenuManager.vue')
const methodListManager = () =>
    import('@/views/system/Menu/MethodListManager.vue')
const executeJobList = () => import('@/views/system/ExecuteJobList.vue')
const schedulerTriggerList = () =>
    import('@/views/system/SchedulerTriggerList.vue')
const sysTypeTreeManager = () =>
    import('@/views/system/SysTypeManager/SysTypeTreeManager.vue')
const sysTypeCatManager = () =>
    import('@/views/system/SysTypeManager/SysTypeCatManager.vue')
const demo = () => import('@/views/Demo.vue')
const indexLayout = () => import('@/views/portal/IndexLayout.vue')
const indexColumn = () => import('@/views/portal/IndexColumn.vue')
const layoutDistribution = () => import('@/views/portal/LayoutDistribution.vue')
const defaultLayout = () => import('@/views/portal/DefaultLayout.vue')
const sysPropertiesManager = () =>
    import('@/views/system/SysPropertiesManager.vue')
const sysSetting = () => import('@/views/system/SysSetting.vue')

const startGenerator = () =>
    import('@/views/system/generator/StartGenerator.vue')
const generatorLog = () => import('@/views/system/generator/GeneratorLog.vue')
const sysExternalUniteList = () =>
    import('@/views/system/SysExternalUnite/SysExternalUnite.vue')
const appModelManager = () => import('@/views/portal/AppModelManager.vue')
const portalNewsNoticeManager = () =>
    import('@/views/news/PortalNewsNoticeManager.vue')
const flowUploadProperties = () =>
    import('@/views/system/Enclosure/FlowUploadPropertiesManager.vue')
const portalDataSensitiveManager = () =>
    import(
        /* webpackChunkName: "group-portal" */ '@/views/portal/PortalDataSensitiveManager.vue'
    )
const sysTagManager = () => import('@/views/portal/SysTagManager.vue')
const appCenter = () => import('@/views/portal/AppCenter.vue')
const watermarkManager = () => import('@/views/flow/WatermarkManager.vue')
const sysModuleList = () => import('@/views/system/generator/sysModuleList.vue')

const groupMange = () => import('@/views/imMange/groupMange.vue')
const massesGroupMange = () => import('@/views/imMange/massesGroupMange.vue')

// 系统配置
const attachmentConfig = () => import('@/views/system/Enclosure/attachmentConfig.vue')

const sysMsg = () => import('@/views/system/SysMsg.vue')
const sysDict = () => import('@/views/system/SysDict/SysDict.vue')
const sysAdstration = () =>
    import('@/views/system/SysAdstration.vue')
const BackupManager = () =>
    import('@/views/system/Backupmanagement/BackupManager.vue')
// 分类字典
const ClassificationDictionary = () =>
    import(
        '@/views/system/ClassificationDictionary/ClassificationDictionary.vue'
    )
// 流水号规则
const DocumentNumber = () =>
    import('@/views/system/DocumentNumber/DocumentNumber.vue')
// 常用语管理
const CommonWords = () => import('@/views/system/CommonWords/CommonWords.vue')
/*系统缓存 */
// redis监控
const Redismonitor = () => import('@/views/system/Monitor/Redismonitor.vue')
// 服务器信息
const serverInformation = () =>
    import('@/views/system/Monitor/serverInformation.vue')
// JVM监控
const JVMmonitor = () => import('@/views/system/Monitor/JVMmonitor.vue')
// Tomcat监控
const Tomcatmonitor = () => import('@/views/system/Monitor/Tomcatmonitor.vue')
// 硬盘监控
const HardDisk = () => import('@/views/system/Monitor/HardDisk.vue')
// 请求追踪
const RequestTracking = () =>
    import('@/views/system/Monitor/RequestTracking.vue')
/*系统缓存 */

/** 日志中心的相关页面 **/
/* 日志配置 */
const LogConfiguration = () => import('@/views/log/LogConfiguration.vue')

/* 登录日志 */
//登录日志
const LoginLogList = () => import('@/views/log/LoginLog/LoginLogList.vue')
//登录统计
const LoginStatistics = () => import('@/views/log/LoginLog/LoginStatistics.vue')
//在线用户
const OnlineUser = () => import('@/views/log/LoginLog/OnlineUser.vue')

/* 异常日志 */
//系统异常
const SysException = () => import('@/views/log/ExceptionLog/SysException.vue')
//业务异常
const BusinessException = () =>
    import('@/views/log/ExceptionLog/BusinessException.vue')

/* 平台操作日志 */
//消息发送日志
const MessageSendLog = () => import('@/views/log/MessageSendLog.vue')
//操作日志
const OperationLogList = () =>
    import('@/views/log/OperationLog/OperationLogList.vue')
//授权日志
const AuthorizationLog = () =>
    import('@/views/log/OperationLog/AuthorizationLog.vue')
//审计日志
const AuditLog = () => import('@/views/log/OperationLog/AuditLog.vue')

/* 业务操作日志 */
const BusinessLog = () => import('@/views/log/BusinessLog.vue')

/* 事件接口日志 */
const InterfaceEventLog = () => import('@/views/log/InterfaceEventLog.vue')
const AdministratorLog = () => import('@/views/log/AdministratorLog.vue')



/** 消息配置的相关页面 **/
//消息分类
const MessageClassification = () =>
    import('@/views/applicationCenter/MessageConfig/MessageClassification.vue')
//消息模板
const msgTemplate = () =>
    import('@/views/applicationCenter/MessageConfig/MsgTemplateList.vue')
//消息配置
const msgConfig = () =>
    import('@/views/applicationCenter/MessageConfig/MsgConfig.vue')

/** 调度管理相关页面 **/
const schedulerManager = () =>
    import('@/views/applicationCenter/SchedulerManager/SchedulerManager.vue')

/** 报表管理相关页面 **/

//数据报表
const reportDataDesign = () =>
    import('@/views/reportManagement/ReportData/ReportDataDesign.vue')
const reportDataDemo = () =>
    import('@/views/reportManagement/ReportData/ReportDataDemo.vue')
//图形报表
const reportGraphicDesign = () =>
    import('@/views/reportManagement/ReportGraphic/ReportGraphicDesign.vue')
const reportGraphicDemo = () =>
    import('@/views/reportManagement/ReportGraphic/ReportGraphicDemo.vue')
//打印设计
const reportPrintDesign = () =>
    import('@/views/reportManagement/ReportPrint/ReportPrintDesign.vue')
const reportPrintDemo = () =>
    import('@/views/reportManagement/ReportPrint/ReportPrintDemo.vue')
//大屏设计
const classificationManagement = () =>
    import('@/views/reportManagement/BigScreen/ClassificationManagement.vue') //分类管理
const bigScreenManagement = () =>
    import('@/views/reportManagement/BigScreen/BigScreenManagement.vue') //大屏管理
const mapManagement = () =>
    import('@/views/reportManagement/BigScreen/MapManagement.vue') //地图管理
const bigScreenDataSource = () =>
    import('@/views/reportManagement/BigScreen/BigScreenDataSource.vue') //大屏数据源管理

// test
const maptest = () => import('@/views/Map/maptest.vue')

// 安全中心
const secManage = () => import('@/views/SecurityCenter/SecManage.vue')
const accountLock = () => import('@/views/SecurityCenter/AccountLock.vue')
const deviceManager = () => import('@/views/SecurityCenter/DeviceManager.vue')
const pwdStrategy = () => import('@/views/SecurityCenter/PwdStrategy.vue')

//流程中心
const FlowUploadProperties =() => import('@/views/flow/FlowUploadPropertiesManager.vue')

// 404页面
const noPage = () => import('@/views/common/noPage.vue')
// 首页看板
const sysIndex = () => import('@/views/common/SysIndex.vue')
//消息中心
const MessageCenter = () =>
    import('@/views/common/MessageCenter.vue')
// biz模块可利用此模式分文件管理
// import moduleComponents from '@/module_components'

//元件管理
export default {
    name: 'ht-tabs-component',
    components: {
        attachmentConfig,
        noPage,
        portalNewsNoticeManager,
        formManager,
        mobileFormManager,
        roleManager,
        reportLine,
        MenuManager,
        schedulerManager,
        userListManager,
        tenantTypeManager,
        tenantParamsManager,
        tenantManager,
        tenantInfoManager,
        orgManager,
        instanceManager,
        taskManager,
        printRecordManager,
        identityManager,
        executeJobList,
        schedulerTriggerList,
        dataSourceManager,
        dataDicManager,
        i18nMessageManager,
        i18nMessageTypeManager,
        fileList,
        defManager,
        FlowUploadProperties,
        Demension,
        customDialogList,
        customQueryList,
        businessObj,
        bpmCommonDefList,
        sysTypeTreeManager,
        sysTypeCatManager,
        customChartManager,
        delegationManager,
        agentManager,
        secretaryManager,
        transferManager,
        prgParamManage,
        JobManagement,
        PostManagement,
        formTemplateList,
        formTable,
        dataTable,
        createView,
        demo,
        indexLayout,
        indexColumn,
        msgTemplateList,
        approvalItemList,
        scriptList,
        userParamManager,
        flowAuthManager,
        conditionScriptList,
        methodListManager,
        InterfaceEventLog,
        MessageSendLog,
        // systemLogConfig,
        //systemLogList,
        layoutDistribution,
        defaultLayout,
        flowChartManager,
        heiOrganization,
        sysPropertiesManager,
        startGenerator,
        generatorLog,
        pwdStrategy,
        matrixManager,
        sysSetting,
        sysExternalUniteList,
        appModelManager,
        flowUploadProperties,
        portalDataSensitiveManager,
        holidayManager,
        shiftRuleManager,
        sysTagManager,
        appCenter,
        watermarkManager,
        sysModuleList,
        groupMange,
        massesGroupMange,
        BusinessLog,
        sysMsg,
        sysDict,
        sysAdstration,
        AdministratorLog,
        AuthorizationLog,
        AuditLog,
        LoginStatistics,
        OnlineUser,
        LoginLogList,
        OperationLogList,
        SysException,
        BusinessException,
        groupManage,
        MessageClassification,
        sysIndex,
        MessageCenter,
        msgTemplate,
        msgConfig,
        LogConfiguration,
        secManage,
        accountLock,
        deviceManager,
        BackupManager,
        ClassificationDictionary,
        DocumentNumber,
        CommonWords,
        Redismonitor,
        serverInformation,
        JVMmonitor,
        Tomcatmonitor,
        HardDisk,
        RequestTracking,
        DataAuth,
        maptest,
        reportDataDesign,
        reportDataDemo,
        reportGraphicDesign,
        reportGraphicDemo,
        reportPrintDesign,
        reportPrintDemo,
        classificationManagement,
        bigScreenManagement,
        mapManagement,
        bigScreenDataSource,
        // ...moduleComponents
    },
    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%;
}
.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>
