<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'"
          >
            <!-- {{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>