sfp_vue_franchisor_ginastica_cerebro/src/pages/unit/UnitActionPage.vue

<template>
  <div class="tab-page-layout">
    <DefaultHeaderPage title="Cadastro de Unidade" />

    <CustomTabComponent v-model:active-tab="activeTab" :tabs />

    <UnitDataTab
      v-show="activeTab === 'unit_data'"
      class="tab-page-flex-content"
      :unit-id="unitId"
    />

    <template v-if="unitId">
      <FinancialTab
        v-show="activeTab === 'financial'"
        class="tab-page-flex-content"
        :unit-id="unitId"
      />

      <q-scroll-area
        v-show="!['unit_data', 'financial'].includes(activeTab)"
        class="tab-page-scroll-area"
      >
        <PartnersTab
          v-show="activeTab === 'partners'"
          :unit-id="unitId"
        />

        <ContractsTab
          v-show="activeTab === 'contracts'"
          :unit-id="unitId"
        />

        <HistoryTab
          v-show="activeTab === 'history'"
          :unit-id="unitId"
        />

        <MediasTab
          v-show="activeTab === 'medias'"
          :unit-id="unitId"
        />
      </q-scroll-area>
    </template>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRoute } from "vue-router";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";

import UnitDataTab from "src/pages/unit/tabs/UnitDataTab.vue";
import PartnersTab from "src/pages/unit/tabs/PartnersTab.vue";
import ContractsTab from "src/pages/unit/tabs/ContractsTab.vue";
import FinancialTab from "src/pages/unit/tabs/FinancialTab.vue";
import HistoryTab from "src/pages/unit/tabs/HistoryTab.vue";
import MediasTab from "src/pages/unit/tabs/MediasTab.vue";

const route = useRoute();

const activeTab = ref("unit_data");

const unitId = computed(() =>
  route.params.id ? Number(route.params.id) : null,
);

const allTabs = [
  { name: "unit_data", label: "Dados da Unidade" },
  { name: "partners", label: "Sócios" },
  { name: "contracts", label: "Contratos" },
  { name: "financial", label: "Financeiro" },
  { name: "history", label: "Histórico" },
  { name: "medias", label: "Mídias" },
];

const tabs = computed(() => (unitId.value ? allTabs : allTabs.slice(0, 1)));
</script>