<template>
  <div class="layouts flex flexc aic">
    <Header></Header>
    <!-- <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><a :href="portalUrl + '/#/home/dataManagement/dataAdmin'"
            >政务一体化平台</a
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a :href="portalUrl + '/#/home/siteArrange'"
            >站点编排</a
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-for="bread in breads"
          :key="bread.title"
          :to="bread.to"
          >{{ bread.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div> -->
    <div class="main flex1 flex flexc">
      <!-- <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="['mr5', 'primary', v.meta.icon]"></i>
            <span class="tab-label">{{ v.meta.title }}</span>
          </template>
        </el-tab-pane>
      </el-tabs> -->
      <div class="out-box flex1">
        <keep-alive>
          <!-- 需要缓存的视图组件 -->
          <router-view v-if="$route.meta.keepAlive"> </router-view>
        </keep-alive>
        <!-- 不需要缓存的视图组件 -->
        <router-view v-if="!$route.meta.keepAlive"> </router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import { getdeptList } from "@/api/department";
import { mapMutations, mapState } from "vuex";
import local from "@/utils/local";
import { findBottomSubarrays } from "@/utils";
export default {
  components: {
    Header,
  },
  data() {
    return {
      systemName: process.env.VUE_APP_sysName,
      portalUrl: process.env.VUE_APP_API_portal_URL,
      breads: [],
      subMenus: [],
    };
  },
  created() {
    // this.getSubMenus();
    document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
    // this.calcBreads();
    this.getdeptList();
  },
  // watch: {
  //   "$route.path"() {
  //     this.calcBreads();
  //   },
  // },
  computed: {
    ...mapState(["sysName"]),
    activeKey() {
      return this.$route.path;
    },
  },
  methods: {
    ...mapMutations(["SET_deptList"]),
    // 计算面包屑
    calcBreads() {
      let temp = [{ to: "/basicsset", title: "数字样表系统" }];
      //  过滤出路由数据
      let r = this.$route.matched
        .filter((v) => v.meta.title)
        .map((v) => {
          return { to: v.path, title: v.meta.title };
        });
      // 赋值给面包屑渲染
      this.breads = [...temp, ...r];
    },

    // 获取当前顶层路由下的所有子路由
    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
      );
    },

    // 获取部门列表
    async getdeptList() {
      let res = await getdeptList({
        siteId: local.getLocal("sampleSiteId")
          ? local.getLocal("sampleSiteId")
          : "",
        page: 1,
        size: -1,
      });
      let { code, data } = res.data;
      if (code === 1) {
        this.SET_deptList(data.data);
      }
    },

    changeRouter(e) {
      this.$router.push(e.name);
    },
  },
};
</script>

<style lang="less" scoped>
.layouts {
  width: 100%;
  // min-width: 1620px;
  height: 100%;
  padding-bottom: 15px;
  // .crumbs {
  //   margin: 10px 0px;
  //   width: 98%;
  // }

  .main {
    width: 98%;
    margin-top: 15px;
    // padding-bottom: 15px;
    border-radius: 4px;
    overflow-y: auto;
    // background-color: #fff;
  }
  .out-box {
    // padding: 15px;
    overflow-y: auto;
  }
}
</style>