<template>
    <v-layout column pb-2>
        <v-card class="search-test pa-1 mb-0">
            <!-- <v-card-actions>
               <v-btn flat :outline="isTab('px')" color="orange" @click="selectTab('px')" >Pemeriksaan</v-btn>
                <v-btn flat :outline="isTab('panel')" color="orange" @click="selectTab('panel')" >Panel</v-btn>
                <v-btn flat :outline="isTab('profile')" color="orange" @click="selectTab('profile')" >Profile</v-btn>
                <v-btn flat :outline="isTab('mou')" color="orange" text-color="red" @click="selectTab('mou')" >MOU *</v-btn>
            </v-card-actions> -->
            <v-divider></v-divider>
            <one-mou-px-mou-info v-if="isTab('mou')">
            </one-mou-px-mou-info>
            <one-mou-px-px v-if="isTab('px')">
            </one-mou-px-px>
            <one-mou-px-panel v-if="isTab('panel')">
            </one-mou-px-panel>
            <one-mou-px-profile v-if="isTab('profile')">
            </one-mou-px-profile >
   </v-layout>
</template>

<style scoped>
</style>
<script>
module.exports = {
   components: {
      'one-mou-px-mou-info' : httpVueLoader('./oneMouPxMouInfo.vue'),
      'one-mou-px-px' : httpVueLoader('./oneMouPxPx.vue?ts' + new Date().toISOString() ),
      'one-mou-px-panel' : httpVueLoader('./oneMouPxPanel.vue'),
      'one-mou-px-profile' : httpVueLoader('./oneMouPxProfile.vue'),
   },
   methods: {
      isTab(tab) {
         return this.$store.state.company.selected_px_tab == tab
      },
      selectTab(tab) {
         let prev_tab = this.$store.state.company.selected_px_tab
         if (tab != this.$store.state.company.selected_px_tab ) {
            //reset panels tests profiles
            this.$store.commit('px/update_tests',[])
            this.$store.commit('px/update_panels',[])
         }
         this.$store.commit('company/update_selected_px_tab',tab)
      }
   },
   computed : {
      selected_px_tab() {
        return this.$store.state.company.selected_px_tab
      }
   }
}
</script>
