<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref, defineAsyncComponent, onMounted, reactive } from "vue";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import { useQuasar } from "quasar";

const DataStore = useProbationDataStore();

const ProbationFormAssign = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormAssign.vue")
);
const TabsTemplate1 = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Template1.vue"
    )
);
const TabsTemplateCommader = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue"
    )
);
const TabsTemplate2 = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Template2.vue"
    )
);
const TabsTemplate2Format2 = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue"
    )
);
const TabsTemplate3 = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Template3.vue"
    )
);

const SummaryScore = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/SummaryScore.vue")
);

const $q = useQuasar();

const mixin = useCounterMixin();
const {
  date2Thai,
  dateToISO,
  success,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;

const router = useRouter();
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");

const assignId = ref<string>(route.params.form as string);
const drawer = ref<boolean>(true);
const activeTab = ref<string>("");
const personalId = ref<string>(route.params.personalId.toString());

/**
 * เปลี่ยน tab เมนู
 * @param tab กำหนด tab
 */
function changeTab(tab: string) {
  DataStore.mainTab = tab;
  activeTab.value = DataStore.mainTab;
}

/** ปุ่มกลับ */
function clickBack() {
  router.push({
    path: `/probation/detail/${personalId.value}`,
  });
  DataStore.mainTab = "tab1";
}

async function getPermissions() {
  await http
    .get(config.API.permissionsCheck(assignId.value))
    .then(async (res) => {
      const data = await res.data.data;
      DataStore.dataPermissions = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}

/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
onMounted(async () => {
  await getPermissions();
  if (DataStore.mainTab) {
    activeTab.value = DataStore.mainTab;
  } else activeTab.value = "tab1";
});
</script>

<template>
  <q-card flat bordered class="col-12">
    <q-layout
      view="hHh Lpr lff"
      container
      class="shadow-2 rounded-borders page-relative"
      style="height: 82vh"
    >
      <q-header class="bg-grey-1">
        <q-toolbar>
          <div
            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
          >
            <q-btn
              icon="mdi-arrow-left"
              unelevated
              round
              dense
              flat
              color="primary"
              class="q-mr-sm"
              @click="clickBack"
            />
            การทดลองปฏิบัติหน้าที่ราชการ
          </div>
        </q-toolbar>
        <q-separator />
      </q-header>
      <q-drawer
        v-model="drawer"
        show-if-above
        :width="150"
        :breakpoint="500"
        class="bg-grey-1"
        bordered
      >
        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
          <q-list class="text-grey-9">
            <q-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab1'"
              @click="changeTab('tab1')"
              :disable="DataStore.dataPermissions?.tab1.isView == false"
            >
              <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
            </q-item>

            <q-item
              dense
              class="q-py-sm"
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              v-ripple
              :active="activeTab == 'tab2'"
              @click="changeTab('tab2')"
              :disable="DataStore.dataPermissions?.tab2.isView == false"
            >
              <q-item-section>
                แบบบันทึกผล
                <br />
                <div class="text-caption text-grey-7">(ผู้ดูแล)</div>
              </q-item-section>
            </q-item>

            <q-item
              dense
              class="q-py-sm"
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              v-ripple
              :active="activeTab == 'tab8'"
              @click="changeTab('tab8')"
              :disable="DataStore.dataPermissions?.tab3.isView == false"
            >
              <q-item-section>
                แบบบันทึกผล
                <br />
                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
              </q-item-section>
            </q-item>

            <q-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab3'"
              @click="changeTab('tab3')"
              :disable="DataStore.dataPermissions?.tab4.isView == false"
            >
              <q-item-section>
                แบบประเมินผล<br />
                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
              </q-item-section>
            </q-item>

            <q-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab4'"
              @click="changeTab('tab4')"
              :disable="DataStore.dataPermissions?.tab5.isView == false"
            >
              <q-item-section>
                แบบประเมินผล<br />
                <div class="text-caption text-grey-7">(คณะกรรมการ)</div>
              </q-item-section>
            </q-item>

            <q-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab5'"
              @click="changeTab('tab5')"
              :disable="DataStore.dataPermissions?.tab6.isView == false"
            >
              <q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
            </q-item>

            <q-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab6'"
              @click="changeTab('tab6')"
              :disable="DataStore.dataPermissions?.tab7.isView == false"
            >
              <q-item-section> ผลการประเมินการ ฯ </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
      </q-drawer>
      <q-page-container>
        <q-layout view="hHh Lpr lFf" container style="height: 72vh">
          <q-tab-panels
            v-model="activeTab"
            animated
            class="shadow-2 rounded-borders"
            vertical
          >
            <q-tab-panel name="tab1">
              <ProbationFormAssign />
            </q-tab-panel>

            <q-tab-panel name="tab2">
              <TabsTemplate1 :activeTab="activeTab" />
            </q-tab-panel>

            <q-tab-panel name="tab8">
              <TabsTemplateCommader />
            </q-tab-panel>

            <q-tab-panel name="tab3">
              <TabsTemplate2 />
            </q-tab-panel>

            <q-tab-panel name="tab4">
              <TabsTemplate2Format2 />
            </q-tab-panel>

            <q-tab-panel name="tab5">
              <TabsTemplate3 />
            </q-tab-panel>

            <q-tab-panel name="tab6">
              <SummaryScore />
            </q-tab-panel>
          </q-tab-panels>
        </q-layout>
      </q-page-container>
    </q-layout>
  </q-card>
</template>

<style lang="scss" scope>
.btn-absolute {
  z-index: 50;
  position: absolute;
  left: 200px;
  top: 10px;
}

.btnShadow {
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
}
</style>
