<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useProbationStore } from "@/modules/11_probation/store/probation";

import Assign from "@/modules/11_probation/component/01_Assign.vue";
import RecordCareker from "@/modules/11_probation/component/02_RecordCareker.vue";
import RecordCommander from "@/modules/11_probation/component/03_RecordCommander.vue";
import EvaluateCommander from "@/modules/11_probation/component/04_EvaluateCommander.vue";
import EvaluateChairman from "@/modules/11_probation/component/05_EvaluateChairman.vue";
import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.vue";
import EvaluateReport from "@/modules/11_probation/component/07_EvaluateReport.vue";
import SurveyComment from "@/modules/11_probation/component/08_SurveyComment.vue";

const drawer = ref<boolean>(true);
const activeTab = ref<string>("tab1");
const store = useProbationStore();
const router = useRouter();
const route = useRoute();

const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);

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

function onMobile(type: string) {
  router.push(`/probation/${type}/${profileId.value}/${id.value}`);
}

/** ปุ่มกลับ */
function clickBack() {
  router.push(`/probation`);
  store.mainTab = "tab1";
}

/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
onMounted(() => {
  if (store.mainTab) {
    activeTab.value = store.mainTab;
  } else activeTab.value = "tab1";
});
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle text-white col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="clickBack()"
      />
      <div>การทดลองปฏิบัติหน้าที่ราชการ</div>
    </div>
  </div>
  <q-card bordered :class="!$q.screen.gt.xs ? `borderRadius` : ``">
    <q-layout
      v-if="$q.screen.gt.xs"
      view="hHh Lpr lff"
      container
      class="shadow-2 rounded-borders page-relative"
      style="height: 82vh"
    >
      <q-header class="bg-grey-1"> </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')"
            >
              <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')"
            >
              <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 == 'tab3'"
              @click="changeTab('tab3')"
            >
              <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')"
            >
              <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')"
            >
              <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 == 'tab6'"
              @click="changeTab('tab6')"
            >
              <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 == 'tab7'"
              @click="changeTab('tab7')"
            >
              <q-item-section> ผลการประเมินการ ฯ </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 == 'tab8'"
              @click="changeTab('tab8')"
            >
              <q-item-section> แบบสํารวจ<br />ความคิดเห็น </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
      </q-drawer>
      <q-page-container>
        <q-layout view="hHh Lpr lFf" container style="height: 82vh">
          <q-tab-panels
            v-model="activeTab"
            animated
            class="shadow-2 rounded-borders"
            vertical
          >
            <q-tab-panel name="tab1">
              <Assign />
            </q-tab-panel>
            <q-tab-panel name="tab2" class="q-pa-none">
              <RecordCareker />
            </q-tab-panel>
            <q-tab-panel name="tab3">
              <RecordCommander />
            </q-tab-panel>
            <q-tab-panel name="tab4">
              <EvaluateCommander />
            </q-tab-panel>
            <q-tab-panel name="tab5">
              <EvaluateChairman />
            </q-tab-panel>
            <q-tab-panel name="tab6">
              <EvaluateResult />
            </q-tab-panel>
            <q-tab-panel name="tab7">
              <EvaluateReport />
            </q-tab-panel>
            <q-tab-panel name="tab8">
              <SurveyComment />
            </q-tab-panel>
          </q-tab-panels>
        </q-layout>
      </q-page-container>
    </q-layout>
    <q-list v-else separator>
      <q-item
        clickable
        v-ripple
        @click="onMobile('assign-work')"
        style="border-radius: 20px 20px 0 0"
      >
        <q-item-section>แบบมอบหมายงานฯ</q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="onMobile('record-careker')">
        <q-item-section>
          <q-item-label>แบบบันทึกผล</q-item-label>
          <q-item-label class="text-grey-6">(ผู้ดูแล)</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="onMobile('record-commander')">
        <q-item-section>
          <q-item-label>แบบบันทึกผล</q-item-label>
          <q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="onMobile('evaluate-commander')">
        <q-item-section>
          <q-item-label>แบบประเมินผล</q-item-label>
          <q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="onMobile('evaluate-chairman')">
        <q-item-section>
          <q-item-label>แบบประเมินผล</q-item-label>
          <q-item-label class="text-grey-6">(คณะกรรมการ)</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="onMobile('evaluate-result')">
        <q-item-section>แบบรายงานการประเมิน ฯ</q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple @click="onMobile('evaluate-report')">
        <q-item-section>ผลการประเมินการ ฯ</q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
      <q-item
        clickable
        v-ripple
        @click="onMobile('survey-comment')"
        style="border-radius: 0 0 20px 20px"
      >
        <q-item-section>แบบสํารวจความคิดเห็น</q-item-section>
        <q-item-section avatar>
          <q-avatar text-color="info" icon="mdi-chevron-right" />
        </q-item-section>
      </q-item>
    </q-list>
  </q-card>
</template>
<style scoped>
.text_left .q-tabs__content .q-tab {
  justify-content: start;
  padding-left: 20px;
}

.borderRadius {
  border-radius: 20px !important;
}
</style>
