<template>
  <div v-if="rootState.bottomTabSelectedOption">
    <business-financing
      v-if="rootState.bottomTabSelectedOption === 'financing'"
      @close="closeBottonTab"
    ></business-financing>
    <business-trade
      v-if="rootState.bottomTabSelectedOption === 'trade'"
      @close="closeBottonTab"
    >
    </business-trade>
    <business-map
      v-if="rootState.bottomTabSelectedOption === 'map'"
      @close="closeBottonTab"
    ></business-map>
    <business-hours
      v-if="rootState.bottomTabSelectedOption === 'hours'"
      @close="closeBottonTab"
    ></business-hours>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { ROOT_SELECT, ROOT_ACTION_SELECT_BOTTOM_TAB } from '../constants';
import BusinessFinancing from './BusinessFinancing.vue';
import BusinessTrade from './BusinessTrade.vue';
import BusinessMap from './BusinessMap.vue';
import BusinessHours from './BusinessHours.vue';
export default {
  components: {
    BusinessFinancing,
    BusinessTrade,
    BusinessMap,
    BusinessHours,
  },
  computed: {
    ...mapGetters('root', {
      rootState: ROOT_SELECT,
    }),
  },
  methods: {
    closeBottonTab() {
      this.selectBottomTab(null);
    },
    ...mapActions('root', {
      selectBottomTab: ROOT_ACTION_SELECT_BOTTOM_TAB,
    }),
  },
};
</script>