<script setup lang="ts">
import { onMounted, ref, reactive, type Ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useProbationReport } from "@/modules/15_probationReport/store";

import type { FileType } from "@/modules/15_probationReport/interface/Main";

import SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
import AssignPage from "@/modules/15_probationReport/components/03_AssignPage.vue";

const $q = useQuasar();
const store = useProbationReport();
const router = useRouter();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

const dataSurvey = ref<any>(null);
const isData = ref<boolean>(true);
const isLoad = ref<boolean>(false);
const dataProbation = ref<FileType[]>([]);
const dataResult1 = ref<FileType[]>([]);
const dataResult2 = ref<FileType[]>([]);

const dev_options = reactive([
  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
]);

const result_option = reactive([
  {
    name: "ไม่ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้ทดลองปฏิบัติหน้าที่ราชการต่อไป",
    value: 4,
  },
  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้รับราชการต่อ", value: 1 },
  { name: "ต่ำกว่ามาตรฐานที่กำหนดเห็นควรให้ออกจากราชการ", value: 2 },
  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
]);

/** ดึง ข้อมูลแบบสำรวจ */
async function getSurveyData() {
  isData.value = true;

  await http
    .get(config.API.summaryDetail())
    .then(async (res: any) => {
      const data = await res.data.result.data;
      if (data) {
        isLoad.value = true;
      }

      isData.value = true;
      store.assignId = res.data.result.assignId;
      if (res.data.result.assignId) {
        await Promise.all([
          getSalary(
            res.data.result.assignId,
            "ทดลองงาน",
            "มอบหมายงาน",
            dataProbation
          ),
          getSalary(
            res.data.result.assignId,
            "ทดลองงาน",
            "รายงานผลครั้งที่ 1",
            dataResult1
          ),
          getSalary(
            res.data.result.assignId,
            "ทดลองงาน",
            "รายงานผลครั้งที่ 2",
            dataResult2
          ),
        ]);
      }
      if (data !== null) {
        dataSurvey.value = data;
        isLoad.value = false;
      }
    })
    .catch((e) => {
      // messageError($q, e);
      isData.value = false;
      isLoad.value = false;
    });
}

async function getSalary(
  id: string,
  name: string,
  group: string,
  val: Ref<FileType[]>
) {
  await http
    .get(config.API.developmentSalaryFile(name, group, id))
    .then((res) => {
      val.value = res.data ? res.data : [];
    })
    .catch((e) => {
      // messageError($q, e);
    });
}

onMounted(async () => {
  await getSurveyData();
});
</script>
<template>
  <div class="col-12 row justify-center">
    <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="router.push(`/`)"
        />
        ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น
      </div>

      <div class="col-12">
        <div class="col-12" v-if="!isData">
          <q-banner
            inline-actions
            rounded
            class="text-center"
            style="min-height: 100px"
          >
            ไม่พบผลการประเมินการทดลองปฏิบัติหน้าที่ราชการนี้
          </q-banner>
        </div>
        <q-card bordered v-else>
          <q-tabs
            v-model="store.tabMain"
            inline-label
            align="left"
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
          >
            <q-tab name="SURVEY" label="แบบสํารวจความคิดเห็น" />
            <q-tab
              v-if="dataResult1.length > 0"
              name="RESULT1"
              label="ผลการประเมินฯ ครั้งที่ 1"
            />
            <q-tab
              v-if="dataResult2.length > 0"
              name="RESULT2"
              label="ผลการประเมินฯ ครั้งที่ 2"
            />
            <q-tab
              v-if="dataProbation.length > 0"
              name="ASSIGN"
              label="แบบมอบหมายงานฯ"
            />
          </q-tabs>

          <q-separator />

          <q-tab-panels v-model="store.tabMain" animated>
            <q-tab-panel name="SURVEY" class="q-pa-none">
              <SurveyPage
                v-model:is-data="isData"
                v-model:data-survey="dataSurvey"
                v-model:is-load="isLoad"
                :get-survey-data="getSurveyData"
              />
            </q-tab-panel>
            <q-tab-panel name="RESULT1" class="q-pa-sm">
              <ResultPage
                :page="1"
                v-model:dev_options="dev_options"
                v-model:result_option="result_option"
                v-model:dataResult1="dataResult1"
                v-model:dataResult2="dataResult2"
              />
            </q-tab-panel>
            <q-tab-panel name="RESULT2" class="q-pa-sm">
              <ResultPage
                :page="2"
                v-model:dev_options="dev_options"
                v-model:result_option="result_option"
                v-model:dataResult1="dataResult1"
                v-model:dataResult2="dataResult2"
              />
            </q-tab-panel>
            <q-tab-panel name="ASSIGN">
              <AssignPage v-model:dataProbation="dataProbation" />
            </q-tab-panel>
          </q-tab-panels>
        </q-card>
      </div>
    </div>
  </div>
</template>
