<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

import type {
  FormSpec,
  FormCommand,
  FormCommandRef,
} from "@/modules/06_evaluate/interface/evalute";

import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
import tab1 from "@/modules/06_evaluate/components/Tab1.vue";

import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";

import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue";

import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";

const router = useRouter();
const route = useRoute();
const store = useEvaluateStore();
const mixin = useCounterMixin();
const $q = useQuasar();

const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;

const externalLink =
  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";

// const evaluateId = ref<string>(route.params.id.toString());
const showLoadStatus = ref<boolean>(false);

const modalHistory = ref<boolean>(false);
function onClickPopupHistory() {
  modalHistory.value = !modalHistory.value;
}

async function onCilckNextStep() {
  console.log(store.step);

  const functionCreateDoc: (() => Promise<void>) | null =
    store.step === 1
      ? await saveStep1
      : store.step === 3
      ? await saveStep3
      : store.step === 4
      ? await saveStep4
      : store.step === 5
      ? await saveStep5
      : store.step === 7
      ? await saveStep7
      : store.step === 8
      ? await saveStep8
      : store.step === 9
      ? await saveStep9
      : null;
  store.step === 2 || store.step === 6
    ? validateForm()
    : store.step == 3 || store.step == 7
    ? dialogConfirm(
        $q,
        () => {
          functionCreateDoc?.();
        },
        "ยืนยันการยื่นเอกสาร",
        "ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
      )
    : store.step < 9 &&
      dialogConfirm(
        $q,
        async () => {
          showLoader();
          await functionCreateDoc?.();
        },
        "ยืนยันการดำเนินการ",
        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
      );
}

async function validateForm() {
  const hasError = [];
  for (const key in formCommandRef) {
    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
      const property = formCommandRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    store.step === 2 ? saveStep2() : saveStep6();
  }
}

const pdfSrc = ref<any>();
async function updateFilePDF(url: any) {
  pdfSrc.value = url;
}

