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

import http from "@/plugins/http";
import config from "@/app.config";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";

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

/** import Components*/
import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
import Step1 from "@/modules/06_evaluate/components/step/step1.vue"; // 1.ตรวจสอบคุณสมบัติ
import Step2 from "@/modules/06_evaluate/components/step/step2.vue"; // 2.จัดเตรียมเอกสารเล่ม 1
import Step3 from "@/modules/06_evaluate/components/step/step3.vue"; // 3.ตรวจสอบเอกสารเล่ม 1
import Step4 from "@/modules/06_evaluate/components/step/step4.vue"; // 4.รอตรวจสอบคุณสมบัติ
import Step5 from "@/modules/06_evaluate/components/step/step5.vue"; // 5.ประกาศบนเว็บไซต์
import Step6 from "@/modules/06_evaluate/components/step/step6.vue"; // 6.จัดเตรียมเอกสารเล่ม 2
import Step7 from "@/modules/06_evaluate/components/step/step7.vue"; // 7.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
import Step8 from "@/modules/06_evaluate/components/step/step8.vue"; // 8.รอพิจารณาผลการประเมิน
import Step9 from "@/modules/06_evaluate/components/step/step9.vue"; // 9.เสร็จสิ้น
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"; // ประวัติการประเมิน

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

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

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

const showLoadStatus = ref<boolean>(false);

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

/** function NextToStep*/
async function onCilckNextStep() {
  const functionCreateDoc: (() => Promise<void>) | null =
    store.step === 1
      ? await saveStep1
      : store.step === 3
      ? await saveStep3
      : store.step === 7
      ? await saveStep7
      : null;

  store.step === 1
    ? checkSelectForm()
    : store.step === 2 || store.step === 6
    ? onSubmitFormData()
    : store.step == 3 || store.step == 7
    ? dialogConfirm(
        $q,
        () => {
          functionCreateDoc?.();
        },
        "ยืนยันการยื่นเอกสาร",
        "ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
      )
    : null;
}

/** function validateForm Step 2,4*/
async function onSubmitFormData() {
  store.checkFileupload = !store.checkFileupload;
  if (store.step === 2) {
    if (!store.statusUpload) {
      saveStep2();
    } else {
      if (!downloadFile.value.some((e: string) => e === "")) {
        nextTostep3();
      }
    }
  } else {
    if (!store.statusUpload6) {
      saveStep6();
    } else {
      if (!downloadFile.value.some((e: string) => e === "")) {
        nextTostep7();
      }
    }
  }

  // const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
  // 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)) {
  //   if (emptyValues.length > 0 && store.statusUpload === true) {
  // }
  // }
}

const pdfSrc = ref<any>();
const urlDownloadFile = ref<string>("");
/**
 * function update ลิงก์ PDF
 * @param url ลิงก์ PDF
 * @param urlDownload  ลิงก์ดาวน์โหลด
 */
async function updateFilePDF(url: any, urlDownload: string) {
  pdfSrc.value = url;
  urlDownloadFile.value = urlDownload;
}

/**
 * function เช็ตสถานะขั้ยตอน
 * @param id idประเมิน
 */
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<PersonInformation>();

/**
 * function เรียกข่้อมูลตรวจสอบคุณสมบัติ
 * @param id id ประเมิน
 */
async function fetchDataStep1(id: string) {
  showLoader();
  showLoadStatus.value = false;
  await http
    .get(config.API.evaluationCheckspecByid(id))
    .then((res) => {
      const data = res.data.result;
      formDataStep1.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      showLoadStatus.value = true;
      setTimeout(() => {
        hideLoader();
      }, 3000);
    });
}

/**
 * function อัปเดทคุณสมบัติ
 * @param data  ข้อมูลคุณสมบัติ
 */
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;
}

/**
 * funciton อัปเดทข้อมูลส่วนตัว
 * @param data ข้อมูลส่วนตัว
 */
function updateFormDetail(data: any) {
  formDetail.value = data;
}

/** function เช็คการการคุณสมบัติ*/
function checkSelectForm() {
  const isTrue = Object.keys(formSpec).find((key) => formSpec[key] === true);
  isTrue
    ? dialogConfirm(
        $q,
        async () => {
          saveStep1();
        },
        "ยืนยันการดำเนินการ",
        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
      )
    : dialogMessageNotify($q, "กรุณาเลือกคุณสมบัติ");
}

