<!-- page:detail page รายการสอบทั้งหมด -->
<template>
  <q-toolbar class="q-pa-sm text-center">
    <div class="text-dark row col-12 text-h6 q-px-md">
      <div class="col-12">
        {{ tittle }}
        {{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }}
      </div>
      <div class="col-12">{{ position }} ระดับ{{ positionLevel }}</div>
    </div>
  </q-toolbar>
  <!-- <q-toolbar class="q-pa-sm text-center">
    <q-toolbar-title class="text-dark">
      {{ tittle }}
      {{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }}
    </q-toolbar-title>
  </q-toolbar> -->
  <q-stepper
    v-model="step"
    ref="stepper"
    alternative-labels
    header-nav
    animated
    done-icon="check"
    :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
  >
    <q-step
      :done="step > 2"
      :disable="stepRaw < 2"
      :name="2"
      title="ข้อมูลสมัครสอบ"
      :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-account'"
    >
      <q-card bordered class="q-pa-lg">
        <q-card-actions
          v-if="status === 'rejectRegister'"
          class="q-pa-md q-mb-md text-left row bg-red-2"
        >
          <div class="col-12 text-red-12">
            <li>{{ rejectMessage }}</li>
          </div>
        </q-card-actions>
        <ExamForm
          :fetchStep="fetchStep"
          :status="status"
          :editorConfirm="editorConfirm"
          :position="position"
          :positionLevel="positionLevel"
        />
      </q-card>
    </q-step>
    <q-step
      :done="step > 3"
      :disable="stepRaw < 3"
      :name="3"
      title="ชำระค่าธรรมเนียม"
      :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
      v-if="stepPayment"
    >
      <q-card bordered class="q-pa-lg">
        <ExamPayment :fetchStep="fetchStep" :status="status" />
      </q-card>
    </q-step>
    <q-step
      :done="step > 4"
      :disable="stepRaw < 4"
      :name="4"
      title="สำเร็จ"
      :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
    >
      <q-card bordered class="q-pa-lg">
        <ExamFinished :fetchStep="fetchStep" :status="status" />
      </q-card>
    </q-step>
  </q-stepper>
  <q-dialog :model-value="modalConsend" persistent>
    <q-card :style="$q.screen.gt.xs ? 'min-width: 50vw' : 'min-width: 80vw'">
      <Consendform :ok="consendOk" :editorCondition="editorCondition" />
    </q-card>
  </q-dialog>
  <q-dialog :model-value="timeout" persistent>
    <q-card :style="$q.screen.gt.xs ? 'min-width: 30vw' : 'min-width: 80vw'" class="q-pa-sm">
      <q-card-section class="row items-center col-12">
        <div class="column col-12 text-center">
          <div><q-icon name="mdi-alert-outline" size="50px" color="pink" /></div>

          <div class="text-bold text-pink text-subtitle1 q-mb-md">หมดเขตรับสมัครสอบ !</div>
          ไม่สามารถทำรายการได้ เนื่องจากหมดเขตรับสมัครแล้ว
          <!-- {{ dateThaiRange([registerEndDate, registerStartDate]) }} -->
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white text-teal justify-center">
        <q-btn label="ตกลง" unelevated color="primary" style="width: 200px" @click="logout" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import { useQuasar } from 'quasar'
import { useExamDataStore } from '@/modules/01_exam/store'
import http from '@/plugins/http'
import config from '@/app.config'
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 Consendform from '@/modules/01_exam/components/Consendform.vue'
import keycloak from '@/plugins/keycloak'

const $q = useQuasar()
const storeExam = useExamDataStore()
const mixin = useCounterMixin()
const { modalError, messageError, dateThaiRange } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore
const step = ref<number>(1)
const stepRaw = ref<number>(1)
const tittle = ref<string>('')
const position = ref<string>('')
const positionLevel = ref<string>('')
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const status = ref<string>('register')
const modalConsend = ref<boolean>(false)
const stepPayment = ref<boolean>(true)
const timeout = ref<boolean>(false)
const rejectMessage = ref<string>('')
const round = ref<number | null>(null)
const yearly = ref<number | null>(null)
const editorCondition = ref<string>(``)
const editorConfirm = ref<string>(``)
const registerStartDate = ref<Date>(new Date())
const registerEndDate = ref<Date>(new Date())

