<template>
  <div class="d-flex flex-column height-100">   
      
    <Header @action="onAction" />
  
    <v-navigation-drawer
      v-model="showMenu"
      v-if="showMenu"
      :clipped="$vuetify.display.mdAndUp"
      color="header-bg-color darken-3"
      class="header-bg-color text-white pa-4 mt-6"
    >
      <v-row>
        <v-col cols="12" class="pa-0">
          <v-hover v-slot:default="{ isHovering, props }">
            <router-link
            v-bind="props"
              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
              class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
              :to="{name:'AccountDashboard'}"
            >Account Dashboard</router-link>
          </v-hover>
       
          <v-hover v-slot:default="{ isHovering, props }">
            <router-link
            v-bind="props"
              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
              class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
              :to="basicInfo.addresses&&basicInfo.addresses.length?{name:'AddressBook'}:{name:'EditAddressBook' ,params:{addressId:'new'}}"
            >Address Book</router-link>
          </v-hover>
          <v-hover v-slot:default="{ isHovering, props }">
            <router-link
            v-bind="props"
              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
              class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
              :to="{name:'EditAccountInfo',params:{value:'false'}}"
            >Account Information</router-link>
          </v-hover>       
           <v-hover v-slot:default="{ isHovering, props }">
            <router-link
            v-bind="props"
              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
              class="d-block text-decoration-none h4 pa-2 px-6 my-1"
              to
              @click.native="goToLogout()"
            >Logout</router-link>
          </v-hover>
        </v-col>
      </v-row>
    </v-navigation-drawer>
    
    <v-content class="mt-10" :class="showMenu ? 'sidebar-router-padding-open' : 'sidebar-router-padding-close'">
      <router-view class="pa-4 mt-10" :class="showMenu ? 'sidebar-router-padding-open' : 'sidebar-router-padding-close'"/>
    </v-content>
     <FooterComponent />
   
  </div>
</template>


<script>
import Header from "@/components/retailer/layout/header/Header.vue";
import FooterComponent from "@/components/retailer/layout/footer/FooterComponent.vue"
import craneLogoWhite from "@/assets/Crane_Logo_white.png";

import { createHelpers } from "vuex-map-fields";

const { mapFields } = createHelpers({
  getterType: "layout/getField",
  mutationType: "layout/updateField"
});

export default {
  name: "Layout",

  components: {
    Header,
    FooterComponent
  },

  props: {
    source: String
  },
  data: () => ({
    craneLogoWhite:craneLogoWhite,
    showMenu: false
  }),
  computed: {
    isDesktop: function() {
      return this.$vuetify.display.xsOnly ? true : false;
    },
    basicInfo: function() {
      return this.$store.state.accountOne.one;
    },
    orderProductsList() {
      return this.$store.state.meProductList.orderProductsList;
    },
    ...mapFields(["user", "user.userVisits"])
  },
  methods: {
     goToLogout() {
      localStorage.removeItem("cr_checkOutTab");
      window.open("/logout-success", "_self");
    },
    onScroll() {
      this.offsetTop = window.pageYOffset || document.documentElement.scrollTop;
    },
    onAction() {
      this.showMenu = !this.showMenu;
    },
    OnResize() {}
  },
  created() {
  this.$store.dispatch("userCartProduct/cartProductList");
   this.$store.dispatch("headerCategoryList/fetchCategoryList");
   this.$store.dispatch("layout/fetchCmsBlock");
    this.$store.dispatch("layout/fetchPageContent");
  }
};
</script>
<style>
.router-link-active.my-account-link {
  color: #2850da !important;
  caret-color: #2850da !important;
  background-color: #fff !important;
  border-color: #fff !important;
}
.header-bg-color{
    background-color: #2c50da!important;
    box-shadow: none !important;
}
.sidebar-router-padding-open {
  /* margin:0 130px 16px 132px;    */
  padding: 0 0 0 250px;
}
.sidebar-router-padding-close {
  margin:0 16px 16px 16px;  
}

</style>
<style lang="scss">

</style>