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

import { useRoute, useRouter } from "vue-router";
import {
  checkPermission,
  checkPermissionCreate,
  checkPermissionList,
} from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
import http from "@/plugins/http";
import config from "@/app.config";
import axios from "axios";
import genReport from "@/plugins/genreport";
import avatar from "@/assets/avatar_user.jpg";

/**
 * importType
 */
import type {
  DataOption,
  DataOptionSys,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";

/**
 * importComponents
 */
import CardNotPermission from "@/components/CardNotPermission.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue";

/**
 * use
 */
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const storeRegistry = useRegistryNewDataStore();
const {
  dialogRemove,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
  dateToISO,
  dialogMessageNotify,
  pathRegistryEmp,
} = useCounterMixin();

const isPermission = ref<boolean | null>(null); //สิทธิการเช้าถึงข้อมูล
const notPermissionMsg = ref<string>(""); //ข้อตวามไม่มีสิทธิ
const profileId = ref<string>(route.params.id.toString()); //id profile
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); //ประเภทข้าราชการ

/** ถึงเเก่กรรม */
const dialogPassaway = ref<boolean>(false); //แสดงฟอร์มถึงเเก่กรรม
const filePassaway = ref<any>(null); //แนบใบมรณบัตร
const deathCertificateNo = ref(""); //เลขที่ใบมรณบัตร
const dateDeath = ref<Date>(new Date()); //วันที่เสียชีวิต
const placeDeathCertificate = ref(""); //สถานที่ออกใบมรณบัตร
const reasonDeath = ref(""); //เหตุผลการเสียชีวิต

const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
//รายการเมนูออกคำสั่งข้าราชการ
const baseItemsMenu = ref<DataOptionSys[]>([
  {
    id: "1",
    name: "ช่วยราชการ",
    system: "SYS_TEMPDUTY",
  },
  {
    id: "2",
    name: "ส่งตัวกลับ",
    system: "SYS_TEMPDUTY2",
  },
  {
    id: "3",
    name: "แต่งตั้ง-เลื่อน-ย้าย",
    system: "SYS_PROMOTION_OFFICER",
  },
  {
    id: "4",
    name: "ถึงแก่กรรม",
    system: "SYS_PASSAWAY",
  },
  {
    id: "5",
    name: "ให้ออกจากราชการ",
    system: "SYS_DISMISS",
  },
  {
    id: "6",
    name: "อื่นๆ",
    system: "SYS_PLACEMENT_OTHER",
  },
]);

const itemsMenu = computed(() => {
  if (
    leaveReason.value ===
      "(พ้นจากราชการด้วยสาเหตุ: ได้รับโทษทางวินัย ให้ออกจากราชการไว้ก่อน)" ||
    leaveReason.value === "(พ้นจากราชการด้วยสาเหตุ: ลาออกจากราชการ)" ||
    leaveReason.value ===
      "(พ้นจากราชการด้วยสาเหตุ: ได้รับโทษทางวินัย พักจากราชการ)"
  ) {
    return (
      baseItemsMenu.value?.filter(
        (option: DataOptionSys) => option.system === "SYS_PLACEMENT_OTHER"
      ) || []
    );
  } else {
    return baseItemsMenu.value || [];
  }
});
//รายการเมนูออกคำสั่งลูกจ้าง
const itemsMenuEmployee = ref<DataOptionSys[]>([
  {
    id: "1",
    name: "ปรับระดับชั้นงาน - ย้าย",
    system: "SYS_PROMOTION_EMP",
  },
  {
    id: "2",
    name: "ถึงแก่กรรม",
    system: "SYS_PASSAWAY",
  },
]);

const uploadUrl = ref<string>(""); //URL อัปโหลดรูป
const fileName = ref<string>(""); //ชื่อไฟล์รูป
const profilePicture = ref<string>(""); //รูป
const profileFile = ref(); //ไฟล์
const input = document.createElement("input");
const activeImage = ref<any | null>(null);
const images = ref<any[]>([]);
const imagesAlldata = ref<any[]>([]);
input.type = "file";
input.accept = ".jpg,.png,.tif,.pic,.jfif";

input.addEventListener("change", (e) => {
  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
  uploadImg();
});

function selectFile() {
  input.click();
  imageActive(null);
}

function imageActive(n: any) {
  activeImage.value = n;
}