onMounted(async () => {
  await fetchPeriodExam()
  await candidateCheck()
})

const candidateCheck = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateCheckCreate(examId.value, positionId.value))
    .then(async (res) => {
      const data = res.data.result
      storeExam.consend = data.consend
      editorCondition.value = data.editorCondition
      editorConfirm.value = data.editorConfirm
      const positionExam = data.positionExam
      stepPayment.value = data.payment
      if (
        positionId.value != '00000000-0000-0000-0000-000000000000' &&
        positionExam != null &&
        positionExam.id != positionId.value &&
        data.status != 'register' &&
        data.status != 'rejectRegister'
      ) {
        modalError(
          $q,
          'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว',
          'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว',
          logout
        )
      } else {
        if (storeExam.consend == true) {
          await fetchStep()
        } else {
          if (data.canRegister == true) {
            modalConsend.value = true
            stepRaw.value = 2
            step.value = 2
          } else {
            registerStartDate.value = new Date(data.registerStartDate)
            registerEndDate.value = new Date(data.registerEndDate)
            timeout.value = true
          }
        }
      }
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const closeWindow = async () => {
  //   window.close()
}

const fetchStep = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateStatus(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      rejectMessage.value = data.rejectDetail
      status.value = data.status
      if (status.value == 'register') {
        stepRaw.value = 2
        step.value = 2
      } else if (status.value == 'checkRegister') {
        stepRaw.value = 3
        step.value = 3
      } else if (status.value == 'payment') {
        stepRaw.value = 3
        step.value = 3
      } else if (status.value == 'rejectRegister') {
        stepRaw.value = 2
        step.value = 2
      } else if (status.value == 'checkPayment') {
        stepRaw.value = 4
        step.value = 4
      } else if (status.value == 'rejectPayment') {
        stepRaw.value = 3
        step.value = 3
      } else if (status.value == 'checkSeat') {
        stepRaw.value = 4
        step.value = 4
      } else if (status.value == 'checkPoint') {
        stepRaw.value = 4
        step.value = 4
      } else if (status.value == 'done') {
        stepRaw.value = 4
        step.value = 4
      }
      if (
        stepPayment.value == false &&
        status.value != 'register' &&
        status.value != 'rejectRegister'
      ) {
        stepRaw.value = 4
        step.value = 4
      }
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
      storeExam.changeStatus(status.value)
    })
}

const fetchPeriodExam = async () => {
  loaderPage(true)
  await http
    .get(config.API.periodExamPosition(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      tittle.value = data.name
      round.value = data.round
      yearly.value = data.year
      position.value = data.position
      positionLevel.value = data.positionLevel
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const consenClose = () => {
  modalConsend.value = false
}

const consendOk = () => {
  modalConsend.value = false
}

const logout = () => {
  keycloak.logout()
}
</script>
<style>
.q-stepper {
  box-shadow: none;
  background: transparent !important;
}
.q-stepper--horizontal .q-stepper__step-inner {
  padding: 0px;
}
.q-stepper__header--alternative-labels .q-stepper__tab {
  min-height: 0px;
  padding: 1.5% 0% 1.5% 0%;
}
.q-stepper__header--border {
  border-bottom: none;
}
.q-stepper__dot {
  min-width: 35px;
  height: 35px;
  width: 35px;
  font-size: 20px;
}
.q-stepper__title {
  width: 100px;
}
.q-stepper__tab--done .q-stepper__title {
  color: #62a00b;
}
.q-stepper__tab--done .q-stepper__dot {
  color: #95d710;
  border: 1px solid #62a00b;
}

.q-stepper__tab--active .q-stepper__title {
  color: #318bae;
}
.q-stepper__tab--active .q-stepper__dot {
  color: #1cb4ea;
  border: 1px solid #218ab393;
}

.q-stepper__tab--disabled .q-stepper__title {
  color: #92b4c8;
}
.q-stepper__tab--disabled .q-stepper__dot {
  background: #def2fc !important;
  border: 1px solid #92b4c876;
}

.q-stepper__tab--disabled .q-stepper__dot .q-icon {
  color: #7692a3d0;
}
.q-stepper--horizontal .q-stepper__line:before,
.q-stepper--horizontal .q-stepper__line:after {
  background: #92b4c847;
}
</style>
