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

import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
import { checkPermission } from "@/utils/permissions";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataStructureTree } from "@/interface/main";
import type {
  OptionData,
  OptionRound,
  DataStat,
} from "@/modules/07_insignia/interface/index/Main";
import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";

/**import Componrnts*/
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue"; //คนไม่ที่ยืนขอ
import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue"; //คนที่ถูกลบ
import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue"; //หน่วยงานที่ไม่ได้ส่งชื่อ
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ

/**use  */
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const DataStore = useInsigniaDataStore();
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;

/**
 * ตัวแปร
 */
const loadview = ref<boolean>(false); //แสดง View
const hideBottom = ref<boolean>(false);
const round = ref<string>(""); //รอยการเสนอขอ
const roundName = ref<string>(""); //ชื่อรอบการเสนอ
const optionRound = ref<OptionRound[]>([]);
const optiontypeOc = ref<OptionData[]>([]);
const tab = ref<string>(""); //tab รายชื่อ
//ข้อมูล สถิติ
const stat = ref<DataStat>({
  allUserUser: 0,
  orgAllCount: 0,
  orgNoSendCount: 0,
  orgSendCount: 0,
});
const requestNote = ref<string>(""); //หมายเหตุ ตีกลับ
const requestStatus = ref<string>(""); //สถานะของรอบการเสนอขอ
const requestId = ref<string>(""); //id ของรอบการเสนอขอ
const document = ref<string>(""); //เอกสารดาวน์โหลด
const fileUpload = ref<any>(null); //ไฟล์อัปโหลด
const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
const modalbackInsignia2Role = ref<boolean>(false); // popup หมายเหตุการตีกลับ

/**
 * function เรียกรอบการเสนอขอพระราชทานเครื่อง
 */
