<template>

  <div class="main">

<div> {{ CurrentKag.name || '' }}</div>

       <div class="menu">

         <my-button  :class="{Active: menu.component=='History'} " @click="menu.component='History'" >Акты</my-button>
         <my-button  :class="{Active: menu.component=='Collect'} " @click="menu.component='Collect'" >Сборка</my-button>
         <my-button  :class="{Active: menu.component=='downloads'} " @click="menu.component='downloads'" >Загрузка</my-button>


       </div>


      <component v-if="kag" :is="menu.component"></component>


  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import Collect from "./Collect.vue";
import downloads from "./downloads.vue";
import History from "./History.vue";
export default {
  name: 'MainMenu',
  components: {Collect,downloads,History},

  data() {
    return {
      menu:{
        component:'History',
      } ,




    }
  },

  props:{
    id:String,

  },



  computed:{

    ...mapState({

      data: state => state.ApiClass.data,
      karArr: state => state.ApiClass.kagArr,
      kag: state => state.ApiClass.kag,
    }),

    CurrentKag(){
      return this.karArr.find(item=>item.firma==this.id);

    }



  },

  methods:{

    ...mapMutations({
      kagSet:'ApiClass/kagSet',


    }),



  },



mounted(){

  this.kagSet(this.CurrentKag);//устанавливаем глобально выбранный kag

},
created(){
  this.kagSet(null);

},
watch:{


  }

}
</script>

<style  scoped>
.main{
  display: flex;
  flex-direction: column;
  gap: 10px;

}
.menu{

  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;

}
.menu > button{
  border: 1px solid #d3d3d3;
}

.Active{
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;

}

</style>