<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** 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 { showLoader, hideLoader, messageError, date2Thai } = mixin;

/** props*/
const props = defineProps({
  id: {
    type: String,
    requier: true,
  },
  modal: {
    type: Boolean,
    requier: true,
  },
});

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

/** interface*/
interface StatusLoad {
  val: boolean;
  val2: boolean;
  val3: boolean;
}

/** ตัวแปร*/
const modal = ref<boolean>(false);
const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
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 เรียกข้อมูลรูปภาพ
 * @param id profileID
 */
async function fetchAvatar(id: string) {
  showLoader();
  await http
    .get(config.API.profileAvatarId(id))
    .then((res) => {
      const data = res.data.result;
      avatar.avatar = data.avatar;
      avatar.fullname = data.fullname;
      avatar.position = data.position ?? "-";
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      statusLoad.value.val = true;
      loaderFunction();
    });
}

/**
 * function เรียกข้อมูลส่วนตัว
 * @param id profileID
 */
async function fetchInformation(id: string) {
  showLoader();
  await http
    .get(config.API.profileInforId(id))
    .then((res) => {
      const data = res.data.result;
      imformation.prefix = data.prefix;
      imformation.citizenId = data.citizenId;
      imformation.firstName = data.firstName;
      imformation.lastName = data.lastName;
      imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "";
      imformation.age = data.age;
      imformation.gender = data.gender;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      statusLoad.value.val2 = true;
      loaderFunction();
    });
}

/**
 * function เรียกข้อมูลข้อมูลราชการ
 * @param id profileID
 */
async function fetchProfileGov(id: string) {
  showLoader();
  await http
    .get(config.API.profileGovId(id))
    .then((res) => {
      const data = res.data.result;
      goverment.oc = data.oc ?? "-";
      goverment.posNo = data.posNo ?? "-";
      goverment.position = data.position ?? "-";
      goverment.positionPathSide = data.positionPathSide ?? "-";
      goverment.positionLine = data.positionLine ?? "-";
      goverment.positionType = data.positionType ?? "-";
      goverment.positionLevel = data.positionLevel ?? "-";
      goverment.positionExecutive = data.positionExecutive ?? "-";
      goverment.positionExecutiveSide = data.positionExecutiveSide ?? "-";
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      statusLoad.value.val3 = true;
      loaderFunction();
    });
}

/** functoion เช็คการโหลดของข้อมูล*/
function loaderFunction() {
  const allTrue = Object.values(statusLoad.value).every((val) => val);
  allTrue && hideLoader();
}

function redirecToRegistry() {
  window.open(`/registry/${props.id}`, "_blank");
  modal.value = false;
}

watch(
  () => props.modal,
  async () => {
    modal.value = props.modal ? props.modal : false;
    modal.value &&
      props.id &&
      (await fetchAvatar(props.id),
      await fetchInformation(props.id),
      await fetchProfileGov(props.id));
  }
);

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

<template>
  <q-dialog v-model="modal" position="right" :maximized="true">
    <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>
        <div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
        <q-space />

      </q-card-section> -->

      <q-card-section class="col q-pt-none bg-grey-12">
        <div class="q-gutter-md">
          <q-card 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>
            <div class="q-mt-md">
              <q-btn
                class="bg-white"
                outline
                rounded
                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
                color="secondary"
                @click.prevent="redirecToRegistry"
              />
            </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 class="row q-pa-sm">
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.citizenId"
                        label="เลขประจำตัวประชาชน"
                      ></q-input>
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.prefix"
                        label="คำนำหน้าชื่อ"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.firstName"
                        label="ชื่่อ"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.lastName"
                        label="นามสกุล"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.birthDate"
                        label="วัน/เดือน/ปีเกิด"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="imformation.gender"
                        label="เพศ"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="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 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"
                        label="ตำแหน่งเลขที่"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.position"
                        label="ตำแหน่ง"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.positionPathSide"
                        label="ด้าน/สาขา"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.positionLine"
                        label="สายงาน"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.positionType"
                        label="ประเภทตำแหน่ง"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.positionLevel"
                        label="ระดับตำแหน่ง"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.positionExecutive"
                        label="ตำแหน่งทางการบริหาร"
                      />
                    </div>
                    <div class="col-xs-6 col-md-6">
                      <q-input
                        borderless
                        readonly
                        :model-value="goverment.positionExecutiveSide"
                        label="ด้านตำแหน่งทางการบริหาร"
                      />
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
          </q-scroll-area>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