// ฟังก์ชันสำหรับปรับขนาดภาพ
function resizeImage(file: File): Promise<File> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const reader = new FileReader();

    reader.onload = (e) => {
      img.src = e.target!.result as string; // แปลงเป็น string
      img.onload = () => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        const width = 150;
        const height = 200;

        // ปรับขนาดภาพ
        canvas.width = width;
        canvas.height = height;

        if (ctx) {
          // ตั้งค่าสีพื้นหลังเป็นสีขาว
          ctx.fillStyle = "white";
          ctx.fillRect(0, 0, width, height); // วาดสี่เหลี่ยมสีขาวที่เต็ม canvas

          // ตรวจสอบว่า ctx ไม่เป็น null
          const imgAspectRatio = img.width / img.height;
          const targetAspectRatio = width / height;

          let drawWidth: number, drawHeight: number;

          if (imgAspectRatio > targetAspectRatio) {
            drawWidth = width;
            drawHeight = width / imgAspectRatio;
          } else {
            drawHeight = height;
            drawWidth = height * imgAspectRatio;
          }

          const xOffset = (width - drawWidth) / 2;
          const yOffset = (height - drawHeight) / 2;

          ctx.drawImage(img, xOffset, yOffset, drawWidth, drawHeight);

          // แปลง canvas เป็น Blob
          canvas.toBlob((blob) => {
            if (blob) {
              resolve(new File([blob], file.name, { type: file.type })); // สร้าง File ใหม่จาก Blob
            } else {
              reject(new Error("Failed to convert canvas to blob."));
            }
          }, "image/jpeg");
        } else {
          reject(new Error("Failed to get canvas context."));
        }
      };
      img.onerror = (err) => reject(err);
    };
    reader.readAsDataURL(file);
  });
}

const newProfileFile = ref<any>(null);

/**
 * ฟังก์ชันอัปโหลด
 */
