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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";

import type {
  ProfileAppointment,
  FormDataGovernment,
} from "@/modules/10_registry/interface/index/Main";

/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import GovernmentSkeleton from "@/modules/10_registry/components/skeleton/Government.vue";

const $q = useQuasar();
const dataPerson = useDataStore();
const { messageError, date2Thai, dateToISO } = useCounterMixin();

const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดประวัติข้อมูล
const rowsHistory = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
const rowsHistoryData = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
const modalHistory = ref<boolean>(false); //สถานะการเปิด modal ประวัติข้อมูล

const formData = reactive<FormDataGovernment>({
  org: "",
  positionField: "",
  position: "",
  posLevel: null,
  posMasterNo: "",
  posType: null,
  posExecutive: "",
  positionArea: "",
  positionExecutiveField: "",
  dateLeave: null,
  dateRetireLaw: null,
  govAge: {
    year: 0,
    month: 0,
    day: 0,
  },
  dateAppoint: null,
  dateStart: null,
  govAgeAbsent: 0,
  govAgePlus: 0,
  reasonSameDate: "",
});

const visibleColumnsHistory = ref<string[]>([
  "oc",
  "position",
  "positionPathSide",
  "posNo",
  "positionLine",
  "positionType",
  "positionLevel",
  "positionExecutive",
  "positionExecutiveSide",
  "dateAppoint",
  "dateStart",
  "retireDate",
  "govAge",
  "govAgeAbsent",
  "govAgePlus",
  "reasonSameDate",
  "lastUpdateFullName",
  "lastUpdatedAt",
]);

