<template>
  <v-navigation-drawer
    id="appDrawer"
    :mini-variant.sync="mini"
    fixed
    :dark="$vuetify.dark"
    app
    v-model="drawer"
    hide-overlay
    width="260"
  >
    <img
      v-bind:src="computeLogo"
      height="40"
      width="130"
      class="imgLogo mb-3 mt-3"
      alt="logo"
      style="margin: auto;
      display: block;"
    />
    <!-- <v-toolbar class="white" flat>
    <img
      v-bind:src="computeLogo"
      height="40"
      width="140"
      class="imgLogo"
      alt="logo"
      style="15px 0px 0px 40px !important;"
    />
    </v-toolbar>-->
    <vue-perfect-scrollbar
      class="drawer-menu--scroll side-bar-color mt-3"
      :settings="scrollSettings"
    >
      <v-list dense expand class="white--text">
        <template v-for="(item, i) in menus" v-if="role === 'ADMIN'">
          <!-- {{menus}} -->
          <!--group with subitems-->
          <v-list-group
            v-if="item.items"
            :key="item.name"
            :group="item.group"
            no-action="no-action"
          >
            <v-list-tile slot="activator" ripple="ripple">
              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <template v-for="(subItem, i) in item.items">
              <!--sub group-->
              <v-list-group
                v-if="subItem.items"
                :key="subItem.name"
                :group="subItem.group"
                sub-group="sub-group"
              >
                <v-list-tile slot="activator" ripple="ripple">
                  <v-list-tile-content>
                    <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
                <v-list-tile
                  v-for="(grand, i) in subItem.children"
                  :key="i"
                  :to="genChildTarget(item, grand)"
                  :href="grand.href"
                  ripple="ripple"
                >
                  <v-list-tile-content>
                    <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list-group>
              <!--child item-->
              <v-list-tile
                v-else
                :key="i"
                :to="genChildTarget(item, subItem)"
                :href="subItem.href"
                :disabled="subItem.disabled"
                :target="subItem.target"
                ripple="ripple"
              >
                <v-list-tile-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <span>{{ subItem.title }}</span>
                  </v-list-tile-title>
                </v-list-tile-content>
                <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
              </v-list-tile>
            </template>
          </v-list-group>
          <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
          <v-divider v-else-if="item.divider" :key="i"></v-divider>
          <!--top-level link-->
          <v-list-tile
            v-else
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
            <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
            <v-list-tile-action v-if="item.subAction">
              <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </v-list-tile-action>
            <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
            <!-- </a> -->
          </v-list-tile>
        </template>
        <template
          v-for="(item, i) in menuSchool"
          v-if="schoolRole === 'SUPERADMIN' || $route.name === 'School' || $route.name === 'Dashboard'"
        >
          <!-- {{menus}} -->
          <!--group with subitems-->
          <v-list-group
            v-if="item.items"
            :key="item.name"
            :group="item.group"
            no-action="no-action"
          >
            <v-list-tile slot="activator" ripple="ripple">
              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <template v-for="(subItem, i) in item.items">
              <!--sub group-->
              <v-list-group
                v-if="subItem.items"
                :key="subItem.name"
                :group="subItem.group"
                sub-group="sub-group"
              >
                <v-list-tile slot="activator" ripple="ripple">
                  <v-list-tile-content>
                    <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
                <v-list-tile
                  v-for="(grand, i) in subItem.children"
                  :key="i"
                  :to="genChildTarget(item, grand)"
                  :href="grand.href"
                  ripple="ripple"
                >
                  <v-list-tile-content>
                    <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list-group>
              <!--child item-->
              <v-list-tile
                v-else
                :key="i"
                :to="genChildTarget(item, subItem)"
                :href="subItem.href"
                :disabled="subItem.disabled"
                :target="subItem.target"
                ripple="ripple"
              >
                <v-list-tile-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <span>{{ subItem.title }}</span>
                  </v-list-tile-title>
                </v-list-tile-content>
                <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
              </v-list-tile>
            </template>
          </v-list-group>
          <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
          <v-divider v-else-if="item.divider" :key="i"></v-divider>
          <!--top-level link-->
          <v-list-tile
            v-else
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
            <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
            <v-list-tile-action v-if="item.subAction">
              <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </v-list-tile-action>
            <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
            <!-- </a> -->
          </v-list-tile>
        </template>
      </v-list>
    </vue-perfect-scrollbar>
  </v-navigation-drawer>