/** function บันทักตรวจสอบคุณสมบัติ*/
async function saveStep1() {
  showLoader();
  const salaries = formDetail.value.salaries.map((e: any) => ({
    profileId: e.profileId,
    commandCode: e.commandCode,
    commandNo: e.commandNo,
    commandYear: e.commandYear ? Number(e.commandYear) : 0,
    commandDateAffect: e.commandDateAffect,
    commandDateSign: e.commandDateSign,
    posNoAbb: e.posNoAbb,
    posNo: e.posNo,
    positionName: e.positionName,
    positionType: e.positionType,
    positionLevel: e.positionLevel,
    positionLine: e.positionLine,
    positionPathSide: e.positionPathSide,
    positionExecutive: e.positionExecutive,
    amount: e.amount ? e.amount.toString() : "0",
    amountSpecial: e.amountSpecial ? e.amountSpecial.toString() : "0",
    positionSalaryAmount: e.positionSalaryAmount
      ? e.positionSalaryAmount.toString()
      : "0",
    mouthSalaryAmount: e.mouthSalaryAmount
      ? e.mouthSalaryAmount.toString()
      : "0",
    orgRoot: e.orgRoot,
    orgChild1: e.orgChild1,
    orgChild2: e.orgChild2,
    orgChild3: e.orgChild3,
    orgChild4: e.orgChild4,
    remark: e.remark,
    commandId: e.commandId,
    isGovernment: e.isGovernment,
    positionCee: e.positionCee,
    commandName: e.commandName,
    posNumCodeSit: e.posNumCodeSit,
    posNumCodeSitAbb: e.posNumCodeSitAbb,
  }));

  const educations = formDetail.value.educations.map((e: any) => ({
    country: e.country,
    degree: e.degree,
    duration: e.duration,
    durationYear: e.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 certificates = formDetail.value.certificates.map((e: any) => ({
    ...e,
  }));

  const trainings = formDetail.value.trainings.map((e: any) => ({
    ...e,
  }));

  const performances = formDetail.value.assessments.map(
    ({ id, isAdd, ...rest }: any) => ({
      ...rest,
    })
  );
  const portfolios = formDetail.value.experience.map(
    ({
      id,
      lastUpdatedAt,
      lastUpdateFullName,
      createdFullName,
      createdAt,
      ...rest
    }: any) => ({
      ...rest,
    })
  );

  const evaluateType = route.params.type.toString();
  const form = {
    root: formDetail.value.root,
    userId: formDetail.value.id,
    orgRootId: formDetail.value.rootId,
    citizenId: formDetail.value.citizenId,
    prefix: formDetail.value.prefix,
    fullName: `${formDetail.value.prefix}${formDetail.value.firstName} ${formDetail.value.lastName}`,
    position: formDetail.value.position,
    oc: formDetail.value.org,
    salary: formDetail.value.salary ? formDetail.value.salary.toString() : null,
    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,
    posExecutive: formDetail.value.posExecutive ?? "",
    positionArea: formDetail.value.positionArea ?? "",
    reason: "",
    educations: [...educations],
    certificates: [...certificates],
    salaries: [...salaries],
    trainings: [...trainings],
    performances: [...performances],
    portfolios: [...portfolios],
  };

  await http
    .post(config.API.evaluationCheckspec(), form)
    .then((res) => {
      const id = res.data.result.id;
      router.push(`/evaluate/detail/${route.params.type}/${id}`);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** STEP 2*/
const statusUpload = ref<boolean>(false);
const formCommand = reactive<FormCommand>({
  commanderFullname: "",
  commanderPosition: "",
  commanderPositionOld: "",
  commanderOrg: "",
  commanderOrgOld: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
  commanderAbovePositionOld: "",
  commanderAboveOrgOld: "",
  commanderAboveOrg: "",
  author: "",
  subject: [],
  assignedPosition: "",
});
const downloadFile = ref<string[]>([]);

/**
 * function  อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
 * @param val ผู้เซ็นเอกสาร
 * @param ref validate
 */
function updateformCommand(val: any, ref: any) {
  formCommand.commanderFullname = val.commanderFullname;
  formCommand.commanderPosition = val.commanderPosition;
  formCommand.commanderPositionOld = val.commanderPositionOld;
  formCommand.commanderOrg = val.commanderOrg;
  formCommand.commanderOrgOld = val.commanderOrgOld;
  formCommand.commanderAboveFullname = val.commanderAboveFullname;
  formCommand.commanderAbovePosition = val.commanderAbovePosition;
  formCommand.commanderAbovePositionOld = val.commanderAbovePositionOld;
  formCommand.commanderAboveOrgOld = val.commanderAboveOrgOld;
  formCommand.commanderAboveOrg = val.commanderAboveOrg;
  formCommand.author = val.author;
  formCommand.subject = val.subject;
  formCommand.assignedPosition = val.assignedPosition;
  downloadFile.value = ref.downloadFile;
  statusUpload.value = ref.statusUpload;
}
/** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
async function saveStep2() {
  dialogConfirm(
    $q,
    async () => {
      statusUpload.value = true;
      store.statusUpload = statusUpload.value;
      showLoader();
      await http
        .put(
          config.API.evaluationUpdateAuthor(
            route.params.id.toString(),
            "director"
          ),
          { ...formCommand, assignedPosition: undefined }
        )
        .then(async () => {
          route.params.id && (await fetchCheckStep(route.params.id.toString()));
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
  );
}
/** function ดำเนินการต่อไป 3.ตรวจสอบเอกสารเล่ม 1*/
async function nextTostep3() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(
          config.API.evaluationPreparedoc(route.params.id.toString(), "approve")
        )
        .then(() => {
          route.params.id && fetchCheckStep(route.params.id.toString());
          store.statusUpload = false;
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}

/** STEP3*/
/** function ยืนยันการยื่นเอกสารไปยัง 4.รอตรวจสอบคุณสมบัติ*/
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();
    });
}

/** STEP 6*/
/** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
async function saveStep6() {
  const body = {
    commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
    commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
    commanderAbovePositionOldDoc2: formCommand.commanderAbovePositionOld,
    commanderAboveOrgOldDoc2: formCommand.commanderAboveOrgOld,
    commanderAboveOrgDoc2: formCommand.commanderAboveOrg,
    commanderFullnameDoc2: formCommand.commanderFullname,
    commanderPositionDoc2: formCommand.commanderPosition,
    commanderPositionOldDoc2: formCommand.commanderPositionOld,
    commanderOrgDoc2: formCommand.commanderOrg,
    commanderOrgOldDoc2: formCommand.commanderOrgOld,
    authorDoc2: formCommand.author,
    subjectDoc2: formCommand.subject,
    assignedPosition: formCommand.assignedPosition,
  };

  dialogConfirm(
    $q,
    async () => {
      statusUpload.value = true;
      store.statusUpload = statusUpload.value;
      showLoader();
      await http
        .put(
          config.API.evaluationUpdateAuthor(
            route.params.id.toString(),
            "director2"
          ),
          body
        )
        .then(async () => {
          route.params.id && (await fetchCheckStep(route.params.id.toString()));
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
  );
}
/** function ดำเนินการต่อไป 7.รอพิจารณาผลการประเมิน 2*/
async function nextTostep7() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(config.API.evaluationCheckdocV2(route.params.id.toString()))
        .then(() => {
          route.params.id && fetchCheckStep(route.params.id.toString());
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}

/** STEP 7*/
/** function ยืนยันการยื่นเอกสารไปยัง 8.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
 */
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();
    });
}

/** function callblck ทำงานเมื่อมีการเปลี่ยน Step*/
watch(
  () => store.step,
  () => {
    if (route.params.id) {
      const id = route.params.id.toString();
      store.step === 1 && fetchDataStep1(id);
    }
  }
);

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

    <div class="col-xs-12 col-sm-12 col-md-11 row">
      <div class="col-12">
        <q-card bordered class="col-12 row caedNone">
          <div class="col-xs-12 col-sm-3 row">
            <div class="col-12 row">
              <div class="col-12 q-py-md q-px-lg">
                <div class="col-12 row items-center no-wrap">
                  <div class="toptitle2">
                    {{
                      route.params.type === "expert"
                        ? "ประเมินชำนาญการ"
                        : "ประเมินชำนาญการพิเศษ"
                    }}
                  </div>
                  <q-space />
                  <div v-if="route.name !== 'evaluate-add'">
                    <q-btn
                      flat
                      round
                      dense
                      color="primary"
                      icon="history"
                      @click="onClickPopupHistory"
                    >
                      <q-tooltip>ประวัติการประเมิน</q-tooltip>
                    </q-btn>
                  </div>
                </div>
                <div>
                  <Stepper />
                </div>
              </div>
              <div class="col-12 row">
                <q-separator :vertical="!$q.screen.lt.md" />
              </div>
            </div>
          </div>
          <q-form
            class="col-xs-12 col-sm-9"
            greedy
            @submit.prevent
            @validation-success="onCilckNextStep"
          >
            <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
              <div class="col-12 row items-center">
                <div class="toptitle2">
                  {{ store.step }}.{{ store.title[store.step - 1] }}
                </div>
                <q-space />
                <div>
                  <q-btn
                    v-if="store.step === 1"
                    :href="externalLink"
                    target="_blank"
                    outline
                    color="blue"
                    dense
                    class="q-px-md"
                    no-caps
                  >
                    ตรวจสอบคุณสมบัติกับ ก.พ.
                  </q-btn>
                </div>
              </div>
              <div class="col-12 q-pt-sm">
                <div class="q-col-gutter-md col-12 row">
                  <div
                    :class="
                      store.step === 2 ||
                      store.step === 4 ||
                      store.step === 5 ||
                      store.step === 6 ||
                      store.step === 8 ||
                      store.step === 9
                        ? 'col-12 row'
                        : 'col-xs-12 col-sm-5 row'
                    "
                  >
                    <q-card
                      flat
                      bordered
                      class="col-12 shadow-0"
                      :style="
                        $q.screen.lt.sm
                          ? ''
                          : 'max-height: 60vh; overflow: scroll;'
                      "
                    >
                      <Step1
                        v-if="store.step === 1"
                        @update:spec="updateCheckSpec"
                        :data="formDataStep1"
                        :educations="formDetail?.educations"
                      />
                      <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>
                  </div>
                  <div
                    class="col-xs-12 col-sm-7"
                    v-if="
                      store.step === 1 || store.step === 3 || store.step === 7
                    "
                  >
                    <div class="col-12">
                      <ViewStep1
                        v-if="store.step === 1"
                        @update:formDeital="updateFormDetail"
                        :data="formDataStep1"
                      />
                      <ViewStep3
                        v-if="store.step === 3 && pdfSrc"
                        :pdfSrc="pdfSrc"
                        :urlDownloadFile="urlDownloadFile"
                      />
                      <ViewStep7
                        v-if="store.step === 7 && pdfSrc"
                        :pdfSrc="pdfSrc"
                        :urlDownloadFile="urlDownloadFile"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <q-card-actions
                class="q-pt-sm q-pa-none q-gutter-sm"
                align="right"
              >
                <q-btn
                  v-if="
                    store.step >= store.currentStep &&
                    store.statusUpload === false &&
                    store.step !== 3 &&
                    store.step !== 4 &&
                    store.step !== 5 &&
                    store.step !== 7 &&
                    store.step !== 8 &&
                    store.step !== 9
                  "
                  unelevated
                  :label="
                    store.step === 2 || store.step === 6
                      ? 'บันทึกข้อมูล'
                      : 'ดำเนินการต่อ'
                  "
                  color="public"
                  type="submit"
                />

                <q-btn
                  v-else-if="
                    store.step >= store.currentStep &&
                    (store.step == 3 || store.step == 7)
                  "
                  unelevated
                  label="ยื่นเอกสาร"
                  color="public"
                  type="submit"
                />

                <q-btn
                  v-if="
                    store.step >= store.currentStep &&
                    store.step == 2 &&
                    store.statusUpload
                  "
                  unelevated
                  label="ดำเนินการต่อ"
                  color="public"
                  type="submit"
                />
                <q-btn
                  v-if="
                    store.step >= store.currentStep &&
                    store.step == 6 &&
                    store.statusUpload
                  "
                  unelevated
                  label="ดำเนินการต่อ"
                  color="public"
                  type="submit"
                />
              </q-card-actions>
            </div>
          </q-form>
        </q-card>
      </div>
    </div>
  </div>

  <PopupHistory
    :modal="modalHistory"
    :close="onClickPopupHistory"
    :id="store.evaluateId"
  />
</template>
<style>
.q-stepper--vertical .q-stepper__step-inner {
  padding: 0;
}
.toptitle2 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}
</style>
