<template>
  <v-footer
    color="#c0d7d6"
    height="40px"
    app
    elevation="24"
    class="d-flex justify-center align-center text-center red--text"
  >
  <v-card-text>
    
  </v-card-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>
    <h5>©2005-{{ new Date().getFullYear() }} MARCO PACS</h5>
  </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;
}
</style>

</style>