<template>
  <el-container class="layout">
    <el-header height="64px">
      <Header></Header>
    </el-header>
    <el-container class="layout-main">
      <el-aside width="200px" v-if="layout === 'side'">
        <MenuBar></MenuBar>
      </el-aside>
      <el-main>
        <keep-alive>
          <!-- 需要缓存的视图组件 -->
          <router-view v-if="$route.meta.keepAlive"> </router-view>
        </keep-alive>
        <!-- 不需要缓存的视图组件 -->
        <router-view v-if="!$route.meta.keepAlive"> </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from "./components/Header.vue";
import MenuBar from "./components/MenuBar.vue";
import { getdeptList } from "@/api/department";
import { mapMutations, mapState } from "vuex";
import local from "@/utils/local";
import { systemName } from "@/config";
export default {
  components: {
    Header,
    MenuBar,
  },
  data() {
    return {
      systemName,
      portalUrl: process.env.VUE_APP_API_portal_URL,
      breads: [],
      subMenus: [],
    };
  },
  created() {
    document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
    this.getdeptList();
  },

  computed: {
    ...mapState(["sysName", "layout"]),
    activeKey() {
      return this.$route.path;
    },
  },
  methods: {
    ...mapMutations(["SET_deptList"]),
    // 获取部门列表
    async getdeptList() {
      let res = await getdeptList({
        siteId: local.getLocal("siteId") ? local.getLocal("siteId") : "",
        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>
.layout {
  width: 100vw;
  height: 100vh;
}
.el-header {
  padding: 0px 20px;
  background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
}
.layout-main {
  height: calc(100vh - 64px);
}
.el-aside {
  background-color: #fff;
}
.el-main {
  overflow: auto;
}
</style>