async function uploadImg() {
  showLoader();
  newProfileFile.value = await resizeImage(profileFile.value);
  closeImage();
  http
    .post(config.API.orgProfileAvatarbyType(empType.value), {
      profileId: empType.value == "" ? profileId.value : undefined,
      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
    })
    .then(async (res) => {
      fileName.value = res.data.result.avatarName;
      await uploadProfile(res.data.result.avatar);
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * ฟังก์ชันสร้าง path อัปโหลไฟล์
 * @param path
 */
async function uploadProfile(path: string) {
  await http
    .post(config.API.fileByPath(path), {
      replace: true,
      fileList: [
        {
          fileName: fileName.value,
        },
      ],
    })
    .then(async (res) => {
      uploadUrl.value = res.data[fileName.value].uploadUrl;
      await uploadFileURL(uploadUrl.value, newProfileFile.value);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * ฟังก์ชันอัปโหลด
 * @param uploadUrl  path อัปโหลไฟล์
 * @param file ไฟล์
 */
async function uploadFileURL(uploadUrl: string, file: any) {
  showLoader();
  axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async () => {
      await fetchProfile(profileId.value);
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
 * @param id โปรไฟล์
 */
async function fetchProfile(id: string) {
  await http
    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
    .then(async (res) => {
      profilePicture.value = res.data.downloadUrl;
    })
    .catch(() => {
      profilePicture.value = avatar;
    });
}

const reasonStatus = ref<boolean>(false);
const leaveReason = ref<string>("");
const reasonOptions = ref<DataOption[]>([
  {
    id: "RETIRE",
    name: "เกษียณอายุราชการ",
  },
  {
    id: "RESIGN",
    name: "ลาออก",
  },
  {
    id: "TRANSFER",
    name: "ให้โอน",
  },
  {
    id: "DEATH",
    name: "ถึงแก่กรรม",
  },
  {
    id: "LAYOFF",
    name: "ให้ออก",
  },
  {
    id: "DISCHARGE",
    name: "ปลดออก",
  },
  {
    id: "DISMISS",
    name: "ไล่ออก",
  },
  {
    id: "OTHER",
    name: "อื่นๆ",
  },
]);

/**
 * ฟังก์ชันดึงข้อมูลส่วนต้ว
 */
async function fetchDataPersonal() {
  showLoader();
  await http
    .get(config.API.registryNewByProfileId(profileId.value, empType.value))
    .then(async (res) => {
      formDetail.value = res.data.result;

      storeRegistry.isLeave = res.data.result.isLeave;

      if (res.data.result.leaveReason) {
        // เหตุผลพ้นจากราชการต่อท้ายชื่อ
        const reason = reasonOptions.value.filter(
          (r: DataOption) => r.id == res.data.result.leaveReason
        );
        if (reason.length > 0) {
          leaveReason.value = `(พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
        } else if (
          res.data.result.leaveReason !== null &&
          res.data.result.leaveReason !== ""
        ) {
          leaveReason.value = `(พ้นจากราชการด้วยสาเหตุ: ${res.data.result.leaveReason})`;
        }
        reasonStatus.value = reason.length > 0 ? true : false;
      }

      fileName.value = res.data.result.avatarName;
      if (formDetail.value?.avatarName) {
        await fetchProfile(profileId.value);
      } else {
        profilePicture.value = avatar;
      }

      isPermission.value = true;
    })
    .catch((err) => {
      if (err.response.data.status == 403) {
        isPermission.value = false;
        notPermissionMsg.value = err.response.data.message;
      } else {
        messageError($q, err);
      }
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 2800);
    });
}

/**
 * ฟังก์ชันดาว์นโหลดไฟล์ "ก.พ.7/ก.ก.1 หรื่อ ประวัติแบบย่อ
 */
async function onClickDownloadKp7(type: string) {
  showLoader();
  const url =
    type === "FULL"
      ? empType.value
        ? config.API.profilFull(profileId.value, "profile-employee")
        : config.API.profilFull(profileId.value, "profile")
      : empType.value
      ? config.API.profilshort(profileId.value, "profile-employee")
      : config.API.profilshort(profileId.value, "profile");

  const fileName = type === "FULL" ? "ก.พ.7/ก.ก.1" : "ประวัติแบบย่อ";
  await http
    .get(url)
    .then(async (res) => {
      const data = await res.data.result;
      await genReport(data, `${fileName}`, type);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 *  ฟังก์ชันออกคำสั่งช่วยราชการ
 */
function helpPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenHelpGov, formData)
      .then(async () => {
        await router.push("/placement/help-government");
        await success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันออกคำสั่งส่งตัวกลับ
 */
function repatriationPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenRepatriation, formData)
      .then(async () => {
        await router.push("/placement/repatriate");
        await success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันออกคำสั่งแต่งตังเลื่อน
 */
function appointPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenAppointment, formData)
      .then(async () => {
        await router.push("/placement/appoint-promote");
        await success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันออกคำสั่งถึงเเก่กรรม
 */
function clickPassaway() {
  dialogPassaway.value = true;
  filePassaway.value = null;
  deathCertificateNo.value = "";
  dateDeath.value = new Date();
  placeDeathCertificate.value = "";
  reasonDeath.value = "";
}

/**
 * ฟังก์ชันออกคำสั่งให้ออกจากราชการ
 */
function outPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.retirementOut, formData)
      .then(async () => {
        await router.push("/retirement/dismiss-order");
        await success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันออกคำสั่งอื่นๆ
 */
function otherPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenOther, formData)
      .then(async () => {
        await router.push("/placement/other");
        await success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันออกคำสั่งปรับระดับชั้นงาน - ย้าย
 */
function appointEmployeePost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.appointEmployee(), formData)
      .then(async () => {
        await router.push("/placement/appoint-employee");
        await success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันยืนยันบันทึกข้อมูลถึงแก่กรรม
 */
function clickSaveDeceased() {
  dialogConfirm($q, async () => {
    showLoader();
    const formData = new FormData();
    formData.append("File", filePassaway.value);
    formData.append("Number", deathCertificateNo.value);
    formData.append("Date", dateToISO(dateDeath.value));
    formData.append("Location", placeDeathCertificate.value);
    formData.append("Reason", reasonDeath.value);
    formData.append("ProfileId", profileId.value);
    await http
      .post(config.API.listDeceased(), formData)
      .then(async () => {
        await router.push("/retirement/deceased");
        await success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันปืด popup ถึงแก่กรรม
 */
function closePassaway() {
  dialogPassaway.value = false;
}

/**
 * ฟังก์ชันเปืด popup เลือกรูปภาพ
 */
function openDialogImg() {
  dialogImage.value = true;
  getImage();
}

/**
 * ฟังก์ชันเรียกข้อมูลรูป
 */
function getImage() {
  showLoader();
  http
    .get(config.API.orgProfileAvatar + `/${profileId.value}`)
    .then(async (res) => {
      let data = res.data.result;
      imagesAlldata.value = data;

      for (let i = 0; i < data.length; i++) {
        await getImg(data[i]);
      }
    })
    .catch((e) => {
      // messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันเรียกข้อมูลรูป
 * @param dataList
 */
async function getImg(dataList: any) {
  await http
    .get(config.API.fileByPath(`${dataList.avatar}/${dataList.avatarName}`))
    .then((res) => {
      const data = res.data;
      const newData = {
        id: dataList.id,
        isActive: dataList.isActive,
        ...data,
      };
      images.value = [...images.value, newData];
    })
    .catch((e) => {
      // messageError($q, e);
    });
}

/**
 * ฟังก์ชันปิด Popup เลือกรูปภาพ
 */
function closeImage() {
  dialogImage.value = false;
  images.value = [];
  imagesAlldata.value = [];
}

/**
 * ฟังก์ชันยืนยันการลบรูป
 * @param id  รูปภาพ
 */
function deletePhoto(id: string) {
  dialogRemove(
    $q,
    () => {
      showLoader();
      http
        .delete(config.API.orgProfileAvatar + `/${id}`)
        .then((res) => {
          images.value = [];
          imagesAlldata.value = [];
          getImage();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่"
  );
}

/**
 * ฟังก์ชันยืนยันการเลือกรูป
 */
function selectAvatarHistory() {
  if (activeImage.value == null) {
    dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน");
    return;
  }
  const data = activeImage.value;
  showLoader();
  http
    .get(config.API.orgProfileAvatar + `/select/${profileId.value}/${data.id}`)
    .then(async () => {
      await fetchDataPersonal();
      await fetchProfile(profileId.value);
      closeImage();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * class รูป
 * @param n
 */
function imageClass(n: any) {
  const val = n == activeImage.value;
  return {
    "rounded-borders bg-grey-2 image-size-default": val,
    "rounded-borders bg-grey-2 image-size-full": !val,
  };
}

/**
 * class input
 * @param n
 */
function getClass(n: any) {
  const val = n == activeImage.value;
  return {
    "rounded-borders border-green shadow-1": val,
    "rounded-borders shadow-1": !val,
  };
}

onMounted(async () => {
  await fetchDataPersonal();
});
</script>

<template>
  <div class="row items-center q-gutter-sm q-mb-xs">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      {{
        route.name === "registry-employeeId"
          ? " ทะเบียนประวัติลูกจ้างชั่วคราว"
          : "ทะเบียนประวัติ"
      }}
    </div>
    <q-space />

    <div v-if="isPermission">
      <!-- list menu ของข้าราชการฯ -->

      <q-btn-dropdown
        v-if="
          (!storeRegistry.isLeave &&
            empType === '' &&
            checkPermissionList([
              'SYS_TEMPDUTY',
              'SYS_TEMPDUTY2',
              'SYS_PROMOTION_OFFICER',
              'SYS_PASSAWAY',
              'SYS_DISMISS',
              'SYS_PLACEMENT_OTHER',
            ])) ||
          leaveReason ===
            '(พ้นจากราชการด้วยสาเหตุ: ได้รับโทษทางวินัย ให้ออกจากราชการไว้ก่อน)' ||
          leaveReason === '(พ้นจากราชการด้วยสาเหตุ: ลาออกจากราชการ)' ||
          leaveReason ===
            '(พ้นจากราชการด้วยสาเหตุ: ได้รับโทษทางวินัย พักจากราชการ)'
        "
        size="md"
        rounded
        unelevated
        color="grey-4"
        text-color="red"
        icon="mdi-home-export-outline"
        dropdown-icon="mdi-chevron-down"
      >
        <q-list v-for="(item, index) in itemsMenu" :key="index">
          <q-item
            v-if="checkPermissionCreate(item.system)"
            clickable
            @click="
              item.name == 'ช่วยราชการ'
                ? helpPost()
                : item.name == 'ส่งตัวกลับ'
                ? repatriationPost()
                : item.name == 'แต่งตั้ง-เลื่อน-ย้าย'
                ? appointPost()
                : item.name == 'ถึงแก่กรรม'
                ? clickPassaway()
                : item.name == 'ให้ออกจากราชการ'
                ? outPost()
                : item.name == 'อื่นๆ'
                ? otherPost()
                : null
            "
            v-close-popup
          >
            <q-item-section>{{ item.name }}</q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>

      <!-- list menu ของลูกจ้างประจำ -->
      <q-btn-dropdown
        v-if="
          !storeRegistry.isLeave &&
          empType === '-employee' &&
          checkPermissionList(['SYS_PROMOTION_EMP', 'SYS_PASSAWAY'])
        "
        size="md"
        rounded
        unelevated
        color="grey-4"
        text-color="red"
        icon="mdi-home-export-outline"
        dropdown-icon="mdi-chevron-down"
      >
        <q-list v-for="item in itemsMenuEmployee" :key="item.id">
          <q-item
            v-if="checkPermissionCreate(item.system)"
            clickable
            @click="
              item.name == 'ปรับระดับชั้นงาน - ย้าย'
                ? appointEmployeePost()
                : item.name == 'ถึงแก่กรรม'
                ? clickPassaway()
                : null
            "
            v-close-popup
          >
            <q-item-section>{{ item.name }}</q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>

      <q-btn
        v-if="empType !== '-temp'"
        unelevated
        round
        color="grey-4"
        text-color="primary"
        icon="mdi-file-eye-outline"
        size="md"
      >
        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
        <q-menu>
          <q-list style="min-width: 130px">
            <q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
              <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickDownloadKp7('SHORT')"
            >
              <q-item-section class="text-primary"
                >ประวัติแบบย่อ</q-item-section
              >
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>
  </div>

  <div v-if="isPermission">
    <q-card class="my-card" flat bordered>
      <q-card-section>
        <div class="col row items-center">
          <div class="row col-12">
            <div class="col" style="padding-left: 13%">
              <div class="col-12 text-primary">
                <h2
                  class="title q-ma-none q-pa-none"
                  v-if="
                    formDetail && formDetail.firstName && formDetail.lastName
                  "
                >
                  {{
                    `${
                      formDetail.rank
                        ? formDetail.rank
                        : formDetail.prefix == "ไม่ระบุคำนำหน้าชื่อ"
                        ? ""
                        : formDetail.prefix ?? ""
                    }${formDetail.firstName} ${formDetail.lastName}`
                  }}
                  <span class="text-red"> {{ leaveReason }}</span>
                </h2>
              </div>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-section style="padding: 0px">
        <div
          class="absolute"
          style="top: 0; left: 12px; transform: translateY(-50%)"
        >
          <q-avatar size="90px" class="bg-grey-2">
            <q-img :src="profilePicture" />
          </q-avatar>
          <q-btn
            v-if="
              !storeRegistry.isLeave && checkPermission($route)?.attrIsUpdate
            "
            round
            text-color="edit"
            icon="mdi-pencil"
            @click="openDialogImg"
            size="sm"
            unelevated
            class="bg-white btnEditImg"
          >
            <q-tooltip>แก้ไขรูปโปรไฟล์</q-tooltip>
          </q-btn>
        </div>

        <div class="row items-center bg-toolbar">
          <div class="row col-12" style="padding-left: 14%">
            <div class="col-4">
              <div class="col-sm-3 col-md-3">
                <div class="col text-grey-6 text-caption">
                  {{ empType === "" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง" }}
                </div>
                <div class="col">{{ formDetail?.position || "-" }}</div>
              </div>
            </div>
            <div class="col-4">
              <div class="col-sm-3 col-md-3">
                <div class="col text-grey-6 text-caption">
                  {{ empType === "" ? "ตำแหน่งประเภท" : "กลุ่มงาน" }}
                </div>
                <div class="col">
                  {{ formDetail?.posType?.posTypeName || "-" }}
                </div>
              </div>
            </div>
            <div class="col-4">
              <div class="col-sm-3 col-md-3">
                <div class="col text-grey-6 text-caption">
                  {{ empType === "" ? "ระดับ" : "ระดับชั้นงาน" }}
                </div>
                <div class="col">
                  {{
                    `${
                      empType === ""
                        ? ""
                        : formDetail?.posType?.posTypeShortName
                        ? formDetail?.posType?.posTypeShortName
                        : ""
                    } ${
                      formDetail?.posLevel?.posLevelName
                        ? formDetail?.posLevel?.posLevelName
                        : "-"
                    }`
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card-section>

      <q-separator />
    </q-card>

    <q-card bordered class="q-mt-md rounded">
      <TabMain :fetchDataPersonal="fetchDataPersonal" />
    </q-card>
  </div>
  <div v-else-if="isPermission !== null && !isPermission">
    <CardNotPermission :message="notPermissionMsg" />
  </div>

  <!-- Dialog แนบใบมรณบัตร -->
  <q-dialog v-model="dialogPassaway" persistent>
    <q-card style="min-width: 600px">
      <q-form ref="myForm">
        <q-card-section class="flex justify-between" style="padding: 0">
          <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
        </q-card-section>

        <q-separator />
        <q-card-section class="q-pa-md row q-col-gutter-sm">
          <q-file
            class="col-12 col-sm-6 col-md-5 inputgreen"
            outlined
            dense
            v-model="filePassaway"
            label="แนบใบมรณบัตร"
            hide-bottom-space
            lazy-rules
            accept=".pdf"
          >
            <q-separator />
            <template v-slot:prepend>
              <q-icon name="attach_file" />
            </template>
          </q-file>
          <q-input
            class="col-12 col-sm-6 col-md-7 inputgreen"
            dense
            outlined
            v-model="deathCertificateNo"
            label="เลขที่ใบมรณบัตร"
          />

          <datepicker
            class="col-12 col-sm-6 col-md-5 inputgreen"
            menu-class-name="modalfix"
            v-model="dateDeath"
            :locale="'th'"
            autoApply
            borderless
            :enableTimePicker="false"
            week-start="0"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                outlined
                dense
                hide-bottom-space
                class="full-width datepicker"
                :model-value="dateDeath != null ? date2Thai(dateDeath) : null"
                :label="`${'วันที่เสียชีวิต'}`"
                :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>

          <q-input
            class="col-12 col-sm-6 col-md-7 inputgreen"
            dense
            outlined
            v-model="placeDeathCertificate"
            label="สถานที่ออกใบมรณบัตร"
          />
          <q-input
            class="col-12 inputgreen"
            dense
            outlined
            v-model="reasonDeath"
            label="เหตุผลการเสียชีวิต"
            type="textarea"
          />
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn
            label="บันทึก"
            color="public"
            @click="clickSaveDeceased"
            :disable="
              filePassaway === null ||
              deathCertificateNo === '' ||
              placeDeathCertificate === '' ||
              reasonDeath === ''
            "
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <!-- Dialog เลือก Image -->
  <q-dialog v-model="dialogImage" persistent>
    <q-card style="width: 100vw; max-width: 60vw">
      <DialogHeader
        :tittle="'เลือกรูปภาพ (150 x 200 px)'"
        :close="closeImage"
      />

      <q-separator />
      <q-card-section class="col-12 row">
        <div
          class="row wrap items-start col-12 q-col-gutter-sm"
          style="height: 320px; overflow: auto"
        >
          <div class="col-3" @click="selectFile">
            <div
              style="
                height: 160px;
                max-width: 15vw;
                display: flex !important;
                justify-content: center;
                align-items: center;
              "
              class="column rounded-borders cursor-pointer bg-active-image text-white"
            >
              <q-icon name="add" size="60px" color="white" />
              <strong>อัปโหลดรูปภาพ</strong>
            </div>
          </div>
          <div
            v-for="n in images"
            :key="n"
            class="col-3"
            @click="imageActive(n)"
          >
            <div :class="getClass(n)">
              <q-img
                v-if="n.downloadUrl != null"
                :src="n.downloadUrl"
                :class="imageClass(n)"
              >
                <div
                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
                  style="padding: 5px"
                >
                  {{ date2Thai(n.createdAt) }}

                  <q-btn
                    v-if="!n.isActive"
                    icon="delete"
                    unelevated
                    dense
                    @click="deletePhoto(n.id)"
                    class="bg-white"
                    style="color: #ff8080"
                  >
                    <q-tooltip>ลบรูปภาพ</q-tooltip>
                  </q-btn>
                </div>
              </q-img>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn @click="selectAvatarHistory" color="public" label="เลือกรูปภาพ">
          <q-tooltip>เลือกรูปภาพ</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped>
h2.title {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 500;
}

.subtitle {
  font-size: 1rem;
  color: #34373c;
}

.absolute-center-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.rounded {
  border-radius: 10px;
}

.bg-toolbar {
  background-color: #f2fbfa;
  height: 60px;
}
.btnEditImg {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid #ededed;
}

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

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

.image-size-full {
  height: 160px;
  max-width: 15vw;
}
.border-green {
  border: 5px solid #52c688;
  border-radius: 8px;
}
</style>
