<template>
  <div class="q-pa-md row items-center justify-center" id="noPrint">
    <div class="col-xs-12 col-sm-8 col-md-9">
      <q-card flat class="q-pa-md q-mb-sm" id="noPrint" :class="getClass(status)">
        <div v-if="status == 'checkRegister'" class="text-orange-6 text-bold">
          <q-icon
            name="mdi-timer-sand"
            size="22px"
            color="orange-5"
            class="q-mr-sm"
          />รอยืนยันสถานะการสมัคร
        </div>
        <div v-else-if="status == 'checkPoint'" class="text-orange-6 text-bold">
          <q-icon
            name="mdi-timer-sand"
            size="22px"
            color="orange-5"
            class="q-mr-sm"
          />ติดตามประกาศทาง Website
        </div>
        <div v-else-if="status == 'done'" class="text-green-6 text-bold">
          <q-icon
            name="mdi-checkbox-marked-circle-outline"
            size="22px"
            color="green"
            class="q-mr-sm"
          />ติดตามประกาศทาง Website
        </div>
        <div v-else class="text-orange-6 text-bold">
          <q-icon
            name="mdi-timer-sand"
            size="22px"
            color="orange-5"
            class="q-mr-sm"
          />ได้รับใบสมัครแล้ว
        </div>
      </q-card>
      <ExamCard />
    </div>
  </div>
  <q-dialog v-model="dialog" persistent>
    <q-card>
      <q-card-section class="row items-center q-pa-sm">
        <div class="text-bold">แบบสอบถามความพึงพอใจ</div>
        <q-space />
        <q-btn
          icon="close"
          unelevated
          round
          dense
          v-close-popup
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-rating
          v-model="rating"
          max="5"
          size="3.5em"
          color="orange"
          icon="star_border"
          icon-selected="star"
          class="full-width"
          no-dimming
        />
        <q-input
          v-model="text"
          filled
          type="textarea"
          standout
          dense
          outlined
          label="ความคิดเห็น/ข้อแนะนำ"
          class="full-width q-mt-md"
        />
      </q-card-section>

      <q-card-actions align="center">
        <q-btn label="ส่งแบบสอบถาม" class="full-width" color="blue-5" @click="sendRating" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import { useRoute } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import { useQuasar } from 'quasar'
import ExamCard from '@/modules/01_exam/components/ExamCard.vue'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  status: {
    type: String,
    required: true
  }
})

const $q = useQuasar()
const route = useRoute()
const dataStore = useDataStore()
const { loaderPage } = dataStore
const mixin = useCounterMixin()
const { messageError } = mixin
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const fullName = ref<string>('')
const examNumber = ref<string>('')
const citizenId = ref<string>('')
const examSeat = ref<string>('')
const scoreBFull = ref<number | null>(null)
const scoreB = ref<number | null>(null)
const scoreCFull = ref<number | null>(null)
const scoreC = ref<number | null>(null)
const scoreSumFull = ref<number | null>(null)
const scoreSum = ref<number | null>(null)
const examResultinscore = ref<string>('')
const avatar = ref<string>('')
const dialog = ref<boolean>(false)
const rating = ref<number>(5)
const text = ref<string>('')

onMounted(async () => {
  await fetchStatus()
})

const fetchStatus = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateCard(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      fullName.value = data.prefix + data.firstName + ' ' + data.lastName
      examNumber.value = data.examIdenNumber
      citizenId.value = data.citizenId
      examSeat.value = data.seatNumber
      scoreBFull.value = data.pointTotalB
      scoreB.value = data.pointB
      scoreCFull.value = data.pointTotalC
      scoreC.value = data.pointC
      scoreSumFull.value =
        data.pointTotalB == null || data.pointTotalC == null
          ? null
          : parseInt(data.pointTotalB) + parseInt(data.pointTotalC)
      scoreSum.value =
        data.pointB == null || data.pointC == null
          ? null
          : parseInt(data.pointB) + parseInt(data.pointC)
      scoreC.value = data.pointC
      examResultinscore.value = data.pass
      avatar.value = data.avatar
      if (data.reviewPoint == null) dialog.value = true
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const sendRating = async () => {
  loaderPage(true)
  await http
    .put(config.API.candidateReview(examId.value, positionId.value), {
      reviewPoint: rating.value, //คะแนน
      review: text.value //ข้อความ
    })
    .then((res) => {})
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
      dialog.value = false
    })
}

const getClass = (val: string) => {
  return val == 'done' || val == 'checkPoint' ? 'bg-green-1' : 'bg-yellow-2'
}
</script>

<style scoped>
@page {
  size: A4;
  margin: 0;
}

@media print {
  @page {
    margin-left: 0.8in;
    margin-right: 0.8in;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.nonePrint {
  display: none;
}
</style>
