<template>
  <transition name="fade" mode="out-in">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </transition>
</template>

<script>
import i18n from "./plugins/i18n";
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["lang"])
  },
  methods: {
    changeLocale(locale) {
      i18n.locale = locale;
      this.$vuetify.lang.current = locale;
    }
  },
  watch: {
    lang: function(newLang, oldLang) {
      if (newLang == "en") {
        this.$vuetify.rtl = false;
        this.$vuetify.lang.current = "en";
      }
      if (newLang == "fa") {
        this.$vuetify.rtl = true;
        this.$vuetify.lang.current = "fa";
      }
      this.changeLocale(newLang);
    }
  }
};
</script>

<style>
#inspire {
  font-family: "Vazir";
}

/* label,span{
  font-family: Vazir;
} */
.v-messages__message {
  font-family: Vazir;
  font-size: 0.5rem;
}

tr.v-data-table__selected {
  background-color: #b2ebf2 !important;
  border-color: #b2ebf2 !important;
}

@import url(views/css/globalcss.css);
</style>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>