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

/** importType*/
import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";

/** importComponents*/
import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
import Step3 from "@/modules/12_evaluatePersonal/components/Detail/step/step3.vue";
import Step4 from "@/modules/12_evaluatePersonal/components/Detail/step/step4.vue";
import Step5 from "@/modules/12_evaluatePersonal/components/Detail/step/step5.vue";
import Step6 from "@/modules/12_evaluatePersonal/components/Detail/step/step6.vue";
import Step7 from "@/modules/12_evaluatePersonal/components/Detail/step/step7.vue";
import Step8 from "@/modules/12_evaluatePersonal/components/Detail/step/step8.vue";
import Step9 from "@/modules/12_evaluatePersonal/components/Detail/step/step9.vue";
import ViewStep1 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue";
import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue";
import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";

/** importStor*/
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
import { useCounterMixin } from "@/stores/mixin";

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

const { showLoader, hideLoader, messageError } = mixin;

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const id = ref<string>(route.params.id as string); // id รายการประเมิน

const modalHistory = ref<boolean>(false);
const formCommand = reactive<FormCommand>({
  elementaryFullName: "",
  elementaryPosition: "",
  abovelevelFullname: "",
  abovelevelPosition: "",
});

const elementaryFullNameRef = ref<object | null>(null);
const elementaryPositonRef = ref<object | null>(null);
const abovelevelFullnameRef = ref<object | null>(null);
const abovelevelPositionRef = ref<object | null>(null);

function updateformCommand(val: any, ref: any) {
  formCommand.elementaryFullName = val.elementaryFullName;
  formCommand.elementaryPosition = val.elementaryPosition;
  formCommand.abovelevelFullname = val.abovelevelFullname;
  formCommand.abovelevelPosition = val.abovelevelPosition;

  elementaryFullNameRef.value = ref.elementaryFullNameRef;
  elementaryPositonRef.value = ref.elementaryPositonRef;
  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
  abovelevelPositionRef.value = ref.abovelevelPositionRef;
}

/** function เช็คขั้นตอน*/
async function fetchCheckStep() {
  showLoader();
  await http
    .get(config.API.evaluateGetStep(id.value))
    .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((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เปิด,ปิด ประวัติการประเมิน*/
function onClickPopupHistory() {
  modalHistory.value = !modalHistory.value;
}

onMounted(async () => {
  await fetchCheckStep();
});
</script>

<template>
  <q-card bordered class="col-12 row caedNone q-col-gutter-md">
    <div class="col-xs-12 col-sm-3 row">
      <div class="col-12 row no-wrap">
        <div class="col-12 q-py-md q-px-lg">
          <div class="col-12 row items-center no-wrap">
            <div class="toptitle2">
              {{
                props.data && props.data?.type == "SPECIAL_EXPERT"
                  ? "ประเมินชำนาญการพิเศษ"
                  : "ประเมินชำนาญการ"
              }}
            </div>
            <q-space/>
            <div>
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="history"
                @click="onClickPopupHistory"
              >
                <q-tooltip>ประวัติการประเมิน</q-tooltip>
              </q-btn>
            </div>
          </div>
          <div class="col-12">
            <Stepper />
          </div>
        </div>
        <div class="col-12 row">
          <q-separator :vertical="!$q.screen.lt.md" />
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-9 q-pa-md">
      <div class="col-12 row q-pt-md">
        <div class="toptitle2">
          {{ store.step }}.{{ store.titel[store.step - 1] }}
        </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">
              <Step1 v-if="store.step === 1" :data="props.data" />
              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
              <Step3 v-if="store.step === 3" :step="store.step" />
              <Step4 v-if="store.step === 4" />
              <Step5 v-if="store.step === 5" />
              <Step6 v-if="store.step === 6" />
              <Step7 v-if="store.step === 7" />
              <Step8 v-if="store.step === 8" />
              <Step9 v-if="store.step === 9" />
          </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"> -->
          <div class="col-12">
            <ViewStep1 v-if="store.step === 1" :data="data" />
            <ViewStep3 v-if="store.step === 3" />
            <ViewStep7 v-if="store.step === 7" />
          </div>
          <!-- <q-card-section> </q-card-section -->
          <!-- ></q-card> -->
        </div>
      </div>
    </div>
  </q-card>

  <PopupHistory :modal="modalHistory" :close="onClickPopupHistory" :id="id" />
</template>

<style scoped>
.q-stepper--vertical .q-stepper__step-inner {
  padding: 0;
}
.toptitle2 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}
</style>
