<template>
  <div class="d-flex flex-column height-100">
    <v-navigation-drawer
      v-model="showMenu"
      v-if="showMenu"
      :clipped="$vuetify.breakpoint.mdAndUp"
      app
      color="header-background-color darken-3"
      class="white--text pa-4"
    >
      <v-row>
        <v-col cols="12" class="pa-0">
          <v-hover v-slot:default="{ hover }">
            <router-link
              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
              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="{ hover }">
            <router-link
              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
              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="{ hover }">
            <router-link
              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
              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="{ hover }">
            <router-link
              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
              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>
    <Header @action="onAction" />
    <v-content>
      <router-view class="pa-4" />
    </v-content>
     <FooterComponent />
   
  </div>
</template>


<script>
import Header from "@/components/retailer/layout/header/Header";
import FooterComponent from "@/components/retailer/layout/footer/FooterComponent"

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: () => ({
    showMenu: false
  }),
  computed: {
    isDesktop: function() {
      return this.$vuetify.breakpoint.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;
}
</style>
<style lang="scss">
</style>