<script setup lang="ts">
import { ref } from "vue";
import { useKpiDataStore } from "@/modules/14_KPI/store";

import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
import File from "@/modules/14_KPI/components/Tab/05_File.vue";

const store = useKpiDataStore();

const itemsTab = ref<any>([
  {
    name: "1",
    label: "จัดทำแบบฟอร์มการประเมิน",
  },
  {
    name: "2",
    label: "รายงานความก้าวหน้า",
  },
  {
    name: "3",
    label: "รายงานผลสำเร็จของงาน",
  },
  {
    name: "5",
    label: "ไฟล์เอกสาร",
  },
]);

const splitterModel = ref<number>(12);
</script>

<template>
  <q-splitter v-model="splitterModel" disable>
    <template v-slot:before>
      <q-tabs
        v-model="store.tabMain"
        vertical
        class="text-grey-7 text-weight-light"
        active-class="bg-blue-1 text-blue-8 text-weight-bold"
      >
        <q-tab name="1" label="จัดทำข้อตกลง" />
        <q-tab
          name="2"
          label="รายงานความก้าวหน้า"
          :disable="store.tabOpen < 2"
        />
        <q-tab
          name="3"
          label="รายงานผลสำเร็จของงาน"
          :disable="store.tabOpen < 3"
        />

        <q-tab name="5" label="ไฟล์เอกสาร" />
      </q-tabs>
    </template>

    <template v-slot:after>
      <q-tab-panels
        v-model="store.tabMain"
        animated
        swipeable
        vertical
        transition-prev="jump-up"
        transition-next="jump-up"
      >
        <q-tab-panel
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
          class="q-pa-none"
        >
          <Assessment v-if="store.tabMain === '1'" />
          <Assessment v-if="store.tabMain === '2'" />
          <Assessment v-if="store.tabMain === '3'" />
          <File v-if="store.tabMain === '5'" />
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<style scoped>
.hover-tab:hover {
  background-color: #0793f1;
  color: white !important;
  opacity: 1 !important;
}
</style>
