<template>
  <div>
    <tabs-template :links="getTabs" class="my-account" :menu-title="$t(tabTitle)">
      <div class="rounded-0 px-3">
        <b-row>
          <b-col sm="12">
            <b-card no-body>
              <slot></slot>
            </b-card>
          </b-col>
        </b-row>
      </div>
    </tabs-template>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import TabsTemplate from '@/app/_global/components/templates/TabsTemplate'

export default {
  name: 'OrderHistory',
  components: {
    TabsTemplate,
  },
  props: {
    tabsRenderingOnly: { type: Boolean, default: false },
  },
  data() {
    return {
      links: [
        { url: { name: 'OrderHistoryEshopHomePaginated', params: { page: 1 } }, title: this.$t('Common.Eshop') },
        { url: { name: 'OrderHistoryEkSmartHomePaginated', params: { page: 1 } }, title: this.$t('Common.EKSmart') },
        {
          url: { name: 'OrderHistoryBonusAdjustmentPaginated', params: { page: 1 } },
          title: this.$t('OrderHistory.AdjustmentHistory'),
          show: this.$security.policy.can('bonus-manual-adjustment', 'view'),
        },
      ],
    }
  },
  mounted() {
    if (!this.tabsRenderingOnly) {
      this.loadMasterDataKeys([this.$const.masterKey.PAYMENT_MODE])
      this.fetchCountryList()
      this.loadStates()
      this.loadMyAccountInfo()
    }
  },
  methods: {
    ...mapActions(['fetchCountryList', 'loadStates', 'loadMyAccountInfo', 'loadMasterDataKeys']),
  },
  computed: {
    tabTitle() {
      let title = this.$store.state.route.meta.tabDisplayName
      if (typeof title !== 'undefined') {
        return title
      } else {
        return 'Menu'
      }
    },
    getTabs() {
      return this.links.filter(link => link.show !== false)
    },
  },
}
</script>
