<template>
  <div class="home">
    <div class="home-header">
      <div class="head-logo" :class="{ 'head-logo-tiny': isCollapsed }">
        <!-- big logo 160*40 -->
        <h1 v-if="!isCollapsed">LOGO</h1>
        <!-- small logo 40*40 -->
        <h1 v-else>A</h1>
      </div>
      <div class="head-switch" @click="collapsedSider">
        <Icon :class="rotateIcon" type="md-menu" size="24"></Icon>
      </div>
      <div class="head-info">
        <Breadcrumb>
          <BreadcrumbItem>
            <Icon type="md-home" :size="16" style="margin-top: -4px;"></Icon>
          </BreadcrumbItem>
          <BreadcrumbItem v-for="(bread, index) in breadcrumbs" :key="index">{{
            bread
          }}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="head-user">
        <Avatar icon="md-person" />
        <span class="user-name">{{ username }}</span>
        <span class="user-logout" @click="logout">
          <Icon type="md-power" size="20"></Icon>
        </span>
      </div>
    </div>

    <div class="home-navs" :class="{ 'home-navs-tiny': isCollapsed }">
      <ul>
        <li class="nav-item" v-for="(nav, index) in navs" :key="index">
          <div
            :class="[
              'nav-item-main',
              { 'nav-item-main-act': curMain === index }
            ]"
            @click="switchNav(nav, index)"
          >
            <span class="nav-item-icon nav-item-icon-left">
              <Icon :type="nav.icon"></Icon>
            </span>
            <p class="nav-item-cont">{{ nav.title }}</p>
            <span
              class="nav-item-icon nav-item-icon-right"
              v-if="nav.children && nav.children.length"
            >
              <Icon
                :type="nav.showList ? 'ios-arrow-down' : 'ios-arrow-forward'"
              ></Icon>
            </span>
          </div>
          <ul
            class="nav-item-sublist"
            :class="{ 'nav-sublist-hide': !nav.showList }"
            v-if="nav.children && nav.children.length"
            :style="{ height: nav.children.length * 40 + 'px' }"
          >
            <li
              v-for="(subnav, sindex) in nav.children"
              :key="sindex"
              :class="[
                'nav-item-sub',
                { 'nav-item-sub-act': curSub === index + '-' + sindex }
              ]"
              @click="toPage(index, sindex)"
            >
              {{ subnav.title }}
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="home-body" :class="{ 'home-body-big': isCollapsed }">
      <div class="home-main">
        <router-view />

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

<script>
import navs from "@/constants/navs";

export default {
  name: "home",
  data() {
    return {
      isCollapsed: false,
      navs,
      curMain: 0,
      curSub: "",
      avatar: "",
      breadcrumbs: []
    };
  },
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    username() {
      return this.$store.state.user.realName;
    }
  },
  watch: {
    $route() {
      this.actCurNav();
    }
  },
  mounted() {
    this.actCurNav();
    // TODO:获取用户角色信息，动态注册路由，然后跳转路由
  },
  methods: {
    collapsedSider() {
      this.isCollapsed = !this.isCollapsed;
    },
    switchNav(item, mainIndex) {
      if (item.children) {
        item.showList = !item.showList;
      } else {
        this.breadcrumbs = [item.title];
        this.curMain = mainIndex;
        this.curSub = "";
        this.$router.push({ name: item.router });
      }
    },
    actCurNav() {
      let router = this.$route.name;
      this.navs.forEach((item, index) => {
        if (item.children && item.children.length) {
          item.children.forEach((elem, pindex) => {
            if (elem.router === router) {
              this.curSub = index + "-" + pindex;
              this.curMain = index;
              this.breadcrumbs = [item.title, elem.title];
            }
          });
        } else {
          if (item.router === router) {
            this.curMain = index;
            this.breadcrumbs = [item.title];
          }
        }
      });
      this.navs[this.curMain].showList = true;
    },
    toPage(mainIndex, subIndex) {
      let item = this.navs[mainIndex];
      this.breadcrumbs = [item.title, item.children[subIndex].title];
      this.curMain = mainIndex;
      this.curSub = mainIndex + "-" + subIndex;

      this.$router.push({
        name: this.navs[mainIndex].children[subIndex].router
      });
    },
    logout() {
      this.$ls.clear();
      this.$router.push({ name: "Login" });
    }
  }
};
</script>
