<!-- หน้า รายละเอียดของ -->
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";

import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";

import {
  AddressDataDefualt,
  FamilyDataDefualt,
} from "@/modules/05_placement/interface/index/Main";

import type {
  Property,
  PointExam,
  Education,
  Family,
  Address,
  Certificate,
} from "@/modules/05_placement/interface/index/Main";

import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";

const $q = useQuasar(); // show dialog
const router = useRouter();
const store = useDataStore();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, messageError } = mixin;
const { changeTab } = store;
const statusEdit = ref<boolean>(false);
const profileType = ref<string>("");

const route = useRoute();
const examId = ref<string>(
  route.params.personalId ? route.params.personalId.toString() : ""
);

const ExamDataDefualt: PointExam = {
  pointA: 0,
  pointB: 0,
  pointC: 0,
  pointTotalA: 0,
  pointTotalB: 0,
  pointTotalC: 0,
  point: 0,
  pointTotal: 0,
  examNumber: 0,
  examRound: 0,
  pass: "",
};

const InformationDataDefualt: Information = {
  idCard: "",
  prefix: "",
  prefixId: "",
  fullName: "",
  firstname: "",
  lastname: "",
  nationality: "",
  race: "",
  dateOfBirth: new Date(),
  age: "",
  telephone: "",
  gender: "",
  genderId: "",
  relationship: "",
  relationshipId: "",
  bloodGroup: "",
  bloodGroupId: "",
  religion: "",
  religionId: "",
};

const personalData = ref({
  id: "",
  fullName: "",
});
const QualificationData = ref<Property[]>([]);
const ExamData = ref<PointExam>(ExamDataDefualt);
const InformationData = ref<Information>(InformationDataDefualt);
const EducationData = ref<Education[]>([]);
const FamilyData = ref<Family>(FamilyDataDefualt);
const AddressData = ref<Address>(AddressDataDefualt);
const CertificateData = ref<Certificate[]>([]);

onMounted(async () => {
  //   await checkProfileData();
  await fetchData();
  await changeTab("information");
});

const guidCheck = (id: string) => {
  if (id == "00000000-0000-0000-0000-000000000000") {
    return null;
  }
  return id;
};

