<!-- card ข้อมูลส่วนตัว -->
<template>
  <q-form ref="myform" class="col-12 row justify-center">
    <div class="row col-xs-12 col-sm-12 col-md-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
      <div class="col-12">
        <HeaderTop
          v-model:edit="edit"
          header="ข้อมูลส่วนตัว"
          icon="mdi-account"
          :addData="true"
          :editOnly="false"
          :editData="false"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-4">
        <q-field
          :outlined="status == 'register' || status == 'rejectRegister'"
          bottom-slots
          :stack-label="defaultInformation.cardid != null"
          label="เลขประจำตัวประชาชน"
          dense
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :rules="[(val) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`]"
        >
          <template v-slot:prepend>
            <q-btn
              round
              flat
              dense
              size="md"
              @click="idDialog"
              v-if="status == 'register' || status == 'rejectRegister'"
            >
              <q-icon name="mdi-pencil-outline" color="primary" />
            </q-btn>
          </template>
          <template v-slot:control>
            <div class="self-center full-width no-outline" tabindex="0">
              {{ defaultInformation.cardid }}
            </div>
          </template>
        </q-field>
        <!-- <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          type="tel"
          mask="#############"
          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultInformation.cardid"
          maxlength="13"
          :rules="[
            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
          ]"
          label="เลขบัตรประจำตัวประชาชน"
        /> -->
      </div>
      <div class="col-xs-12 col-sm-3 col-md-2">
        <q-select
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          v-model="defaultInformation.prefixId"
          emit-value
          map-options
          option-label="name"
          :options="prefixOptions"
          option-value="id"
          :label="`${'คำนำหน้า'}`"
          @update:model-value="(value) => selectPrefix()"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultInformation.firstname"
          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
          :label="`${'ชื่อ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultInformation.lastname"
          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
          :label="`${'นามสกุล'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <!-- :borderless="!false" -->
        <q-select
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          dense
          :outlined="status == 'register' || status == 'rejectRegister'"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          lazy-rules
          v-model="defaultInformation.nationality"
          :options="opNat"
          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
          :label="`${'สัญชาติ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-select
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          v-model="defaultInformation.religionId"
          emit-value
          map-options
          option-label="name"
          :options="religionOptions"
          option-value="id"
          :label="`${'ศาสนา'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <datepicker
          menu-class-name="modalfix"
          v-model="defaultInformation.birthDate"
          :locale="'th'"
          autoApply
          :enableTimePicker="false"
          week-start="0"
          :max-date="new Date()"
          :disabled="!(status == 'register' || status == 'rejectRegister')"
          @update:modelValue="selectBirthDate"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              :class="getClass(status == 'register' || status == 'rejectRegister')"
              :outlined="status == 'register' || status == 'rejectRegister'"
              dense
              lazy-rules
              :readonly="!(status == 'register' || status == 'rejectRegister')"
              :borderless="!(status == 'register' || status == 'rejectRegister')"
              :model-value="
                defaultInformation.birthDate == null
                  ? null
                  : date2Thai(defaultInformation.birthDate)
              "
              :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
              :label="`${'วัน/เดือน/ปี เกิด'}`"
            >
              <template v-slot:prepend>
                <q-icon
                  name="mdi-calendar-outline"
                  class="cursor-pointer"
                  size="22px"
                  :style="
                    status == 'register' || status == 'rejectRegister'
                      ? 'color: var(--q-primary)'
                      : 'color: var(--q-grey)'
                  "
                >
                </q-icon>
              </template>
            </q-input>
          </template>
        </datepicker>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          dense
          lazy-rules
          bottom-slots
          :outlined="status == 'register' || status == 'rejectRegister'"
          :readonly="!(status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :model-value="
            defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
          "
          :label="`${'อายุ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
          lazy-rules
          type="tel"
          mask="##########"
          maxlength="10"
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultInformation.tel"
          :label="`${'โทรศัพท์'}`"
          :rules="[
            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
          ]"
        />
      </div>
      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
          lazy-rules
          type="tel"
          mask="##########"
          maxlength="10"
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultInformation.phone"
          :rules="[
            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
          ]"
          :label="`${'โทรศัพท์มือถือ'}`"
        />
      </div> -->
      <div class="col-xs-12 col-sm-3 col-md-3">
        <!-- style="padding: 0 12px" -->
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          dense
          lazy-rules
          bottom-slots
          :outlined="status == 'register' || status == 'rejectRegister'"
          :readonly="!(status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultInformation.email"
          label="E-mail address"
        />
      </div>
    </div>
    <div class="row col-xs-12 col-sm-6 col-md-3 justify-end">
      <q-card bordered class="col-11 q-pa-sm justify-center text-center q-mt-sm">
        <div class="text-weight-medium q-py-xs">อัปโหลดรูปถ่าย</div>
        <div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
          <label for="file-upload" class="col-12 row justify-center">
            <q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-6">
              <div
                class="overlay"
                v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
              >
                <q-icon name="mdi-camera" />
                <br />อัปเดต
              </div>
            </q-img>
            <q-img v-else :src="img" class="col-12">
              <div
                class="overlay"
                v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
              >
                <q-icon name="mdi-camera" />
                <br />อัปเดต
              </div>
            </q-img>
          </label>
          <input id="file-upload" type="file" accept="image/*" @change="uploadImage" />
        </div>
        <div class="text-caption q-pt-sm text-grey-7">
          <div>รูปถ่ายหน้าตรง ชุดสุภาพ</div>
          <div>ไม่สวมหมวก/แว่นตาดำ</div>
          <div>และไม่มีลวดลายใด ๆ บนรูปถ่าย</div>
        </div>
      </q-card>
    </div>
    <!-- <div class="col-xs-12 col-sm-9 col-md-12">
      <q-input
        :class="getClass(status == 'register' || status == 'rejectRegister')"
        :outlined="status == 'register' || status == 'rejectRegister'"
        dense
        lazy-rules
        :readonly="!(status == 'register' || status == 'rejectRegister')"
        :borderless="!(status == 'register' || status == 'rejectRegister')"
        v-model="defaultInformation.knowledge"
        label="ความรู้ความสามารถพิเศษ"
        type="textarea"
      />
    </div> -->
  </q-form>

  <!--  dialog กรอกเลขบัตร -->
  <q-dialog v-model="idModel">
    <q-card style="width: 350px">
      <q-card-section class="bg-grey-2 q-py-sm">
        <div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
      </q-card-section>
      <q-separator color="grey-4" />
      <q-card-section>
        <q-input
          :class="getClass(true)"
          :outlined="true"
          dense
          type="tel"
          mask="#############"
          :counter="true ? true : false"
          lazy-rules
          :readonly="!true"
          :borderless="!true"
          v-model="cardid1"
          maxlength="13"
          :rules="[
            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
          ]"
          label="เลขบัตรประจำตัวประชาชน"
          class="q-mb-sm"
        />
        <q-input
          :class="getClass(true)"
          :outlined="true"
          dense
          type="tel"
          mask="#############"
          :counter="true ? true : false"
          lazy-rules
          :readonly="!true"
          :borderless="!true"
          v-model="cardid2"
          maxlength="13"
          :rules="[
            (val) => val.length == 13 || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชน'}`,
            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชนให้ถูกต้อง'}`
          ]"
          label="ยืนยันเลขบัตรประจำตัวประชาชน"
        />
      </q-card-section>
      <q-separator color="grey-4" />
      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
        <q-btn flat label="ตกลง" @click="checkCardId" class="bg-teal-1" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import http from '@/plugins/http'
