<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter, useRoute } from "vue-router";
// import { checkPermissionGet } from "@/utils/permissions";

/** importType*/
import type { PersonalImformation } from "@/components/information/interface/response/Information";
import type { Goverment } from "@/components/information/interface/response/Government";
import type { Avatar } from "@/components/information/interface/response/avatar";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

/** use*/

const mixin = useCounterMixin();
const $q = useQuasar();
const { messageError, date2Thai } = mixin;

const isEmployee = defineModel("isEmployee", { type: String });
const empType = ref<string>("officer");
/** props*/
const props = defineProps({
  id: {
    type: String,
    requier: true,
  },
  modal: {
    type: Boolean,
    requier: true,
  },
  type: { type: String, default: "" },
});

/** emit*/
const emit = defineEmits(["update:modal"]);

/** ตัวแปร*/
const modal = ref<boolean>(false);
const isloadInformation = ref<boolean>(true);
const isloadGoverment = ref<boolean>(true);
const retireDate = ref<Date>();
const avatar = reactive<Avatar>({
  avatar: "",
  fullname: "",
  position: "",
});
const imformation = reactive<PersonalImformation>({
  prefix: "",
  citizenId: "",
  firstName: "",
  lastName: "",
  birthDate: "",
  age: "",
  gender: "",
});
const goverment = reactive<Goverment>({
  oc: "",
  posNo: "",
  position: "",
  positionPathSide: "",
  positionLine: "",
  positionType: "",
  positionLevel: "",
  positionExecutive: "",
  positionExecutiveSide: "",
});

function calculateAge(birthDate: Date | null) {
  if (!birthDate) return null;
  const birthDateTimeStamp = new Date(birthDate).getTime();
  const now = new Date();
  const diff = now.getTime() - birthDateTimeStamp;

  const ageDate = new Date(diff);
  const years = ageDate.getUTCFullYear() - 1970;
  const months = ageDate.getUTCMonth();
  const days = ageDate.getUTCDate() - 1;
  const retire = new Date(birthDate);
  retire.setFullYear(retire.getFullYear() + 60);
  retireDate.value = retire;

  if (years > 60) {
    return "อายุเกิน 60 ปี";
  }

  return `${years} ปี ${months} เดือน ${days} วัน`;
}

/**
 * function เรียกข้อมูลส่วนตัว
 * @param id profileID
 */
