<template>
  <div class="flex h-full w-full gap-5">
    <div
      class="area-tree-box flex h-full w-[20%] flex-col rounded-[4px] bg-white"
    >
      <TabHeader icon="el-icon-notebook-2" label="组织架构"></TabHeader>
      <div class="w-full flex-1 overflow-auto p-[20px]">
        <AreaTree @change="changeSite"></AreaTree>
      </div>
    </div>
    <div class="flex h-full flex-1 flex-col bg-white">
      <el-tabs :value="activeKey" @tab-click="changeRouter">
        <el-tab-pane v-for="v in subMenus" :key="v.path" :name="v.path">
          <template slot="label">
            <i
              v-if="v.meta.icon"
              :class="['mr-[5px]', 'primary', v.meta.icon]"
            ></i>
            <span class="tab-label">{{ v.meta.title }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="out-box flex-1 p-[20px]">
        <router-view ref="Page" :curTreeData="curTreeData"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { findBottomSubarrays } from "@/utils";
export default {
  data() {
    return {
      subMenus: [],
      curTreeData: {}, // 当前选择的站点
    };
  },
  computed: {
    activeKey() {
      return this.$route.path;
    },
  },
  created() {
    this.getSubMenus();
  },
  methods: {
    changeRouter(e) {
      this.$router.push(e.name);
    },
    // 获取当前顶层路由下的所有子路由
    getSubMenus() {
      let path = this.$route?.meta.activeMenu
        ? this.$route.meta.activeMenu
        : this.$route.path;
      let options = this.$router.options.routes[0].children;
      let curRouters = options.filter((v) => v.path == path);
      this.subMenus = findBottomSubarrays(curRouters).filter(
        (v) => !v.meta.hidden
      );
    },
    // 改变站点选择
    changeSite(data) {
      this.curTreeData = data;
      // this.$refs.Page.getSite(data);
    },
  },
};
</script>

<style lang="less" scoped></style>