const columnsHistory = ref<QTableProps["columns"]>([
  {
    name: "dateAppoint",
    align: "left",
    label: "วันที่บรรจุ",
    sortable: true,
    field: "dateAppoint",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateStart",
    align: "left",
    label: "เริ่มปฎิบัติราชการ",
    sortable: true,
    field: "dateStart",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "reasonSameDate",
    align: "left",
    label: "เหตุผลกรณีไม่ตรงวัน",
    sortable: true,
    field: "reasonSameDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "lastUpdateFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "lastUpdateFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "lastUpdatedAt",
    align: "left",
    label: "วันที่แก้ไข",
    sortable: true,
    field: "lastUpdatedAt",
    format: (v) => date2Thai(v, false, true),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/** ไม่เเน่ใจ ใช้เเบบไหน คอมเม้นไว้ก่อน */
// const columnsHistory = ref<QTableProps["columns"]>([
//   {
//     name: "oc",
//     align: "left",
//     label: "สังกัด",
//     sortable: true,
//     field: "oc",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "positionPathSide",
//     align: "left",
//     label: "ตำแหน่ง",
//     sortable: true,
//     field: "positionPathSide",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "position",
//     align: "left",
//     label: "ด้าน/สาขา",
//     sortable: true,
//     field: "position",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "posNo",
//     align: "left",
//     label: "ตำแหน่งเลขที่",
//     sortable: true,
//     field: "posNo",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "positionLine",
//     align: "left",
//     label: "สายงาน",
//     sortable: true,
//     field: "positionLine",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "positionType",
//     align: "left",
//     label: "ประเภท",
//     sortable: true,
//     field: "positionType",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "positionLevel",
//     align: "left",
//     label: "ระดับ",
//     sortable: true,
//     field: "positionLevel",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "positionExecutive",
//     align: "left",
//     label: "ตำแหน่งทางการบริหาร",
//     sortable: true,
//     field: "positionExecutive",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "positionExecutiveSide",
//     align: "left",
//     label: "ด้านทางการบริหาร",
//     sortable: true,
//     field: "positionExecutiveSide",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "dateAppoint",
//     align: "left",
//     label: "วันที่บรรจุ",
//     sortable: true,
//     field: "dateAppoint",
//     format: (v) => date2Thai(v),
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "dateStart",
//     align: "left",
//     label: "เริ่มปฎิบัติราชการ",
//     sortable: true,
//     field: "dateStart",
//     format: (v) => date2Thai(v),
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "retireDate",
//     align: "left",
//     label: "วันเกษียณอายุ",
//     sortable: true,
//     field: "retireDate",
//     format: (v) => date2Thai(v),
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "govAge",
//     align: "left",
//     label: "อายุราชการ",
//     sortable: true,
//     field: "govAge",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "govAgeAbsent",
//     align: "left",
//     label: "ขาดราชการ",
//     sortable: true,
//     field: "govAgeAbsent",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "govAgePlus",
//     align: "left",
//     label: "อายุราชการเกื้อกูล",
//     sortable: true,
//     field: "govAgePlus",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "reasonSameDate",
//     align: "left",
//     label: "เหตุผลกรณีไม่ตรงวัน",
//     sortable: true,
//     field: "reasonSameDate",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "lastUpdateFullName",
//     align: "left",
//     label: "ผู้ดำเนินการ",
//     sortable: true,
//     field: "lastUpdateFullName",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
//   {
//     name: "lastUpdatedAt",
//     align: "left",
//     label: "วันที่แก้ไข",
//     sortable: true,
//     field: "lastUpdatedAt",
//     format: (v) => date2Thai(v),
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//     sort: (a: string, b: string) =>
//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
//   },
// ]);
const checkType = ref<boolean>(
  dataPerson.officerType == "OFFICER" ? true : false
);

/** ฟังก์ชันดึงข้อมูล */
async function getData() {
  isLoading.value = true;
  await http
    .get(config.API.dataUserGovernmentByType(link.value))
    .then((res) => {
      const data = res.data.result;
      formData.org = data.org;
      formData.positionField = data.positionField;
      formData.position = data.position;
      formData.posLevel = data.posLevel;
      formData.posMasterNo = data.posMasterNo;
      formData.posType = data.posType;
      formData.posExecutive = data.posExecutive;
      formData.positionArea = data.positionArea;
      formData.positionExecutiveField = data.positionExecutiveField;
      formData.dateLeave = data.dateLeave;
      formData.dateRetireLaw = data.dateRetireLaw;

      formData.govAge = data.govAge;
      formData.dateAppoint = data.dateAppoint;
      formData.dateStart = data.dateStart;
      formData.govAgeAbsent = data.govAgeAbsent;
      formData.govAgePlus = data.govAgePlus;
      formData.reasonSameDate = data.reasonSameDate;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

/** ฟังก์ชันเปิด modal ประวัติข้อมูล */
function onHistory() {
  modalHistory.value = true;
}

/** ฟังก์ชันดึงประวัติข้อมูลราชการ */
async function getHistory() {
  isLoadingHistory.value = true;
  rowsHistory.value = [];
  rowsHistoryData.value = [];
  const url =
    dataPerson.officerType == "OFFICER"
      ? config.API.dataUserGovernmentHistory("")
      : config.API.dataUserGovernmentHistory("-employee");
  await http
    .get(url)
    .then((res) => {
      const data = res.data.result;
      rowsHistory.value = data;
      rowsHistoryData.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoadingHistory.value = false;
    });
}

onMounted(async () => {
  link.value = await dataPerson.getProFileType();
  await getData();
});
</script>
<template>
  <div class="col-12">
    <q-toolbar class="q-px-none">
      <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลราชการ</span>
      <q-space />
      <q-btn
        icon="mdi-history"
        color="info"
        flat
        dense
        round
        size="14px"
        :isLoading="isLoading"
        @click="onHistory"
      >
        <q-tooltip>ประวัติข้อมูลราชการ</q-tooltip>
      </q-btn>
    </q-toolbar>
    <GovernmentSkeleton v-if="isLoading" />

    <q-card v-else bordered class="bg-grey-1 q-pa-md">
      <div class="row q-col-gutter-y-sm">
        <div class="col-12 col-sm-12 col-md-6">
          <div class="row q-col-gutter-y-sm">
            <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
            <div class="col-7 text-html">
              {{ formData.org ? formData.org : "-" }}
            </div>
            <div class="col-5 text-grey-6 text-weight-medium">
              {{ checkType ? "ตำแหน่งในสายงาน" : "ตำแหน่ง" }}
            </div>
            <div class="col-7">
              {{ formData.position ? formData.position : "-" }}
            </div>

            <div class="col-5 text-grey-6 text-weight-medium">
              {{ checkType ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่" }}
            </div>
            <div class="col-7">
              {{ formData.posMasterNo ? formData.posMasterNo : "-" }}
            </div>
            <div v-if="checkType" class="col-5 text-grey-6 text-weight-medium">
              ตำแหน่งทางการบริหาร
            </div>
            <div v-if="checkType" class="col-7">
              {{ formData.posExecutive ? formData.posExecutive : "-" }}
            </div>
            <div v-if="checkType" class="col-5 text-grey-6 text-weight-medium">
              ด้านทางการบริหาร
            </div>
            <div v-if="checkType" class="col-7">
              {{
                formData.positionExecutiveField
                  ? formData.positionExecutiveField
                  : "-"
              }}
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-6">
          <div class="row q-col-gutter-y-sm">
            <div v-if="checkType" class="col-5 text-grey-6 text-weight-medium">
              สายงาน
            </div>
            <div v-if="checkType" class="col-7">
              {{ formData.positionField ? formData.positionField : "-" }}
            </div>
            <div class="col-5 text-grey-6 text-weight-medium">
              {{ checkType ? "ตำแหน่งประเภท" : "กลุ่มงาน" }}
            </div>
            <div class="col-7">
              {{ formData.posType ? formData.posType : "-" }}
            </div>
            <div class="col-5 text-grey-6 text-weight-medium">
              {{ checkType ? "ระดับ" : "ระดับชั้นงาน" }}
            </div>
            <div class="col-7">
              {{ formData.posLevel ? formData.posLevel : "-" }}
            </div>
            <div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
            <div class="col-7">
              {{ formData.positionArea ? formData.positionArea : "-" }}
            </div>
          </div>
        </div>
      </div>
      <q-separator class="q-my-md" />
      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
          <div class="row">
            <div class="col-6 text-grey-6 text-weight-medium">
              วันที่สั่งบรรจุ
            </div>
            <div class="col-6">
              {{ formData.dateAppoint ? date2Thai(formData.dateAppoint) : "-" }}
            </div>
          </div>

          <div class="row">
            <div class="col-6 text-grey-6 text-weight-medium">
              วันที่เริ่มปฏิบัติราชการ
            </div>
            <div class="col-6">
              {{ formData.dateStart ? date2Thai(formData.dateStart) : "-" }}
            </div>
          </div>

          <div
            v-if="dateToISO(formData.dateAppoint as Date) !== dateToISO(formData.dateStart as Date)"
            class="row"
          >
            <div class="col-6 text-grey-6 text-weight-medium">
              เหตุผลที่วันที่ไม่ตรงกัน
            </div>
            <div class="col-6">
              {{ formData.reasonSameDate ? formData.reasonSameDate : "-" }}
            </div>
          </div>

          <div class="row">
            <div class="col-6 text-grey-6 text-weight-medium">
              วันครบเกษียณอายุ
            </div>
            <div class="col-6">
              {{ formData.dateLeave ? date2Thai(formData.dateLeave) : "-" }}
            </div>
          </div>
          <div class="row">
            <div class="col-6 text-grey-6 text-weight-medium">
              วันที่เกษียณอายุราชการตามกฏหมาย
            </div>
            <div class="col-6">
              {{
                formData.dateRetireLaw ? date2Thai(formData.dateRetireLaw) : "-"
              }}
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
            <div class="col-7">
              {{
                formData.govAge
                  ? `${formData.govAge.year} ปี ${formData.govAge.month} เดือน ${formData.govAge.day} วัน`
                  : "-"
              }}
            </div>
          </div>
          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
            <div class="col-7">
              {{ formData.govAgeAbsent ? formData.govAgeAbsent : 0 }}
            </div>
          </div>
          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">
              อายุราชการเกื้อกูล
            </div>
            <div class="col-7">
              {{ formData.govAgePlus ? formData.govAgePlus : 0 }}
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>

  <DialogHistory
    v-model:modal="modalHistory"
    :title="'ประวัติแก้ไขข้อมูลราชการ'"
    :getData="getHistory"
    :rows="rowsHistory"
    :rows-data="rowsHistoryData"
    :visibleColumns="visibleColumnsHistory"
    :columns="columnsHistory"
    :is-loading="isLoadingHistory"
  />
</template>
