<!-- card ข้อมูลส่วนตัว -->
<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md">
    <HeaderTop
      v-model:edit="edit"
      header="ข้อมูลส่วนตัว"
      icon="mdi-account"
      :save="saveData"
      :addData="true"
      :editOnly="false"
      :cancel="cancelData"
      :changeBtn="changeBtn"
      :editData="step == 2"
      :disable="statusEdit"
    />
    <q-form ref="myform" class="col-12 row">
      <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="informaData.prefixId"
            emit-value
            map-options
            option-label="name"
            :options="prefixOptions"
            option-value="id"
            :label="`${'คำนำหน้า'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.firstname"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.lastname"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.nationality"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <datepicker
            v-model="informaData.birthDate"
            :locale="'th'"
            autoApply
            :enableTimePicker="false"
            week-start="0"
            :max-date="new Date()"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                :class="getClass(edit)"
                hide-bottom-space
                :outlined="edit"
                dense
                lazy-rules
                :readonly="!edit"
                :borderless="!edit"
                :model-value="date2Thai(informaData.birthDate)"
                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                :label="`${'วัน/เดือน/ปี เกิด'}`"
              >
                <template v-slot:prepend>
                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            readonly
            borderless
            :style="!edit ? '' : 'padding:0 12px;'"
            :model-value="calAge(informaData.birthDate)"
            :label="`${'อายุ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="informaData.statusId"
            emit-value
            map-options
            option-label="name"
            :options="statusOptions"
            option-value="id"
            :label="`${'สถานภาพ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.email"
            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
            label="E-mail address"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.cardid"
            maxlength="13"
            :rules="[
              (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
              (val) => val.length >= 13 || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`
            ]"
            label="เลขบัตรประจำตัวประชาชน"
            mask="#############"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.cardid"
            :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
            label="ออกให้ ณ อำเภอ"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="informaData.provinceId"
            emit-value
            map-options
            option-label="name"
            :options="provinceOptions"
            option-value="id"
            :label="`${'จังหวัด'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <datepicker
            v-model="informaData.cardIdDate"
            :locale="'th'"
            autoApply
            :enableTimePicker="false"
            week-start="0"
            :max-date="new Date()"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                :class="getClass(edit)"
                hide-bottom-space
                :outlined="edit"
                dense
                lazy-rules
                :readonly="!edit"
                :borderless="!edit"
                :model-value="date2Thai(informaData.cardIdDate)"
                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
                :label="`${'วัน/เดือน/ปี'}`"
              >
                <template v-slot:prepend>
                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            type="tel"
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.tel"
            :rules="[
              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
              (val) => val.length >= 9 || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ครบ'}`
            ]"
            :label="`${'โทรศัพท์'}`"
            mask="#########"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            type="tel"
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.phone"
            :rules="[
              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
              (val) => val.length >= 10 || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ครบ'}`
            ]"
            :label="`${'โทรศัพท์มือถือ'}`"
            mask="##########"
          />
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="informaData.knowledge"
            :rules="[(val) => !!val || `${'กรุณากรอก ความรู้ความสามารถพิเศษ'}`]"
            label="ความรู้ความสามารถพิเศษ"
            type="textarea"
          />
        </div>
      </div>
      <div class="row col-2 justify-center q-pt-md">
        <div class="containerimage row justify-center">
          <q-file
            borderless
            v-model="fileData"
            stack-label
            :readonly="statusEdit"
            @update:model-value="pickFile"
          >
            <q-img src="@/assets/avatar_user.jpg" class="col-12">
              <div class="overlay" v-if="!statusEdit">
                <q-icon name="mdi-camera" />
                <br />อัปเดต
              </div>
            </q-img>
          </q-file>
        </div>
        <div class="col-12 text-center" v-if="disabledPic">
          <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
            <q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
          </q-btn>
        </div>
      </div>
    </q-form>
  </q-card>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import type { PropType } from 'vue'
import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { file } from '@babel/types'

const mixin = useCounterMixin()
const { date2Thai, calAge } = mixin

const edit = ref<boolean>(false)
const informaData = ref<Information>(defaultInformation)
const provinceOptions = ref<DataOption[]>([])
const myform = ref<any>()
const imageUrl = ref<string | null>(null)
const disabledPic = ref<boolean>(false)
const fileData = ref<File | null>()
const props = defineProps({
  prefixOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  genderOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  bloodOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  statusOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  religionOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  provinceOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  statusEdit: {
    type: Boolean,
    required: true
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:statusEdit'])

onMounted(() => {
  //   fetchProvince()
})

const saveData = async () => {
  await myform.value.validate().then(async (success: boolean) => {
    if (success) {
    } else {
    }
  })
}

const changeBtn = async () => {
  if (edit.value == true) {
    if (props.statusEdit === true) {
      edit.value = false
      props.notiNoEdit()
    } else {
      emit('update:statusEdit', true)
    }
  } else {
    emit('update:statusEdit', false)
  }
}

const fetchProvince = async () => {
  //   //   loader.value = true;
  //   await http
  //     .get(config.API.province)
  //     .then((res) => {
  //       const data = res.data.result
  //       let option: DataOption[] = []
  //       //   console.log(data);
  //       data.map((r: any) => {
  //         option.push({ id: r.id.toString(), name: r.name.toString() })
  //       })
  //       provinceOptions.value = option
  //     })
  //     .catch((e: any) => {})
  //     .finally(() => {
  //       //   loader.value = false;
  //     })
}

const savePic = () => {
  disabledPic.value = false
}

const onFilePicked = () => {}

const pickFile = () => {
  disabledPic.value = true
}

const cancelData = () => {
  fileData.value = null
  disabledPic.value = false
}

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

<style>
.containerimage {
  position: relative;
  width: 100%;
}

.q-img {
  display: block;
  width: 160px;
  height: 170px;
  padding: 1%;
  border-radius: 3px;
  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.19);
}

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

.containerimage:hover .overlay {
  opacity: 1;
}
</style>
