<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";

import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { calculateAge } from "@/utils/function";
import http from "@/plugins/http";
import config from "@/app.config";

import type {
  DataOption,
  DataOptioninfo,
} from "@/modules/05_placement/interface/index/ProfileType";
import type {
  InformationOps,
  FormAddPerson,
} from "@/modules/05_placement/interface/index/ProfileType";

const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  date2Thai,
  success,
  dateToISO,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;

const age = ref<string | null>("");
const informaData = ref<FormAddPerson>({
  prefix: "",
  firstName: "",
  lastName: "",
  citizenId: "",
  birthDate: null,
  age: null,
  genderId: null,
  bloodId: null,
  nationality: null,
  ethnicity: null,
  statusId: null,
  religionId: null,
  tel: null,
  employeeType: null,
  employeeClass: null,
  profileType: null,
});

// รายการข้อมูลทั้งหมด
const Ops = ref<InformationOps>({
  prefixOps: [],
  prefixOldOps: [],
  genderOps: [],
  bloodOps: [],
  statusOps: [],
  religionOps: [],
  employeeClassOps: [],
  employeeTypeOps: [],
});
// ข้อมูลเมื่อเลือกแล้ว
const OpsFilter = ref<InformationOps>({
  prefixOps: [],
  prefixOldOps: [],
  genderOps: [],
  bloodOps: [],
  statusOps: [],
  religionOps: [],
  employeeClassOps: [],
  employeeTypeOps: [],
});

// รูป profile
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);

/**
 * ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)
 */
