<template>
  <div class="page-route-tab">
    <div class="page-route-tab-content">
      <el-tabs v-model="routerPath" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item,index) in tabArr"
          :key="index"
          :label="item.name"
          :name="item.routerPath"
        >
          <div slot="label" class="label">
            <svgIcon
              v-if="item.menuIcon"
              :icon-class="item.menuIcon"
              icon-style="icon header-icon"
            />
            <span>{{ item.name }}</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import PubSub from 'pubsub-js'

export default {
  name: 'PageRouteTab',
  data() {
    return {
      routerPath: '',
      tabArr: []
    }
  },
  created() {
    this.getTabArr()
  },
  mounted() {
    this.$nextTick(_ => PubSub.publish('disable-third-level', true))
  },
  computed: {
    ...mapState({
      // 重构菜单信息
      businessMenu: state => {
        return state.menu.frontMenus.find(i => i.alias === 'normal')?.children || []
      }
    })
  },
  methods: {
    tabClick() {
      this.$nextTick(_ => this.$router.push(this.routerPath))
    },

    // 获取tab数据
    getTabArr() {
      this.routerPath = this.$route.path
      this.tabArr = this.findParentChildrenByPath(this.businessMenu, this.routerPath)
    },

    // 在菜单目录中寻找当前路由匹配节点的父级children项
    findParentChildrenByPath(treeData, path) {
      let result = null

      function traverse(nodes) {
        for (const node of nodes) {
          if (node.children && node.children.length > 0) {
            // 如果当前节点的子节点中存在匹配的节点，保存结果并终止遍历
            if (node.children.some(child => child.routerPath === path)) {
              result = node.children
              return true // 找到匹配项，终止遍历
            }
            // 在子节点中继续递归搜索
            if (traverse(node.children)) {
              return true // 子树中找到匹配项，提前返回
            }
          }
        }
        return false // 当前分支未找到匹配项，继续遍历
      }

      traverse(treeData)
      return result
    }

  },
  beforeDestroy() {
    PubSub.publish('disable-third-level', false)
  }
}
</script>

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

.page-route-tab {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 0;

  .page-route-tab-content {
    width: 100%;
    min-height: 68px;
    padding: 4px 20px 10px 16px;
    background-color: $--system-module-color1;
    border-radius: 8px;
    box-sizing: border-box;

    ::v-deep .el-tabs {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .el-tabs__header {
        margin: 0;

        .el-tabs__item {
          height: 45px;
          line-height: 45px;

          &.is-active {
            .label {
              span, svg {
                font-weight: 600;
              }
            }
          }

          .label {
            user-select: none;
            display: flex;
            align-items: center;
            column-gap: 6px;
            padding-right: 5px;

            span, svg {
              transition: all 0.2s;
            }

            svg {
              position: relative;
              top: -1px;
              font-size: 18px;
            }

            span {
              font-size: 14px;
            }
          }
        }
      }

      .el-tabs__content {
        display: none;
      }
    }
  }
}
</style>
