<template>
  <div class="home admin-home">
    <view-header class="home-header" :show-reset-pwd="false">
      <div class="home-navs" slot="navSub">
        <ul>
          <li
            :class="{ act: curNav.name === nav.name }"
            v-for="(nav, index) in navs"
            :key="index"
            @click="switchNav(nav)"
          >
            <i
              :class="[
                'icon',
                curNav.name === nav.name ? `${nav.icon}-act` : nav.icon
              ]"
              v-if="nav.icon"
            ></i>
            <span class="nav-item-cont">{{ nav.title }}</span>
          </li>
        </ul>
      </div>
    </view-header>

    <div class="home-body">
      <div class="home-main">
        <router-view />

        <view-footer></view-footer>
      </div>
    </div>
  </div>
</template>

<script>
import { main } from "@/constants/authority";
import menuMixins from "@/components/homeMenuMixins";

export default {
  name: "admin-home",
  mixins: [menuMixins],
  data() {
    return {
      navs: main,
      curNav: {}
    };
  },
  watch: {
    $route: {
      handler(val) {
        this.actMainNav();
      }
    }
  },
  mounted() {
    this.actMainNav();
  },
  methods: {
    actMainNav() {
      const router = this.$route.matched.filter(
        item => item.name !== "Main"
      )[0];
      this.actCurNav(router);
    }
  }
};
</script>