import config from '@/app.config'
import type { PropType } from 'vue'
import { useRoute } from 'vue-router'
import keycloak from '@/plugins/keycloak'
import { useQuasar } from 'quasar'
import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'

const props = defineProps({
  prefixOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  religionOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  provinceOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  status: {
    type: String,
    required: true
  },
  form: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:form'])

const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, calAge, success, messageError, notifyError, calAgeYear } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore
const districtOptions = ref<DataOption[]>([])
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const edit = ref<boolean>(true)
const myform = ref<any>({})
const img = ref<string>('')
const fileProfile = ref<File[]>([])
const cardid1 = ref<string>('')
const cardid2 = ref<string>('')

const opNat = ref(['ไทย'])
const idModel = ref<boolean>(false)

watch(myform, async (count: any, prevCount: any) => {
  emit('update:form', count)
})

watch(defaultInformation, async (count: Information, prevCount: Information) => {
  await changeData('information', count)
})

onMounted(async () => {
  await fetchData()
  await fetchImgData()
  if (defaultInformation.value.provinceId != null)
    await fetchDistrict(defaultInformation.value.provinceId)
})

const fetchData = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateInformation(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      defaultInformation.value.prefixId = data.prefixId
      selectPrefix()
      defaultInformation.value.lastname = data.lastName
      defaultInformation.value.provinceId = data.citizenProvinceId
      defaultInformation.value.districtId = data.citizenDistrictId
      defaultInformation.value.birthDate =
        data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
      defaultInformation.value.cardIdDate =
        data.citizenDate == null ? null : new Date(data.citizenDate)
      defaultInformation.value.cardid = data.citizenId
      defaultInformation.value.firstname = data.firstName
      defaultInformation.value.religionId = data.religionId
      defaultInformation.value.nationality = data.nationality
      defaultInformation.value.email = data.email
      defaultInformation.value.phone = data.mobilePhone
      defaultInformation.value.tel = data.telephone
      defaultInformation.value.knowledge = data.knowledge
    })
    .catch(() => {
      defaultInformation.value.email =
        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
      defaultInformation.value.firstname =
        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
      defaultInformation.value.lastname =
        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
    })
    .finally(() => {
      loaderPage(false)
    })
}

