<template>
  <div class="eshop-bottom-menu-wrapper">
    <div class="eshop-bottom-menu">
      <b-navbar toggleable="md">
        <b-navbar-nav class="mr-auto">
          <!-- left alligned menu items -->
          <b-nav-item
            v-for="(route, index) in bottomMenuList"
            :href="route.path"
            target="_blank"
            :key="`right-${index}`"
          >
            {{ route.name }}
          </b-nav-item>
        </b-navbar-nav>
      </b-navbar>
    </div>
  </div>
</template>
<script>
import { mapMasterDataId } from '@/app/_global/mixins'
import { mapActions, mapGetters } from 'vuex'

const MenuHeader = {
  name: 'menu-footer',
  data() {
    return {}
  },
  mounted() {
    this.resolveMasters.then(() => {
      this.loadEformActLink([this.privacyId, this.membersRNRId])
    })
  },
  methods: {
    ...mapActions(['loadEformActLink']),
  },
  computed: {
    ...mapGetters(['getEformLinkDataByKeyId']),
    ...mapMasterDataId({
      SMART_LIBRARY_EFORM_FILE_TYPE: {
        privacyId: 'PRIVACY',
        membersRNRId: 'MEMBERSRNR',
      },
    }),
    bottomMenuList() {
      return [
        {
          name: this.$t('Eshop.BottomMenu.Privacy'),
          path: this.getEformLinkDataByKeyId(this.privacyId).link,
        },
        {
          name: this.$t('Eshop.BottomMenu.MembersRnR'),
          path: this.getEformLinkDataByKeyId(this.membersRNRId).link,
        },
      ]
    },
  },
}

export default MenuHeader
</script>