async function fetchInformation(id: string) {
  isloadInformation.value = true;
  await http
    .get(
      config.API.orgProfileAdminById(
        id,
        `${empType.value == "employee" ? `-${empType.value}` : ""}`
      )
    )
    .then(async (res) => {
      const data = await res.data.result;
      imformation.prefix = data.prefix ? data.prefix : "-";
      imformation.citizenId = data.citizenId ? data.citizenId : "-";
      imformation.firstName = data.firstName ? data.firstName : "-";
      imformation.lastName = data.lastName ? data.lastName : "-";
      imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
      imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
      imformation.gender = data.gender ?? "-";
      avatar.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
      avatar.position = data.position ? data.position : "-";
      if (data.avatarName) {
        await fetchProfile(data.id as string, data.avatarName);
      } else {
        avatar.avatar = "";
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      isloadInformation.value = false;
    });
}

/**
 * function เรียกข้อมูลข้อมูลราชการ
 * @param id profileID
 */
async function fetchProfileGov(id: string) {
  isloadGoverment.value = true;
  await http
    .get(
      config.API.profileNewGovernmentCard(
        id,
        `${empType.value == "employee" ? `-${empType.value}` : ""}`
      )
    )
    .then(async (res) => {
      const data = await res.data.result;
      goverment.oc = data.org !== "" ? data.org : "-";
      goverment.posNo = data.posMasterNo !== "" ? data.posMasterNo : "-";
      goverment.position = data.position !== "" ? data.position : "-";
      goverment.positionPathSide =
        data.positionArea !== "" ? data.positionArea : "-";
      goverment.positionLine =
        data.positionField !== "" ? data.positionField : "-";
      goverment.positionType = data.posType !== "" ? data.posType : "-";
      goverment.positionLevel = data.posLevel !== "" ? data.posLevel : "-";
      goverment.positionExecutive =
        data.posExecutive !== null ? data.posExecutive : "-";
      goverment.positionExecutiveSide =
        data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      isloadGoverment.value = false;
    });
}

async function fetchProfile(id: string, avatarName: string) {
  await http
    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
    .then(async (res) => {
      avatar.avatar = await res.data.downloadUrl;
    });
}

watch(
  () => props.modal,
  async () => {
    modal.value = props.modal ? props.modal : false;
    if (modal.value) {
      if (props.id) {
        await Promise.all([
          fetchInformation(props.id),
          fetchProfileGov(props.id),
        ]);
      }
    }
  }
);

watch(modal, (newValue) => {
  if (!newValue) {
    emit("update:modal", false);
  }
});
</script>

<template>
  <q-dialog v-model="modal" position="right" :maximized="true" persistent>
    <q-card style="width: 420px; overflow: visible">
      <q-toolbar>
        <q-toolbar-title class="text-subtitle1 text-bold"
          >ทะเบียนประวัติ
        </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="emit('update:modal', false)"
          style="color: red; background-color: #ffdede"
        />
      </q-toolbar>

      <q-card-section class="col q-pt-none bg-grey-12">
        <div class="q-gutter-md">
          <div v-if="isloadInformation">
            <q-skeleton
              type="QAvatar"
              size="120px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-md"
            />
            <q-skeleton
              type="text"
              width="150px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-md"
            />
            <q-skeleton
              type="text"
              width="100px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-sm"
            />
          </div>
          <q-card v-else bordered class="text-center bg-grey-12">
            <div>
              <q-avatar size="120px" color="grey-4">
                <img
                  v-if="avatar.avatar"
                  :src="avatar.avatar"
                  class="bg-grey-3"
                  style="object-fit: cover"
                />
                <img
                  v-else
                  src="@/assets/avatar_user.jpg"
                  class="bg-grey-3"
                  style="object-fit: cover"
                />
              </q-avatar>
            </div>

            <div
              class="q-mt-md text-subtitle2 text-bold"
              style="font-size: 18px"
            >
              {{ avatar.fullname }}
            </div>
            <div
              v-if="avatar.position != '-'"
              class="q-mb-xs text-center text-grey"
            >
              {{ avatar.position }}
            </div>
          </q-card>

          <q-scroll-area style="height: 65vh; max-width: 100%">
            <div class="q-gutter-md q-pa-sm">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="q-pa-md">
                  <div class="text-weight-bold row items-center">
                    <q-icon name="mdi-account" color="grey-7" />
                    <span class="q-ml-md">ข้อมูลส่วนตัว </span>
                  </div>
                  <div v-if="isloadInformation" class="row q-pa-sm">
                    <div
                      v-for="n in 6"
                      :key="n"
                      class="col-xs-6 col-md-6 q-pa-sm"
                    >
                      <q-skeleton type="QInput" height="40px" />
                    </div>
                  </div>
                  <div v-else class="row q-pa-sm">
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          imformation.citizenId ? imformation.citizenId : '-'
                        "
                        label="เลขประจำตัวประชาชน"
                      ></q-input>
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          imformation.prefix ? imformation.prefix : '-'
                        "
                        label="คำนำหน้าชื่อ"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          imformation.firstName ? imformation.firstName : '-'
                        "
                        label="ชื่่อ"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          imformation.lastName ? imformation.lastName : '-'
                        "
                        label="นามสกุล"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          imformation.birthDate ? imformation.birthDate : '-'
                        "
                        label="วัน/เดือน/ปีเกิด"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          imformation.gender ? imformation.gender : '-'
                        "
                        label="เพศ"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.age ? imformation.age : '-'"
                        label="อายุ"
                      />
                    </div>
                  </div>
                </div>
              </q-card>

              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="q-pa-md">
                  <div class="text-weight-bold row items-center">
                    <q-icon name="mdi-account-tie" color="grey-7" />
                    <span class="q-ml-md">ข้อมูลราชการ </span>
                  </div>

                  <div v-if="isloadGoverment" class="row q-pa-sm">
                    <div
                      v-for="n in 9"
                      :key="n"
                      :class="
                        n !== 1
                          ? 'col-xs-6 col-md-6 q-pa-sm'
                          : 'col-xs-12 col-md-12 q-pa-sm'
                      "
                    >
                      <q-skeleton type="QInput" height="40px" />
                    </div>
                  </div>

                  <div v-else class="row q-pa-sm">
                    <div class="col-xs-12 col-md-12">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.oc === '' ? '-' : goverment.oc"
                        label="สังกัด"
                        autogrow
                      ></q-input>
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.posNo ? goverment.posNo : '-'"
                        label="ตำแหน่งเลขที่"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          goverment.position ? goverment.position : '-'
                        "
                        label="ตำแหน่ง"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        autogrow
                        :model-value="
                          goverment.positionPathSide
                            ? goverment.positionPathSide
                            : '-'
                        "
                        label="ด้าน/สาขา"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          goverment.positionLine ? goverment.positionLine : '-'
                        "
                        label="สายงาน"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          goverment.positionType ? goverment.positionType : '-'
                        "
                        label="ประเภทตำแหน่ง"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="
                          goverment.positionLevel
                            ? goverment.positionLevel
                            : '-'
                        "
                        label="ระดับตำแหน่ง"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        autogrow
                        :model-value="
                          goverment.positionExecutive
                            ? goverment.positionExecutive
                            : '-'
                        "
                        label="ตำแหน่งทางการบริหาร"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        autogrow
                        :model-value="
                          goverment.positionExecutiveSide
                            ? goverment.positionExecutiveSide
                            : '-'
                        "
                        label="ด้านทางการบริหาร"
                      />
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
          </q-scroll-area>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
