<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'

//基础信息 --> 计划电量配置
const PlanElectricConfig = () => import('@/views/Basic/PlanElectricConfig.vue')
//基础信息 --> 故障代码维护
const Maintain = () => import('@/views/Basic/Maintain.vue')
//基础信息 --> 指令管理
const OrderAdmin = () => import('@/views/Basic/OrderAdmin.vue')
//基础信息 --> 采集参数配置 -->redis参数配置
const CompParamConfig = () =>
  import('@/views/Basic/CollectionParamConfig/CompParamConfig.vue')
//基础信息 --> 采集参数配置 -->常规参数配置
const BasicParamConfig = () =>
  import('@/views/Basic/CollectionParamConfig/BasicParamConfig.vue')
//基础信息 --> 点位信息
const PointerInfo = () => import('@/views/Basic/PointerInfo.vue')
//基础信息 --> 机组信息
const CrewInfo = () => import('@/views/Basic/CrewInfo.vue')
//基础信息 --> 风场线路
const WindFarmLine = () => import('@/views/Basic/WindFarmLine.vue')
//基础信息 --> 风场信息 --> 风场信息
const WindFieldInfo = () =>
  import('@/views/Basic/WindFieldInfo/WindFieldInfo.vue')
//基础信息 --> 风场信息 --> 扩展参数
const WindFieldExtend = () =>
  import('@/views/Basic/WindFieldInfo/WindFieldExtend.vue')
//基础信息 --> 扩展参数定义
const DefineExtendParmas = () => import('@/views/Basic/DefineExtendParmas.vue')
//基础信息 --> 业务系统管理
const BizSysManage = () => import('@/views/Basic/BizSysManage.vue')
///基础信息 --> 执行管理
const ExecutionManage = () => import('@/views/Basic/ExecutionManage.vue')
//元件管理
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
    PlanElectricConfig,
    Maintain,
    OrderAdmin,
    CompParamConfig,
    BasicParamConfig,
    PointerInfo,
    CrewInfo,
    WindFarmLine,
    WindFieldInfo,
    WindFieldExtend,
    DefineExtendParmas,
    BizSysManage,
    ExecutionManage
  },
  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>
