<template>
  <div class="fit">
    <q-tabs
      v-model="tab_value"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
    >
      <q-tab name="signal_source" :label="$t('signal source')" />
      <q-tab name="mode" :label="$t('mode')" />
      <q-tab name="plan" :label="$t('plan')" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tab_value" animated>
      <q-tab-panel name="signal_source">
        <signal-source-tree />
      </q-tab-panel>
      <q-tab-panel name="mode">
        <mode-tree />
      </q-tab-panel>
      <q-tab-panel name="plan">
        <plan-tree />
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

import SignalSourceTree from "src/components/SignalSourceTree.vue";
import ModeTree from "src/components/ModeTree.vue";
import PlanTree from "src/components/PlanTree.vue";

export default defineComponent({
  name: "PageFooterPortrait",

  components: { SignalSourceTree, ModeTree, PlanTree },

  setup() {
    let tab_value = ref("signal_source");

    return { tab_value };
  },
});
</script>