</template>
<script>
import menu from "@/api/menu";
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  name: "app-drawer",
  components: {
    VuePerfectScrollbar
  },
  props: {
    expanded: {
      type: Boolean,
      default: true
    }
  },
  data: () => ({
    mini: false,
    drawer: true,
    menus: [],
    menuSchool: [],
    schoolRole: "",
    role: "",
    scrollSettings: {
      maxScrollbarLength: 160
    }
  }),
  computed: {
    computeGroupActive() {
      return true;
    },
    computeLogo() {
      return "/static/icon.png";
    },

    sideToolbarColor() {
      return this.$vuetify.options.extra.sideNav;
    }
  },
  created() {
    this.schoolRole = this.$store.state.schoolRole;
    this.role = this.$store.state.role;
    this.menus = menu.adminMenu;
    this.menuSchool = menu.schoolMenu;
    // console.log("this.$route.name", this.$route.name);
    // if (this.$route.name === "School") {
    //   localStorage.setItem("SchoolName", this.$route.name);
    // }
    // if (this.$route.name === "Dashboard") {
    //   localStorage.setItem("AdminName", this.$route.name);
    // }
    // console.log("SN", localStorage.getItem("SchoolName"));
    // if (localStorage.getItem("SchoolName") === "School") {
    // if (this.$store.state.schoolRole === "SUPERADMIN") {
    //   console.log("rolA", this.$store.state.schoolRole);
    // if (this.$store.state.schoolRole === "SUPERADMIN") {
    // }
    //   console.log("this.menus", this.menus);
    // }
    // // }
    // // console.log("AN", localStorage.getItem("AdminName"));
    // // if (localStorage.getItem("AdminName") === "Dashboard") {
    // if (this.$store.state.role === "ADMIN") {
    //   console.log("role", this.$store.state.role);
    // else if (this.$store.state.role === "ADMIN") {
    // }
    //   // }
    // }

    // else if (this.$store.state.role === "LIBRARIAN") {
    //   this.menus = menu.libraryMenu;
    // } else if (this.$store.state.role === "ACCOUNTANT") {
    //   this.menus = menu.accountMenu;
    // }
    window.getApp.$on("APP_DRAWER_TOGGLED", () => {
      this.drawer = !this.drawer;
    });
  },
  methods: {
    genChildTarget(item, subItem) {
      if (subItem.href) return;
      if (subItem.component) {
        return {
          name: subItem.component
        };
      }
      return { name: `${item.group}/${subItem.name}` };
    }
  }
};
</script>


<style lang="stylus">
// @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
#appDrawer {
  overflow: hidden;

  .drawer-menu--scroll {
    height: calc(100vh - 48px);
    overflow: auto;
  }
}

.v-list__group__items--no-action .v-list__tile {
  padding-left: 72px !important;
}

.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
  height: 54px;
  font-size: 17px;
}

.v-list__tile__action {
  min-width: 36px;
}

// .theme--light .v-icon, .application .theme--light.v-icon {
// color: #f1f1f1;
// }
.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
  width: 8px !important;
}

.ps>.ps__scrollbar-y-rail {
  width: 0px !important;
}

.ps:hover > .ps__scrollbar-y-rail:hover {
  background-color: #5f2171 !important;
  opacity: 0.9;
}

.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
  width: 8px !important;
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
}

.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
  // background-color: #5f2171 !important;
  width: 8px !important;
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
}

.v-list__tile--active {
  color: #71d9ea !important;
}

.my-1 {
  text-align: left  !important;
}

.title {
  line-height: 2 !important;
}

// .v-list__tile--hover {
// color: white !important;
// background: red !important;
// }
.v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after {
  background: #7f62f8 !important;
  color: #71d9ea !important;
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important;
  // border-radius: 12px !important;
}

@media screen and (max-width: 420px) {
  .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
    font-size: 14px;
  }

  .imgLogo {
    height: 32px;
    width: 120px;
  }
}
</style>


<style scoped>
.theme--light .v-icon,
.application .theme--light.v-icon {
  color: #39b982;
}
.side-bar-color {
  background: #827bfa !important;
  border-top-right-radius: 74px !important;
}
/* a {
  text-decoration: none;
  display: inherit;
  color: black;
} */
.hover:hover {
  color: red !important;
  background: red !important;
}
/* a:active {
  color: red !important;
} */
/* a:visited {
  border-left: 4px solid black;
  border-radius: 4px;
} */
/* visited link */
/* a:visited {
  color: black !important;
  border-left: 4px solid black;
  border-radius: 4px;
}
a:active {
  color: black !important;
  border-left: 4px solid black;
  border-radius: 4px;
}  */
</style>


