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

/**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"; //หมายเหตุ

/**import stoer */
import { useCounterMixin } from "@/stores/mixin";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
import { useroleUserDataStore } from "@/stores/roleUser";
/**use sToer */
const roleDataStore = useroleUserDataStore();
const DataStore = useInsigniaDataStore();
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;

const $q = useQuasar(); //ใช้ noti quasar

const loading = ref<boolean>(false);
const loadview = ref<boolean>(false);
const hideBottom = ref<boolean>(false);
const round = ref<string>("");
const roundName = ref<string>("");
const optionRound = ref<any>([]);
const optiontypeOc = ref<any>([]);
const tab = ref<any>("");
const stat = ref<any>({
  allUserUser: 0,
  orgAllCount: 0,
  orgNoSendCount: 0,
  orgSendCount: 0,
});
const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข

/** function เรียกรอบการเสนอขอพระราชทานเครื่อง*/
async function fecthlistRound() {
  showLoader();
  await http
    .get(config.API.listRoundInsignia())
    .then(async (res: any) => {
      optionRound.value = res.data.result.map((e: any) => ({
        id: e.period_id,
        year: e.period_year,
        name: e.period_name,
      }));
      //มีรอบการเสนอขอพระราชทานเครื่องแสดง UI
      if (optionRound.value.length !== 0) {
        DataStore.optionRound = optionRound.value;
        const lastValue = optionRound.value[0];
        if (DataStore.roundId) {
          round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
        } else {
          round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
        }
        DataStore.roundId = round.value;
        roundName.value = lastValue.name;
        await fecthStat(round.value);
        await fecthAgency();
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

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

/** funcion เช็คหน่วยงาน*/
async function fecthAgency() {
  showLoader();
  await http
    .get(config.API.insigniaAgency())
    .then(async (res) => {
      loadview.value = true;
      DataStore.agency = res.data.result;
      DataStore.typeOc = DataStore.agency;
      if (roleDataStore.adminRole) {
        await fecthType(); // ถ้าไม่มีหนวยงานจะเรียกหน่วยงานทั้งหมด
      } else {
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      loading.value = true;
      hideLoader();
    });
}

/** funcion เรียกหน่อยวงาน*/
async function fecthType() {
  await http
    .get(config.API.typeOc())
    .then((res) => {
      optiontypeOc.value = res.data.result.map((e: any) => ({
        id: e.organizationId,
        name: e.organizationName,
      }));
      DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่  DataStore
    })
    .catch((err) => {
      messageError($q, err);
    });
}

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

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

/**
 * function เรียกข้อมูลรายชื่อข้าราชการสามัญฯ  ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
 * @param roundId id รอบการเสนอขอ
 * @param ocId id หน่วยงาน
 * @param role   ประเภท officer,employee
 * @param status สถานะ
 */
async function fecthInsigniaByOc(
  roundId: string,
  ocId: string,
  role: string,
  status: string
) {
  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); // ส่งข้อมูลรอบบการแสดง
        loading.value = true;
        // แสดงปุมล็อกข้อมูล
        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 */
async function sendToDirector() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
      .then(async () => {
        success($q, "บันทึกสำเร็จ");
        await fecthInsigniaByOc(
          round.value,
          DataStore.agency,
          "officer",
          tab.value
        );
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(async () => {
        await hideLoader();
        await fecthStat(round.value);
      });
  });
}

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

const modalbackInsignia2Role = ref<boolean>(false);
/**function  open popup ตีกลับ admin*/
const popupBackToInsignia2Role = async () => {
  modalbackInsignia2Role.value = true;
};

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

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

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

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

const fileUpload = ref<any>(null);
/**
 * 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 fecthlistRound();
  DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
});
</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">
    <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="
          roleDataStore.adminRole && DataStore.isLock !== true && hideBottom
        "
        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="roleDataStore.adminRole" 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="loading">
    <div
      v-if="
        (roleDataStore.insignia1Role && requestStatus == 'st4') ||
        (roleDataStore.insignia2Role && 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>
    <div class="row col-12">
      <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="roleDataStore.adminRole"
          name="organization"
          label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
        />
      </q-tabs>
    </div>
    <q-separator />
    <q-tab-panels v-model="tab" animated>
      <!-- แทบคนที่ยื่นขอ -->
      <q-tab-panel name="pending" class="q-pa-none">
        <tab1
          :tab="tab"
          :roundId="round"
          :roundName="roundName"
          :fecthInsigniaByOc="fecthInsigniaByOc"
          :request-status="requestStatus"
          :fecthStat="fecthStat"
        />
      </q-tab-panel>

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

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

      <!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
      <q-tab-panel
        v-if="roleDataStore.adminRole"
        name="organization"
        class="q-pa-none"
      >
        <tab4 :tab="tab" :roundId="round" />
      </q-tab-panel>
    </q-tab-panels>
    <q-toolbar class="q-py-md text-right">
      <q-file
        v-if="roleDataStore.insignia1Role"
        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="roleDataStore.insignia1Role"
          :href="document"
          target="_blank"
        >
          <q-tooltip>ดาวน์โหลด</q-tooltip>
        </q-btn>
        <q-btn
          v-else
          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="
          roleDataStore.insignia1Role &&
          (requestStatus == 'st1' || requestStatus == 'st4')
        "
        dense
        unelevated
        label="บันทึกข้อมูล"
        color="public"
        class="q-px-md"
        @click="sendToDirector"
      />
      <q-btn
        v-if="
          roleDataStore.insignia2Role &&
          (requestStatus == 'st3' || requestStatus == 'st5')
        "
        dense
        unelevated
        label="ตีกลับ"
        color="orange"
        class="q-px-md"
        @click="popupBackToEdit"
      />
      <q-btn
        v-if="roleDataStore.insignia2Role && requestStatus == 'st3'"
        dense
        unelevated
        label="อนุมัติ"
        color="positive"
        class="q-px-md q-ml-md"
        @click="directorApproved"
      />
      <q-btn
        v-if="
          requestStatus == 'st6' && roleDataStore.adminRole && !DataStore.isLock
        "
        dense
        unelevated
        label="ตีกลับ"
        color="orange"
        class="q-px-md"
        @click="popupBackToInsignia2Role"
      />
    </q-toolbar>

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

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

.filter-card {
  background-color: #f1f1f1b0;
}

.toggle-expired-account {
  font-size: 12px;
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #35373c;
}

.icon-color {
  color: #4154b3;
}

.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
