<template>
  <el-container>
    <el-aside class="siderbar" :style="{ width: '210px' }">
      <div class="logo"></div>
      <el-menu class="nav-menu" v-bind="menuParams">
        <menu-item v-for="menu in menus" :key="menu.name" :menu="menu" :validate="isInMenuList"/>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="head">
        <div class="h-item">&nbsp;</div>
        <user class="h-item-noflex" :messages="[1]" @logout="logout" @resetPassword="resetPassword"></user>
      </el-header>
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ name: 'index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="bread in breads" :key="bread.name">{{ (bread.meta || {}).title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
      <el-footer class="noPadding">
        <xm-footer company="知与行"/>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import { pages, pageArray } from "@/views";

export default {
  name: "default-layout",
  components: {
    xmFooter: () => import("@/components/XMFooter.vue"),
    menuItem: () => import("./MenuItem.vue"),
    user: () => import("./User.vue")
  },
  data() {
    return {
      menus: pages,
      menuArray: pageArray
    };
  },
  computed: {
    menuParams() {
      return {
        backgroundColor: "#24292e",
        textColor: "#eee",
        activeTextColor: "#FFD04B",
        defaultActive: this.$route.name
      };
    },
    breads() {
      const route =
        this.menuArray.filter(x => x.name === this.$route.name)[0] || {};
      const p = (route.parents || []).map(rn => {
        return this.menuArray.filter(x => x.name === rn.name)[0];
      });

      return p.concat(route);
    }
  },
  methods: {
    isInMenuList(menu) {
      return !!this.menuArray.filter(x => x.name === menu.name)[0];
    },
    resetPassword() {
      window.console.log("------resetPassword------");
    },
    logout() {
      this.$store.dispatch("logout").then(() => {
        this.$router.push({
          name: "login",
          query: {
            from: this.$route.name
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.noPadding {
  padding: 0;
}

.head {
  display: flex;
  align-items: center;
  justify-items: end;
  background-color: #fafafa;
  border-bottom: 1px solid #dfdfdf;

  .h-item {
    flex: auto;
  }

  .h-item-noflex {
    flex: none;
  }
}

.breadcrumb {
  margin: 12px 20px;
}

.logo {
}

.siderbar {
  border-right: solid 1px #e6e6e6;

  color: #eee;
  background-color: #24292e;

  .nav-menu {
    border: none;
  }
}

.main {
  /*160 = header + footer + margin */
  min-height: calc(100vh - 160px);
  position: relative;
  overflow: hidden;
  margin: 0 20px;
  padding: 0;

  & > * {
    background-color: #fff;
    padding: 20px;
  }
}
</style>