const fetchData = async () => {
  showLoader();
  await http
    .get(config.API.placementPersonalId(examId.value))
    .then((res: any) => {
      const data = res.data.result;
      //   data.value = data;
      //   console.log(data);
      personalData.value.fullName = data.fullName;
      personalData.value.id = data.personalId;

      InformationData.value.idCard = data.idCard;
      InformationData.value.fullName = data.fullName;
      InformationData.value.firstname = data.firstname;
      InformationData.value.lastname = data.lastname;
      InformationData.value.nationality = data.nationality;
      InformationData.value.race = data.race;
      InformationData.value.genderId = guidCheck(data.genderId) ?? "";
      InformationData.value.prefixId = guidCheck(data.prefixId) ?? "";
      InformationData.value.relationshipId =
        guidCheck(data.relationshipId) ?? "";
      InformationData.value.religionId = guidCheck(data.religionId) ?? "";
      InformationData.value.bloodGroupId = guidCheck(data.bloodGroupId) ?? "";
      InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
      InformationData.value.age = data.age;
      InformationData.value.telephone = data.telephone;

      AddressData.value.registAddress = data.registAddress ?? "";
      AddressData.value.currentAddress = data.currentAddress ?? "";
      AddressData.value.registSame = data.registSame ? "1" : "0";
      AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
      AddressData.value.registSubDistrictId =
        guidCheck(data.registSubDistrictId) ?? "";
      AddressData.value.registZipCode = data.registZipCode ?? "";
      AddressData.value.registDistrict = data.registDistrict ?? "";
      AddressData.value.registDistrictId =
        guidCheck(data.registDistrictId) ?? "";
      AddressData.value.registProvince = data.registProvince ?? "";
      AddressData.value.registProvinceId =
        guidCheck(data.registProvinceId) ?? "";
      AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
      AddressData.value.currentSubDistrictId =
        guidCheck(data.currentSubDistrictId) ?? "";
      AddressData.value.currentZipCode = data.currentZipCode ?? "";
      AddressData.value.currentDistrict = data.currentDistrict ?? "";
      AddressData.value.currentDistrictId =
        guidCheck(data.currentDistrictId) ?? "";
      AddressData.value.currentProvince = data.currentProvince ?? "";
      AddressData.value.currentProvinceId =
        guidCheck(data.currentProvinceId) ?? "";

      FamilyData.value.couple = data.couple ? "1" : "0";
      FamilyData.value.marryPrefix = data.marryPrefix ?? "";
      FamilyData.value.marryPrefixId = guidCheck(data.marryPrefixId) ?? "";
      FamilyData.value.marryFirstName = data.marryFirstName ?? "";
      FamilyData.value.marryLastName = data.marryLastName ?? "";
      FamilyData.value.marryOccupation = data.marryOccupation ?? "";
      FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
      FamilyData.value.fatherPrefixId = guidCheck(data.fatherPrefixId) ?? "";
      FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
      FamilyData.value.fatherLastName = data.fatherLastName ?? "";
      FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
      FamilyData.value.motherPrefix = data.motherPrefix ?? "";
      FamilyData.value.motherPrefixId = guidCheck(data.motherPrefixId) ?? "";
      FamilyData.value.motherFirstName = data.motherFirstName ?? "";
      FamilyData.value.motherLastName = data.motherLastName ?? "";
      FamilyData.value.motherOccupation = data.motherOccupation ?? "";

      ExamData.value.pointA = data.pointA;
      ExamData.value.pointB = data.pointB;
      ExamData.value.pointC = data.pointC;
      ExamData.value.point = data.point;
      ExamData.value.pointTotalA = data.pointTotalA;
      ExamData.value.pointTotalB = data.pointTotalB;
      ExamData.value.pointTotalC = data.pointTotalC;
      ExamData.value.pointTotal = data.pointTotal;
      ExamData.value.examNumber = data.examNumber;
      ExamData.value.examRound = data.examRound;
      ExamData.value.pass = data.pass;

      QualificationData.value = data.isProperty;

      let listRow: Education[] = [];
      data.education.map((row: any) => {
        listRow.push({
          id: guidCheck(row.id) ?? "",
          educationLevel: row.educationLevel ?? "",
          educationLevelId: guidCheck(row.educationLevelId) ?? "",
          institute: row.institute ?? "",
          degree: row.degree ?? "",
          field: row.field ?? "",
          gpa: row.gpa ?? "",
          country: row.country ?? "",
          duration: row.duration ?? "",
          other: row.other ?? "",
          fundName: row.fundName ?? "",
          durationYear: row.durationYear ?? 0,
          finishDate: row.finishDate ?? new Date(),
          isDate: row.isDate ? "true" : "false",
          startDate: row.startDate ? new Date(row.startDate) : new Date(),
          endDate: row.endDate ? new Date(row.endDate) : new Date(),
          positionPath: row.positionPath ?? "",
          isEducation: row.isEducation ? true : false,
        });
      });
      EducationData.value = listRow;

      let listCert: Certificate[] = [];

      data.certificates.map((row: any) => {
        listCert.push({
          id: guidCheck(row.id) ?? "",
          certificateNo: guidCheck(row.certificateNo) ?? "",
          issuer: row.issuer ?? "",
          issueDate: new Date(row.issueDate) ?? new Date(),
          expireDate: new Date(row.expireDate) ?? new Date(),
          certificateType: row.certificateType ?? "",
        });
      });
      CertificateData.value = listCert;
    })
    .catch((e: any) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
    <div class="header-text">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      รายละเอียดของ {{ personalData.fullName }}
    </div>
  </div>
  <div class="q-pb-lg">
    <q-card class="row q-pb-lg">
      <div id="information" name="1" class="col-12 q-pa-sm">
        <Informationvue
          v-model:statusEdit="statusEdit"
          v-model:data="InformationData"
          :fetch="fetchData"
        />
        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
        <Addressvue
          v-model:statusEdit="statusEdit"
          v-model:data="AddressData"
          :fetch="fetchData"
        />
      </div>

      <div id="family" name="10" class="col-12 q-pa-sm">
        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
        <Familyvue
          v-model:statusEdit="statusEdit"
          v-model:data="FamilyData"
          :fetch="fetchData"
        />
      </div>

      <div id="certicate" name="2" class="col-12 q-pa-sm">
        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
        <Certicate
          v-model:statusEdit="statusEdit"
          :profileType="profileType"
          v-model:data="CertificateData"
          :fetch="fetchData"
        />
      </div>

      <div id="education" name="3" class="col-12 q-pa-sm">
        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
        <EducationVue
          v-model:statusEdit="statusEdit"
          v-model:data="EducationData"
          :fetch="fetchData"
        />
      </div>

      <div id="examresult" name="4" class="col-12 q-pa-sm">
        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
        <ExamResult v-model:data="ExamData" />
      </div>

      <div id="qualification" name="5" class="col-12 q-pa-sm">
        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
        <Qualification
          v-model:statusEdit="statusEdit"
          v-model:data="QualificationData"
          :fetch="fetchData"
        />
      </div>
    </q-card>
  </div>
</template>
<style lang="scss" scoped>
.header-text {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.0025em;
  color: #35373c;
}

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

.horizontal-line {
  background-color: #f4f4f4;
  height: 5px;
}
</style>