async function fecthlistRound() {
  showLoader();
  loadview.value = false;
  await http
    .get(config.API.listRoundInsignia(), { params: { path: "MANAGE" } })
    .then(async (res) => {
      optionRound.value = await res.data.result.map((e: ResponsePeriod) => ({
        id: e.period_id,
        year: e.period_year,
        name: e.period_name,
        period_revision: e.period_revision,
      }));

      //มีรอบการเสนอขอพระราชทานเครื่องแสดง UI
      if (optionRound.value.length !== 0) {
        DataStore.optionRound = optionRound.value;
        // const lastValue = optionRound.value[0];
        // await fetchListOrg(lastValue.period_revision);
        // await fecthAgency(lastValue.period_revision);
        // if (DataStore.roundId) {
        //   round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
        // } else {
        //   round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
        // }
        // // await fecthStat(round.value);
        // DataStore.roundId = round.value;
        // roundName.value = lastValue.name;
        loadview.value = true;
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง
 */
async function fecthStat(id: string) {
  if (DataStore.isOfficer) {
    await http
      .get(config.API.insigniaDashboard(id))
      .then((res) => {
        stat.value = res.data.result;
      })
      .catch((err) => {
        messageError($q, err);
      });
  }
}

/**
 * function fetch ข้อมูลโครองสร้างปัจจุบัน
 * @param id โครงสร้างปัจจุบัน
 */
async function fetchListOrg(id: string) {
  if (DataStore.isOfficer) {
    await http
      .get(config.API.orgByIdSystemRoot(id, route.meta.Key as string))
      .then(async (res) => {
        const data = res.data.result;
        if (data.length !== 0) {
          optiontypeOc.value = await res.data.result.map(
            (item: DataStructureTree) => ({
              id: item.orgTreeId,
              name: item.orgName,
            })
          );

          await DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่  DataStore
        }
      })
      .catch((err) => {
        messageError($q, err);
      });
  }
}

/**
 * funcion เช็คหน่วยงาน
 */
async function fecthAgency(id: string) {
  await http
    .get(config.API.keycloakPosition(), {
      params: {
        revisionId: id,
      },
    })
    .then((res) => {
      DataStore.agency = res.data.result.rootId;
      DataStore.typeOc = DataStore.agency;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function เรียกประเภทเครื่องราช
 */
async function fecthInsignia() {
  if (DataStore.dataInsigniaType.length === 0) {
    await http
      .get(config.API.insigniaOrg)
      .then((res) => {
        const data = res.data.result;
        DataStore.fetchInsigniaType(data);
      })
      .catch((err) => {
        messageError($q, err);
      });
  }
}

async function fetchCheckIsofficer() {
  http
    .get(config.API.checkIsofficer + `SYS_INSIGNIA_MANAGE`)
    .then((res) => {
      const data = res.data.result;
      DataStore.isStaff = data.isStaff;
      DataStore.isOfficer = data.isOfficer;
      DataStore.isDirector = data.isDirector;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function เปลี่ยนรอบการแสดง
 */
async function changround() {
  DataStore.roundId = round.value;

  // get round name
  await fecthStat(round.value); //เรียกดู Stat รอบที่เลือก
  const roundFilter = optionRound.value.find(
    (x: OptionRound) => x.id === round.value
  );
  if (roundFilter) {
    await fetchListOrg(roundFilter?.period_revision);
    await fecthAgency(roundFilter?.period_revision);
    roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชฯ ปี ${
      roundFilter.year + 543
    }`;
  }
  var organization =
    DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency  ถ้าไม่มีเรียนตาม Oc ที่เลือก
      ? DataStore.agency
      : DataStore.typeOc;
  await fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
}

/**
 * function เรียกข้อมูลรายชื่อข้าราชการสามัญฯ  ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
 * @param roundId id รอบการเสนอขอ
 * @param ocId id หน่วยงาน
 * @param role   ประเภท officer,employee
 * @param status สถานะ
 */
async function fecthInsigniaByOc(
  roundId: string,
  ocId: string,
  role: string,
  status: string
) {
  DataStore.rows = [];
  if (roundId && ocId && role && status) {
    showLoader();
    await http
      .get(config.API.insigniaList(roundId, ocId, role, status))
      .then(async (res) => {
        requestNote.value = res.data.result.requestNote;
        requestStatus.value = res.data.result.requestStatus;
        requestId.value = res.data.result.requestId;
        document.value = res.data.result.document;
        await DataStore.fetchData(res.data.result.items); // ส่งรายชื่อข้าราชการสามัญฯ
        await DataStore.fetchDataInsignia(res.data.result); // ส่งข้อมูลรอบบการแสดง
        // แสดงปุมล็อกข้อมูล
        if (res.data.result.items !== null) {
          if (res.data.result.items.length !== 0) {
            hideBottom.value = true;
          } else hideBottom.value = false;
        }
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/**
 * function ยืนยันการส่งรอบการเสนอขอต่อ เฉพาะ รอบที่ requestStatus st1 และ st4
 */
function sendToDirector() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
      .then(async () => {
        await fecthStat(round.value);
        await fecthInsigniaByOc(
          round.value,
          DataStore.agency,
          "officer",
          tab.value
        );
        await success($q, "บันทึกสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

/**
 * function open popup แก้ไข*
 */
function popupBackToEdit() {
  modalPopupBackToEdit.value = true;
}

/**
 * function  open popup ตีกลับ admin
 */
function popupBackToInsignia2Role() {
  modalbackInsignia2Role.value = true;
}

/**
 * funtion ยืนยันการ ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
 * @param reason หมายเหตุการตีกลับ
 */
function backToEdit(reason: string) {
  dialogConfirm(
    $q,
    () => {
      showLoader();
      http
        .put(
          config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency),
          {
            reason: reason,
          }
        )
        .then(async () => {
          await fecthInsigniaByOc(
            round.value,
            DataStore.agency,
            "officer",
            tab.value
          );
          await success($q, "บันทึกสำเร็จ");
          modalPopupBackToEdit.value = false;
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการตีกลับ",
    "ต้องการยืนยันการตีกลับใช่หรือไม่?"
  );
}

/**
 * function ยืนยันการอนุมัติรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
 */
function directorApproved() {
  dialogConfirm(
    $q,
    () => {
      showLoader();
      http
        .get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
        .then(async () => {
          await fecthInsigniaByOc(
            round.value,
            DataStore.agency,
            "officer",
            tab.value
          );
          await fecthStat(round.value);
          await success($q, "บันทึกสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการอนุมัติ",
    "ต้องการยืนยันการอนุมัติใช่หรือไม่?"
  );
}

/**
 * function ยืนยันการตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st5 และ adminRole
 * @param reason หมายเหตุการตีกลับ
 */
function backToEditinsignia2Role(reason: string) {
  dialogConfirm($q, () => {
    http
      .put(config.API.rejectRequest(round.value, DataStore.typeOc), {
        reason: reason,
      })
      .then(async () => {
        await fecthInsigniaByOc(
          round.value,
          DataStore.typeOc,
          "officer",
          tab.value
        );
        await success($q, "การตีกลับสำเร็จ");
        modalbackInsignia2Role.value = false;
      })
      .catch((err) => {
        messageError($q, err);
      });
  });
}

/**
 * function ยืนยันการล็อกข้อมูล
 */
function requestSendNote() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .post(config.API.insigniaRequestSendNote(round.value), {
        name: roundName.value,
      })
      .then(async () => {
        await fecthInsigniaByOc(
          round.value,
          DataStore.typeOc,
          "officer",
          tab.value
        );
        await fecthStat(round.value);
        await success($q, "บันทึกสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

/**
 * function อัปโหลดไฟล์เจ้าหน้าที่
 * @param event file
 */
async function uploadFile(event: any) {
  dialogConfirm($q, async () => {
    const selectedFile = event;
    const formdata = new FormData();
    formdata.append("Document", selectedFile);
    await http
      .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
      .then(async () => {
        await fecthInsigniaByOc(
          round.value,
          DataStore.agency,
          "officer",
          tab.value
        );
        success($q, "อัปโหลดไฟล์สำเร็จ");
        fileUpload.value = null;
      })
      .catch((err) => {
        messageError($q, err);
      }),
      "ยืนยันการอัปโหลดไฟล์",
      "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?";
  });
}

/**
 *  hook
 */
onMounted(async () => {
  tab.value = DataStore.mainTab ?? "";
  await Promise.all([fecthlistRound(), fecthInsignia(), fetchCheckIsofficer()]);
});

onUnmounted(() => {
  DataStore.typeOc = "";
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
  </div>
  <q-card
    bordered
    class="row col-12 q-mt-sm"
    v-if="
      loadview &&
      (DataStore.isDirector || DataStore.isOfficer || DataStore.isStaff)
    "
  >
    <div class="row col-12 items-center bg-grey-1">
      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
      <q-select
        borderless
        dense
        v-model="round"
        :options="optionRound"
        map-options
        emit-value
        option-value="id"
        option-label="name"
        @update:model-value="changround"
      />

      <q-space />
      <!-- สกจ. Freez ข้อมูล -->
      <q-btn
        v-if="
          DataStore.isOfficer &&
          DataStore.isLock !== true &&
          hideBottom &&
          checkPermission($route)?.attrIsUpdate
        "
        dense
        unelevated
        label="ล็อกข้อมูล"
        color="public"
        class="q-px-md q-ml-md"
        @click="requestSendNote"
      >
        <q-tooltip>ล็อกข้อมูล</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div v-if="DataStore.isOfficer" class="col-12 row bg-white">
      <div class="fit q-px-md q-py-sm">
        <div class="row col-12 q-col-gutter-sm fit">
          <!-- stat -->
          <cardTop
            :amount="stat.orgAllCount"
            label="หน่วยงานทั้งหมด"
            color="#016987"
          />
          <cardTop
            :amount="stat.orgSendCount"
            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
            color="#02A998"
          />
          <cardTop
            :amount="stat.orgNoSendCount"
            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
            color="#2EA0FF"
          />
          <cardTop
            :amount="stat.allUserUser"
            label="จำนวนคนที่ยื่นขอ"
            color="#4154B3"
          />
        </div>
      </div>
    </div>
  </q-card>

  <q-card v-else>
    <div class="q-pa-md q-gutter-sm">
      <q-banner inline-actions rounded class="bg-grey-1 text-center">
        ไม่มีข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
      </q-banner>
    </div>
  </q-card>

  <q-card
    flat
    bordered
    class="col-12 q-mt-sm"
    v-if="
      loadview &&
      (DataStore.isDirector || DataStore.isOfficer || DataStore.isStaff)
    "
  >
    <div
      v-if="
        (DataStore.isStaff && requestStatus == 'st4') ||
        (DataStore.isDirector && requestStatus == 'st5')
      "
      class="q-pa-md q-gutter-sm"
    >
      <q-banner
        inline-actions
        bordered
        class="bg-orange-1 text-orange border-orange"
      >
        <q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ
        {{ requestNote }}
      </q-banner>
    </div>

    <q-tabs
      v-model="tab"
      dense
      class="text-grey"
      active-color="primary"
      active-class="bg-teal-1"
      indicator-color="primary"
      align="left"
    >
      <q-tab name="pending" label="คนที่ยื่นขอ" />
      <q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
      <q-tab name="delete" label="คนที่ถูกลบออก" />
      <q-tab
        v-if="DataStore.isOfficer"
        name="organization"
        label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
      />
    </q-tabs>

    <div class="col-12"><q-separator /></div>
    <q-tab-panels v-model="tab" animated>
      <!-- แทบคนที่ยื่นขอ -->
      <q-tab-panel name="pending" class="q-pa-none">
        <tab1
          :tab="tab"
          :round-id="round"
          :round-name="roundName"
          :fecth-insignia-by-oc="fecthInsigniaByOc"
          :request-status="requestStatus"
          :fecth-stat="fecthStat"
        />
      </q-tab-panel>

      <!-- แทบคนที่ไม่ยื่นขอ -->
      <q-tab-panel name="reject" class="q-pa-none">
        <tab2
          :tab="tab"
          :round-id="round"
          :fecth-insignia-by-oc="fecthInsigniaByOc"
        />
      </q-tab-panel>

      <!-- แทบคนที่ถูกลบออก -->
      <q-tab-panel name="delete" class="q-pa-none">
        <tab3
          :tab="tab"
          :round-id="round"
          :fecth-insignia-by-oc="fecthInsigniaByOc"
        />
      </q-tab-panel>

      <!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
      <q-tab-panel
        v-if="DataStore.isOfficer"
        name="organization"
        class="q-pa-none"
      >
        <tab4 :tab="tab" :round-id="round" />
      </q-tab-panel>
    </q-tab-panels>

    <q-toolbar class="q-py-md text-right">
      <q-file
        v-if="DataStore.isStaff && checkPermission($route)?.attrIsUpdate"
        bg-color="white"
        clearable
        outlined
        dense
        v-model="fileUpload"
        accept=".pdf"
        :style="fileUpload === null ? 'width: 150px' : 'width: auto'"
        label="อัปโหลดไฟล์"
      >
        <template v-slot:prepend>
          <q-icon color="light-blue" name="attach_file" />
          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
        </template>
      </q-file>

      <q-btn
        flat
        round
        color="light-blue"
        icon="upload"
        @click="uploadFile(fileUpload)"
        v-if="fileUpload !== null"
      />
      <div v-if="document">
        <q-btn
          size="md"
          icon="mdi-download"
          flat
          round
          color="primary"
          v-if="DataStore.isStaff && checkPermission($route)?.attrIsGet"
          :href="document"
          target="_blank"
        >
          <q-tooltip>ดาวน์โหลด</q-tooltip>
        </q-btn>
        <q-btn
          v-else-if="checkPermission($route)?.attrIsGet"
          color="primary"
          icon-right="mdi-download"
          label="ดาวน์โหลดไฟล์"
          outline
          :href="document"
          target="_blank"
        >
          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
        >
      </div>
      <q-space />
      <q-btn
        v-if="
          DataStore.isStaff &&
          (requestStatus == 'st1' || requestStatus == 'st4') &&
          checkPermission($route)?.attrIsUpdate
        "
        dense
        unelevated
        label="บันทึกข้อมูล"
        color="public"
        class="q-px-md"
        @click="sendToDirector"
      />
      <q-btn
        v-if="
          DataStore.isDirector &&
          (requestStatus == 'st3' || requestStatus == 'st5') &&
          checkPermission($route)?.attrIsUpdate
        "
        dense
        unelevated
        label="ตีกลับ"
        color="orange"
        class="q-px-md"
        @click="popupBackToEdit"
      />
      <q-btn
        v-if="
          DataStore.isDirector &&
          requestStatus == 'st3' &&
          checkPermission($route)?.attrIsUpdate
        "
        dense
        unelevated
        label="อนุมัติ"
        color="positive"
        class="q-px-md q-ml-md"
        @click="directorApproved"
      />
      <q-btn
        v-if="
          requestStatus == 'st6' &&
          DataStore.isOfficer &&
          !DataStore.isLock &&
          checkPermission($route)?.attrIsUpdate
        "
        dense
        unelevated
        label="ตีกลับ"
        color="orange"
        class="q-px-md"
        @click="popupBackToInsignia2Role"
      />
    </q-toolbar>
  </q-card>

  <!-- popup หมายเหตุ -->
  <DialogPopupReason
    v-model:modal="modalPopupBackToEdit"
    title="หมายเหตุการตีกลับ"
    label="หมายเหตุ"
    :savaForm="backToEdit"
  />
  <DialogPopupReason
    v-model:modal="modalbackInsignia2Role"
    title="หมายเหตุการตีกลับ"
    label="หมายเหตุ"
    :savaForm="backToEditinsignia2Role"
  />
</template>

<style lang="scss" scope>
.border-orange {
  border: 1px solid #ffa800;
  border-radius: 5px;
}
</style>