async function fetchPerson() {
  showLoader();
  await http
    .get(config.API.profileNewMetaMain)
    .then((res) => {
      const data = res.data.result;
      let optionbloodGroups: DataOption[] = [];
      data.bloodGroups.map((r: DataOptioninfo) => {
        optionbloodGroups.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      Ops.value.bloodOps = optionbloodGroups;
      OpsFilter.value.bloodOps = optionbloodGroups;

      let optiongenders: DataOption[] = [];
      data.genders.map((r: DataOptioninfo) => {
        optiongenders.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      Ops.value.genderOps = optiongenders;
      OpsFilter.value.genderOps = optiongenders;

      let optionprefixs: DataOption[] = [];
      optionprefixs = data.prefixs.map((v: any) => ({
        id: v.id,
        name: v.name,
      }));

      Ops.value.prefixOps = optionprefixs;
      OpsFilter.value.prefixOps = optionprefixs;

      let optionrelationships: DataOption[] = [];
      data.relationships.map((r: DataOptioninfo) => {
        optionrelationships.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      Ops.value.statusOps = optionrelationships;
      OpsFilter.value.statusOps = optionrelationships;

      let optionreligions: DataOption[] = [];
      data.religions.map((r: DataOptioninfo) => {
        optionreligions.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      Ops.value.religionOps = optionreligions;
      OpsFilter.value.religionOps = optionreligions;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function uploadImage(e: any) {
  const input = e.target.files;
  if (input.length > 0) {
    const url = URL.createObjectURL(input[0]);
    image.value = url;
    fileData.value = input[0];
  }
}

/**
 * ฟังก์ชันคลิกแก้ไขรูป profile
 */
function addNewImage() {
  inputImage.value.click();
}

/**
 * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
 * @param val คำค้นหา
 * @param update ฟังก์ชัน
 * @param refData ประเภทของตัวเลือก
 */
function filterSelector(val: string, update: Function, refData: string) {
  const newVal = val.toLowerCase();
  switch (refData) {
    case "prefixOps":
      update(() => {
        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
        );
      });
      break;
    case "genderOps":
      update(() => {
        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
        );
      });
      break;
    case "bloodOps":
      update(() => {
        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
        );
      });
      break;
    case "statusOps":
      update(() => {
        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
        );
      });
      break;
    case "religionOps":
      update(() => {
        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
        );
      });
      break;

    default:
      break;
  }
}

/**
 * ฟังก์ชันเช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
 */
function calculateMaxDate() {
  const today = new Date();
  today.setFullYear(today.getFullYear() - 18);
  return today;
}

/**
 * ฟังก์ชันยืนยันการบันทึกข้อมูล
 */
function onSubmit() {
  const formData = new FormData();
  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
  if (informaData.value.citizenId != undefined)
    formData.append("citizenId", informaData.value.citizenId);
  if (informaData.value.prefix != undefined)
    formData.append("prefix", informaData.value.prefix);
  if (informaData.value.firstName != undefined)
    formData.append("firstName", informaData.value.firstName);
  if (informaData.value.lastName != undefined)
    formData.append("lastName", informaData.value.lastName);
  if (informaData.value.genderId != undefined)
    formData.append("gender", informaData.value.genderId);
  if (informaData.value.nationality != undefined)
    formData.append("nationality", informaData.value.nationality);
  if (informaData.value.ethnicity != undefined)
    formData.append("race", informaData.value.ethnicity);
  if (informaData.value.religionId != undefined)
    formData.append("religion", informaData.value.religionId);
  if (informaData.value.birthDate != undefined)
    formData.append(
      "birthDate",
      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
    );
  if (informaData.value.bloodId != undefined)
    formData.append("bloodGroup", informaData.value.bloodId);
  if (informaData.value.statusId != undefined)
    formData.append("relationship", informaData.value.statusId);
  if (informaData.value.tel != undefined)
    formData.append("telephoneNumber", informaData.value.tel);
  if (informaData.value.employeeType != undefined)
    formData.append("employeeType", informaData.value.employeeType);
  if (informaData.value.employeeClass != undefined)
    formData.append("employeeClass", informaData.value.employeeClass);

  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.receiveData(), formData)
      .then(async () => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        clickBack();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(async () => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันกลับไปหน้ารายการรายการรับโอน
 */
function clickBack() {
  router.push("/placement/receive");
}

/**
 * ฟังก์ชันอัปเดทวันเดือนปีเกิด
 * @param v  วันเดือยปีเกิด
 */
function updateBirthDate(v: Date) {
  age.value = calculateAge(v);
}

/**
 * ทำงานเมื่อมีการเรียกใช้ Components
 */
onMounted(async () => {
  await fetchPerson();
});
</script>

<template>
  <div class="col-12 row">
    <div class="row col-12" style="padding-top: 80px">
      <div id="information" name="1" class="row col-12 information q-mt-sm">
        <!-- Header  -->
        <q-page-sticky
          position="top"
          expand
          class="bg-grey-2 text-white"
          style="z-index: 99; padding: 0% 1% 0% 1%"
        >
          <div
            class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
          >
            <q-btn
              flat
              round
              class="bg-teal-1 full-height"
              color="primary"
              icon="mdi-chevron-left"
              dense
              @click="router.push(`/placement/receive`)"
            >
            </q-btn>
            <q-avatar size="65px" rounded class="containerimage">
              <img
                v-if="image == null"
                src="@/assets/avatar_user.jpg"
                class="bg-grey-3"
                style="object-fit: cover"
              />
              <img :src="image" class="bg-grey-3" style="object-fit: cover" />
              <div
                class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
                @click="addNewImage()"
              >
                <q-icon name="mdi-camera" size="18px" color="blue">
                  <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
                </q-icon>

                <input
                  type="file"
                  style="display: none"
                  ref="inputImage"
                  accept="image/*"
                  @change="uploadImage"
                />
              </div>
            </q-avatar>

            <div class="row items-center text-dark q-ml-md">
              <div class="column">
                <div class="text-bold q-pb-xs text-name">
                  เพิ่มข้อมูลทะเบียนประวัติ
                </div>
                <div class="text-bold q-pb-xs text-sub">
                  ข้าราชการกทม. สามัญ
                </div>
              </div>
            </div>
            <q-space />
          </div>
        </q-page-sticky>

        <q-card flat bordered class="col-12 q-pa-sm">
          <q-form greedy @submit.prevent @validation-success="onSubmit">
            <!-- <HeaderTop
              header="ข้อมูลส่วนตัว"
              icon="mdi-account"
              class="q-px-lg q-pt-md"
            /> -->
            <div class="flex items-center">
              <div class="flex items-center">
                <q-icon
                  name="mdi-account"
                  size="1.5em"
                  color="grey-5"
                  class="q-mr-md"
                />
                <div class="text-bold text-subtitle2 col-12 row items-center">
                  ข้อมูลส่วนตัว
                </div>
              </div>
            </div>
            <q-card-section class="q-px-lg">
              <div class="row q-col-gutter-sm">
                <div class="col-3">
                  <q-input
                    bg-color="white"
                    outlined
                    v-model="informaData.citizenId"
                    label="เลขประจำตัวประชาชน"
                    class="inputgreen"
                    dense
                    lazy-rules
                    borderless
                    :rules="[
                      (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
                      (val: string) =>
                        val.length >= 13 ||
                        `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
                    ]"
                    maxlength="13"
                    hide-bottom-space
                    mask="#############"
                  />
                </div>
                <div class="col-3">
                  <q-select
                    bg-color="white"
                    v-model="informaData.prefix"
                    label="คำนำหน้าชื่อ"
                    outlined
                    dense
                    lazy-rules
                    class="inputgreen"
                    :options="Ops.prefixOps"
                    option-label="name"
                    option-value="name"
                    map-options
                    hide-bottom-space
                    :rules="[
                      (val:string) => {
                        return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
                      },
                    ]"
                    emit-value
                    use-input
                    hide-selected
                    fill-input
                    @filter="(inputValue:string,
                    doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
                    )"
                  />
                </div>
                <div class="col-3">
                  <q-input
                    bg-color="white"
                    outlined
                    v-model="informaData.firstName"
                    label="ชื่อ"
                    dense
                    lazy-rules
                    class="inputgreen"
                    borderless
                    :rules="[(val:string) => val.length > 0 || 'กรุณากรอกชื่อ']"
                    hide-bottom-space
                  />
                </div>
                <div class="col-3">
                  <q-input
                    bg-color="white"
                    outlined
                    v-model="informaData.lastName"
                    label="นามสกุล"
                    class="inputgreen"
                    dense
                    lazy-rules
                    borderless
                    :rules="[(val:string) => val.length > 0 || 'กรุณากรอกนามสกุล']"
                    hide-bottom-space
                  />
                </div>

                <div class="col-2">
                  <datepicker
                    autoApply
                    borderless
                    week-start="0"
                    :max-date="calculateMaxDate()"
                    :enableTimePicker="false"
                    v-model="informaData.birthDate"
                    :locale="'th'"
                    @update:model-value="updateBirthDate"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        for="inputDatereceive"
                        outlined
                        dense
                        hide-bottom-space
                        class="inputgreen"
                        :model-value="
                          informaData.birthDate != null
                            ? date2Thai(informaData.birthDate)
                            : null
                        "
                        label="วัน/เดือน/ปี เกิด"
                        :rules="[
                          (val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
                        ]"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            color="primary"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    readonly
                    class="inputgreen"
                    v-model="age"
                    label="อายุ"
                  />
                </div>
                <div class="col-2">
                  <q-select
                    dense
                    outlined
                    use-input
                    hide-selected
                    fill-input
                    clearable
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    input-debounce="0"
                    option-label="name"
                    option-value="name"
                    v-model="informaData.genderId"
                    class="inputgreen"
                    :options="Ops.genderOps"
                    label="เพศ"
                    @filter="(inputValue:string,
            doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
            )"
                  />
                </div>
                <div class="col-2">
                  <q-select
                    dense
                    outlined
                    use-input
                    hide-selected
                    fill-input
                    clearable
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    option-value="name"
                    option-label="name"
                    input-debounce="0"
                    class="inputgreen"
                    v-model="informaData.statusId"
                    :options="Ops.statusOps"
                    label="สถานภาพ"
                    @filter="(inputValue:string,
            doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
            )"
                  />
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    class="inputgreen"
                    v-model="informaData.nationality"
                    label="สัญชาติ"
                  />
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    class="inputgreen"
                    v-model="informaData.ethnicity"
                    label="เชื้อชาติ"
                  />
                </div>
                <div class="col-2">
                  <q-select
                    dense
                    outlined
                    use-input
                    hide-selected
                    fill-input
                    clearable
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    option-value="name"
                    option-label="name"
                    input-debounce="0"
                    v-model="informaData.religionId"
                    class="inputgreen"
                    :options="Ops.religionOps"
                    label="ศาสนา"
                    @filter="(inputValue:string,
            doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
            )"
                  />
                </div>
                <div class="col-2">
                  <q-select
                    dense
                    outlined
                    use-input
                    hide-selected
                    fill-input
                    clearable
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    option-value="name"
                    option-label="name"
                    input-debounce="0"
                    v-model="informaData.bloodId"
                    class="inputgreen"
                    :options="Ops.bloodOps"
                    label="หมู่เลือด"
                    @filter="(inputValue:string,
            doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
            )"
                  />
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    mask="##########"
                    class="inputgreen"
                    v-model="informaData.tel"
                    label="เบอร์โทร"
                  />
                </div>
              </div>
            </q-card-section>

            <q-separator />

            <q-card-actions align="right" class="bg-white text-teal">
              <q-btn label="บันทึก" color="secondary" type="submit"
                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
              >
            </q-card-actions>
          </q-form>
        </q-card>
      </div>
    </div>
  </div>
</template>

<style>
.image-size-default {
  height: 150px;
  max-width: 15vw;
}

.image-size-full {
  height: 160px;
  max-width: 15vw;
}

.border-green {
  border: 5px solid #52c688;
}

.area-div {
  background-color: transparent;
}

.text-header {
  font-size: 1.2em;
}

.containerimage {
  position: relative;
}

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

.overlay {
  background-color: #e4f2ffd2 !important;
  opacity: 0;
  padding: 2px !important;
}

.information:target {
  padding-top: 84px;
}

.border-custom {
  border: 0.5px solid #c3c3c3;
}

.bg-active-image {
  background-color: #52c688;
}

.text-name {
  font-size: 1.3em;
  overflow: hidden;
}

.text-sub {
  font-size: 1.2em;
  overflow: hidden;
  color: var(--q-primary);
}
</style>