const checkCardId = async () => {
  if (cardid2.value == cardid1.value) {
    idModel.value = false
    defaultInformation.value.cardid = cardid2.value
  } else {
    notifyError($q, 'เลขบัตรไม่ตรงกัน')
  }
}
const selectPrefix = async () => {
  defaultInformation.value.prefix =
    props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId).length == 0
      ? ''
      : props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId)[0].name
}
const selectBirthDate = async () => {
  if (defaultInformation.value.birthDate != null) {
    console.log(calAgeYear(defaultInformation.value.birthDate))
    if (calAgeYear(defaultInformation.value.birthDate) < 18) {
      defaultInformation.value.birthDate = null
      notifyError($q, 'อายุไม่ถึง18')
    } else if (calAgeYear(defaultInformation.value.birthDate) > 60) {
      defaultInformation.value.birthDate = null
      notifyError($q, 'อายุเกิน60')
    }
  }
}

const fetchImgData = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateProfile(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      img.value = data
    })
    .catch((e) => {
      //   messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const uploadImage = async (e: any) => {
  let input = e.target.files
  if (input.length > 0) {
    const formData = new FormData()
    formData.append('', input[0])
    loaderPage(true)
    await http
      .put(config.API.candidateProfile(examId.value, positionId.value), formData)
      .then((res) => {
        success($q, 'อัพโหลดรูปสำเร็จ')
      })
      .catch((e) => {
        messageError($q, e)
      })
      .finally(async () => {
        await fetchImgData()
        fileProfile.value = []
      })
    return
  }
}

const selectProvince = async (val: string) => {
  defaultInformation.value.districtId = ''
  myform.value.resetValidation()
  await fetchDistrict(val)
}

const fetchDistrict = async (id: string) => {
  loaderPage(true)
  await http
    .get(config.API.listDistrict(id))
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      districtOptions.value = option
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const getClass = (val: boolean) => {
  return {
    'full-width inputgreen cursor-pointer': val,
    'full-width cursor-pointer': !val
  }
}

const idDialog = () => {
  idModel.value = true
}
</script>

<style>
.modalfix {
  position: fixed !important;
}
.containerimage {
  position: relative;
  width: 100%;
}

.q-img {
  display: block;
  width: 100%;
  max-height: 170px;
  padding: 1%;
  border-radius: 8px;
  border: solid 2px rgba(168, 168, 168, 0.055) !important;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
}

.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  color: #f1f1f1;
  transition: 0.5s ease;
  width: 100%;
  height: 70px;
  opacity: 0;
  color: white;
  text-align: center;
  cursor: pointer;
  padding: 5% 0 5% 0;
}

.containerimage:hover .overlay {
  opacity: 1;
}

.q-field__bottom {
  padding: 5px 10px 0px 0px;
}

input[type='file'] {
  display: none;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
</style>
