<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 ::v-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>
