<template>
  <v-footer elevation="24" app class="d-flex" color="teal lighten-3">
    <v-row justify="center" align="center" class="text-center red--text">
      <v-menu transition="slide-x-transition">
        <template v-slot:activator="{ on }">
          <v-btn
            class="changeLangBtn"
            color="red"
            dark
            v-on="on"
            depressed
            text
          >{{$t('AppFooter.appLang')}}</v-btn>
        </template>
        <v-list>
          <v-list-item v-for="lng in langList" :key="lng.name" @click="setLang(lng.alias)">
            <v-list-item-title>{{lng.name}}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <strong>{{ new Date().getFullYear() }}</strong>
      <v-img src="img/0.png" contain max-height="60" max-width="60"></v-img>
    </v-row>
  </v-footer>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "app-footer",
  data() {
    return {
      langList: [
        { name: "فارسی", alias: "fa" },
        { name: "English", alias: "en" }
      ]
    };
  },
  methods: {
    ...mapActions(["setLang"])
  }
};
</script>

<style scoped>
.changeLangBtn {
  position: absolute;
  left: 0;
  top: 19px;
}
</style>>

</style>