<!-- page:detail page รายการสอบทั้งหมด -->
<template>
  <q-toolbar class="q-py-sm q-px-md bg-grey-2">
    <q-toolbar-title class="toptitle text-dark col-12 row items-center">
      {{ tittle }}
      <q-space />
      <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
    </q-toolbar-title>
  </q-toolbar>
  <q-card flat class="">
    <div class="justify-center">
      <q-stepper
        class="col-2"
        v-model="step"
        ref="stepper"
        alternative-labels
        header-nav
        animated
        done-color="positive"
        active-color="blue-7"
        inactive-color="positive"
        done-icon="mdi-check-bold"
        :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'"
      >
        <!-- <q-step
          :done="step > 1"
          :disable="stepRaw < 1"
          :name="1"
          title="อ่านคำชี้แจง"
          :icon="
            stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
          "
        >
          <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
        </q-step> -->
        <q-step
          :done="step > 2"
          :disable="stepRaw < 2"
          :name="2"
          title="ข้อมูลสมัครสอบ"
          :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
        >
          <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
        </q-step>
        <q-step
          :done="step > 3"
          :disable="stepRaw < 3"
          :name="3"
          title="ชำระค่าธรรมเนียมการสอบ"
          :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
        >
          <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
        </q-step>
        <q-step
          :done="step > 4"
          :disable="stepRaw < 4"
          :name="4"
          title="สำเร็จ"
          :icon="stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
        >
          <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
        </q-step>
      </q-stepper>
    </div>
  </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
import keycloak from '@/plugins/keycloak'
import { useQuasar } from 'quasar'

const $q = useQuasar()
const examId = ref<string>('zxc')
const step = ref<number>(2)
const stepRaw = ref<number>(2)
const examPost = ref<any>()
const test = ref<any>()
const loading = ref<boolean>(false)
const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว ทดสอบ')

onMounted(() => {
  loadCandidate()
  fetchExams()
})

const loadCandidate = () => {
  //   this.loader = true
  //   this.$http
  //     .get(this.$config.API.getCandidateCurrentStep(this.examId, this.$keycloak.tokenParsed.sub))
  //     .then((res) => {
  //       this.step = res.data.items
  //       this.stepRaw = res.data.items
  //     })
  //     .catch((e) => {
  //       this.step = 1
  //     })
  //     .finally(() => {
  //       this.loader = false
  //     })
}

const fetchExams = () => {
  //   const headers = { 'Content-Type': 'application/graphql' }
  //   this.loading = true
  //   this.$http
  //     .post(
  //       this.$config.API.getOrchardPath(),
  //       this.$config.API.getExamPostsForExamDetailQuery(this.$route.params.examId),
  //       { headers }
  //     )
  //     .then((response) => {
  //       this.examPost = response.data.data.examPost[0]
  //       this.test = this.examPost.bag.contentItems
  //     })
  //     .catch((err) => console.log(err))
  //     .finally(() => (this.loading = false))
}

const fetchStep = () => {
  stepRaw.value += 1
  step.value += 1
}

/**
 * logout keycloak
 * confirm ก่อนออกจากระบบ
 */
const doLogout = () => {
  $q.dialog({
    title: 'ยืนยันการออกจากระบบ',
    message: `ต้องการออกจากระบบใช้หรือไม่?`,
    cancel: 'ยกเลิก',
    ok: 'ยืนยัน',
    persistent: true
  }).onOk(() => {
    keycloak.logout()
  })
}
</script>
