<template>
  <div class="material-management">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in aliasPath"
        :key="index"
        :name="item.alias"
        :label="item.name"
      >
        <component :is="item.alias" ref="child"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import classificationExperts from './component/classificationExperts'
import expertPool from './component/expertPool'
export default {
  components: {
    classificationExperts,
    expertPool
  },
  data() {
    return {
      aliasPath: [],
      activeName: 'classificationExperts'
    }
  },
  mounted() {},
  created() {
    if (this.$route.params.tabsActiveName) {
      this.activeName = this.$route.params.tabsActiveName
    }
    this.getMenus()
  },
  methods: {
    handleClick() {
      this.$nextTick(() => {
        if (this.activeName === 'qualificationType') {
          this.$refs.child[0].calcTableHeight()
        } else if (this.activeName === 'libraryQualifications') {
          this.$refs.child[1].calcTableHeight()
        }
      })
    },
    getMenus() {
      this.menuAll = []
      this.$store.dispatch('menu/actionFrontMenus').then(data => {
        let fullPath = this.$route.path
        let path = fullPath.split('/')
        let urlAnchor = path[path.indexOf('platLayout') + 1]
        let aliasPath = []
        this.filterRootParant(data, urlAnchor, aliasPath)
        this.aliasPath = aliasPath[2]
      })
    },
    // 找到对应的根父级菜单
    filterRootParant(data, urlAnchor, result) {
      for (let item of data) {
        if (item.alias === urlAnchor) {
          // 如何找到了则说明这里是最后一级可以返回了，将查找到的目标数据加入结果数组中
          // 可根据需求unshift(item.id)或unshift(item)
          result.unshift(item.children)
          return true
        } else if (item.children && item.children.length > 0) {
          // 否则继续在子节点中查找
          let isFind = this.filterRootParant(item.children, urlAnchor, result)
          // 如果在当前节点的子字节点中找到了则将当前节点加入到结果数组中
          if (isFind) {
            result.unshift(item.children)
            return true
          }
        }
      }
      // 没找到目标
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.material-management {
  width: 100%;
  height: 100%;
}
/deep/.el-tabs {
  height: 100%;
}
/deep/.el-tabs__content {
  height: 100%;
}
/deep/.el-tab-pane {
  height: 100%;
}
</style>