/** function เช็คการยื่นข้อประเมิน*/
async function fetchCheckStatus() {
  showLoader();
  await http
    .get(config.API.evaluationCheckStatus())
    .then((res) => {
      const data = res.data.result;
      const id =
        route.params.type === "expert" ? data.expertId : data.specialExpertId;

      router.push(`/evaluate/detail/${route.params.type}/${id}`);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function fetchCheckStep(id: string) {
  showLoadStatus.value = false;
  if (id) {
    await http
      .get(config.API.evaluationCheckStep(id))
      .then((res) => {
        const data = res.data.result;

        let step =
          data.step === "CHECK_SPEC"
            ? 1
            : data.step === "PREPARE_DOC_V1"
            ? 2
            : data.step === "CHECK_DOC_V1"
            ? 3
            : data.step === "WAIT_CHECK_DOC_V1"
            ? 4
            : data.step === "ANNOUNCE_WEB"
            ? 5
            : data.step === "PREPARE_DOC_V2"
            ? 6
            : data.step === "WAIT_CHECK_DOC_V2"
            ? 7
            : data.step === "CHECK_DOC_V2"
            ? 8
            : data.step === "DONE"
            ? 9
            : 1;

        store.currentStep = step;
        store.step = step;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        showLoadStatus.value = true;
      });
  } else (store.step = 1), (store.currentStep = 1);
}

/** STEP 1*/
const formSpec = reactive<FormSpec>({
  isEducationalQft: false, // คุณวุฒิการศึกษา
  isGovermantServiceHtr: false, // ประวัติการรับราชการ
  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
});
const formDetail = ref<any>();
const formDataStep1 = ref<any>();
async function fetchDataStep1(id: string) {
  showLoadStatus.value = false;
  showLoader();
  await http
    .get(config.API.evaluationCheckspecByid(id))
    .then((res) => {
      const data = res.data.result;
      formDataStep1.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      showLoadStatus.value = true;
    });
}

async function updateCheckSpec(data: FormSpec) {
  formSpec.isEducationalQft = data.isEducationalQft;
  formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr;
  formSpec.isOperatingExp = data.isOperatingExp;
  formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
  formSpec.isHaveSpecificQft = data.isHaveSpecificQft;
  formSpec.isHaveProLicense = data.isHaveProLicense;
  formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
}

function updateFormDetail(data: any) {
  formDetail.value = data;
}

async function saveStep1() {
  const salaries = formDetail.value.trainings.map((e: any) => ({
    amount: e.amount,
    date: e.date,
    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
    posNo: e.posNo,
    position: e.position,
    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
    refCommandDate: e.refCommandDate,
    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
    salaryClass: e.salaryClass ? e.salaryClass : "",
    salaryRef: e.salaryRef ? e.salaryRef : "",
    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
  }));

  const educations = formDetail.value.educations.map((e: any) => ({
    country: e.country,
    degree: e.degree,
    duration: e.duration,
    durationYear: e.durationYear.toString(),
    educationLevel: e.educationLevel,
    endDate: e.endDate,
    field: e.field,
    finishDate: e.finishDate,
    fundName: e.fundName,
    gpa: e.gpa,
    institute: e.institute,
    isDate: e.isDate,
    isEducation: e.isEducation,
    other: e.other,
    startDate: e.startDate,
  }));
  const evaluateType = route.params.type.toString();

  const form = {
    userId: formDetail.value.id,
    citizenId: formDetail.value.citizenId,
    prefix: formDetail.value.prefix,
    fullName: `${formDetail.value.firstName}   ${formDetail.value.lastName}.`,
    position: formDetail.value.position,
    oc: formDetail.value.oc,
    salary: formDetail.value.salary.toString(),
    positionLevel: formDetail.value.positionLevel,
    posNo: formDetail.value.posNo,
    birthDate: formDetail.value.birthDate,
    govAge: formDetail.value.govAge,
    type: evaluateType.toUpperCase(),
    step: "PREPARE_DOC_V1",
    isEducationalQft: formSpec.isEducationalQft,
    isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
    isOperatingExp: formSpec.isOperatingExp,
    isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
    isHaveSpecificQft: formSpec.isHaveSpecificQft,
    isHaveProLicense: formSpec.isHaveProLicense,
    isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
    reason: "",
    educations: [...educations],
    certificates: [...formDetail.value.certificates],
    salaries: [...salaries],
    trainings: [...formDetail.value.trainings],
    assessments: [...formDetail.value.assessments],
  };

  fetchCheckStatus();

  await http
    .post(config.API.evaluationCheckspec(), form)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** STEP 2*/
const formCommand = reactive<FormCommand>({
  commanderFullname: "",
  commanderPosition: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
});
const commanderFullnameRef = ref<object | null>(null);
const commanderPositionRef = ref<object | null>(null);
const commanderAboveFullnameRef = ref<object | null>(null);
const commanderAbovePositionRef = ref<object | null>(null);
const fileEvaluation1Ref = ref<object | null>(null);
const fileEvaluation2Ref = ref<object | null>(null);
const fileEvaluation3Ref = ref<object | null>(null);
const fileEvaluation4Ref = ref<object | null>(null);
const fileEvaluation5Ref = ref<object | null>(null);
const fileEvaluation6Ref = ref<object | null>(null);
const formCommandRef: FormCommandRef = {
  commanderFullname: commanderFullnameRef,
  commanderPosition: commanderPositionRef,
  commanderAboveFullname: commanderAboveFullnameRef,
  commanderAbovePosition: commanderAbovePositionRef,
  fileEvaluation1: fileEvaluation1Ref,
  fileEvaluation2: fileEvaluation2Ref,
  fileEvaluation3: fileEvaluation3Ref,
  fileEvaluation4: fileEvaluation4Ref,
  fileEvaluation5: fileEvaluation5Ref,
  fileEvaluation6: fileEvaluation6Ref,
};

function updateformCommand(val: any, ref: any) {
  formCommand.commanderFullname = val.commanderFullname;
  formCommand.commanderPosition = val.commanderPosition;
  formCommand.commanderAboveFullname = val.commanderAboveFullname;
  formCommand.commanderAbovePosition = val.commanderAbovePosition;

  commanderFullnameRef.value = ref.commanderFullnameRef;
  commanderPositionRef.value = ref.commanderPositionRef;
  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
}
async function saveStep2() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(
          config.API.evaluationPreparedoc(
            route.params.id.toString(),
            "approve"
          ),
          formCommand
        )
        .then(() => {
          route.params.id && fetchCheckStep(route.params.id.toString());
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}

async function saveStep3() {
  showLoader();
  await http
    .put(config.API.evaluationCheckdoc(route.params.id.toString(), "approve"))
    .then(() => {
      route.params.id && fetchCheckStep(route.params.id.toString());
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}
async function saveStep4() {
  console.log("Save 4");
}
async function saveStep5() {
  console.log("Save 5");
}
async function saveStep6() {
  const body = {
    commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
    commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
    commanderFullnameDoc2: formCommand.commanderFullname,
    commanderPositionDoc2: formCommand.commanderPosition,
  };
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(config.API.evaluationCheckdocV2(route.params.id.toString()), body)
        .then(() => {
          route.params.id && fetchCheckStep(route.params.id.toString());
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}
async function saveStep7() {
  showLoader();
  await http
    .put(config.API.evaluationPreparedocV2(route.params.id.toString()))
    .then(() => {
      route.params.id && fetchCheckStep(route.params.id.toString());
    })
    .catch(() => {})
    .finally(() => {
      hideLoader();
    });
}
async function saveStep8() {
  console.log("Save 8");
}
async function saveStep9() {
  console.log("Save 9");
}

watch(
  () => store.step,
  () => {
    if (route.params.id) {
      const id = route.params.id.toString();
      store.step === 1 && fetchDataStep1(id);
    }
  }
);

onMounted(async () => {
  route.params.id && fetchCheckStep(route.params.id.toString());
  route.name === "evaluate-add" && (showLoadStatus.value = true);
});
</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.go(-1)"
        />
        <div>ประเมินบุคคล</div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
      <div class="col-12 row">
        <q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
          <div class="col-xs-12 col-sm-3">
            <div class="toptitle">
              {{
                route.params.type === "expert"
                  ? "ประเมินชำนาญการ"
                  : "ประเมินชำนาญการพิเศษ"
              }}
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="history"
                @click="onClickPopupHistory"
              >
                <q-tooltip>ประวัติการประเมิน</q-tooltip>
              </q-btn>
            </div>
            <Stepper />
          </div>

          <div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
            <div class="col-12 row">
              <div class="col-9">
                <div class="toptitle">
                  {{ store.step }}.{{ store.title[store.step - 1] }}
                </div>
              </div>
              <div class="col-3 text-right">
                <q-btn
                  v-if="store.step === 1"
                  :href="externalLink"
                  target="_blank"
                  outline
                  color="blue"
                  no-caps
                >
                  ตรวจสอบคุณสมบัติกับ ก.พ.
                </q-btn>
              </div>
            </div>
            <div class="row q-col-gutter-md col-12">
              <div
                :class="
                  store.step === 2 ||
                  store.step === 4 ||
                  store.step === 5 ||
                  store.step === 6 ||
                  store.step === 8 ||
                  store.step === 9
                    ? 'col-xs-12 col-sm-12 row'
                    : 'col-xs-12 col-sm-5 row'
                "
              >
                <q-card flat bordered class="col-12 q-pa-md">
                  <q-card-section>
                    <Step1
                      v-if="store.step === 1"
                      @update:spec="updateCheckSpec"
                      :data="formDataStep1"
                    />
                    <Step2
                      v-if="store.step === 2"
                      @update:form="updateformCommand"
                    />
                    <Step3
                      v-if="store.step === 3"
                      @update:file="updateFilePDF"
                    />
                    <Step4 v-if="store.step === 4" />
                    <Step5 v-if="store.step === 5" />
                    <Step6
                      v-if="store.step === 6"
                      @update:form="updateformCommand"
                    />
                    <Step7
                      v-if="store.step === 7"
                      @update:file="updateFilePDF"
                    />
                    <Step8 v-if="store.step === 8" />
                    <Step9 v-if="store.step === 9" />
                  </q-card-section>
                </q-card>
              </div>
              <div
                class="col-xs-12 col-sm-7 row"
                v-if="store.step === 1 || store.step === 3 || store.step === 7"
              >
                <q-card flat bordered class="col-12">
                  <q-card-section>
                    <ViewStep1
                      v-if="store.step === 1"
                      @update:formDeital="updateFormDetail"
                      :data="formDataStep1"
                    />
                    <ViewStep3
                      v-if="store.step === 3 && pdfSrc"
                      :pdfSrc="pdfSrc"
                    />
                    <ViewStep7
                      v-if="store.step === 7 && pdfSrc"
                      :pdfSrc="pdfSrc"
                    /> </q-card-section
                ></q-card>
              </div>
            </div>
            <div class="q-mt-md q-gutter-md" align="right">
              <q-btn
                v-if="
                  store.step >= store.currentStep &&
                  store.step !== 3 &&
                  store.step !== 4 &&
                  store.step !== 5 &&
                  store.step !== 7 &&
                  store.step !== 8 &&
                  store.step !== 9
                "
                unelevated
                label="ดำเนินการต่อ"
                color="public"
                @click="onCilckNextStep()"
              />
              <q-btn
                v-else-if="
                  store.step >= store.currentStep &&
                  (store.step == 3 || store.step == 7)
                "
                unelevated
                label="ยื่นเอกการ"
                color="public"
                @click="onCilckNextStep()"
              />
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </div>

  <PopupHistory
    :modal="modalHistory"
    :close="onClickPopupHistory"
    :id="store.evaluateId"
  />
</template>
<style>
.q-stepper--vertical .q-stepper__step-inner {
  padding: 0;
}
</style>
