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

import { checkPermission } from "@/utils/permissions";
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

/** importComponents*/
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ

/** importStore*/

/* use**/
const $q = useQuasar(); //ใช้ noti quasar
const store = useSalaryListSDataStore();
const {
  messageError,
  dialogConfirm,
  showLoader,
  hideLoader,
  success,
  dialogRemove,
} = useCounterMixin();

/** props*/
const props = defineProps({
  rootId: String,
  periodId: String,
  getData: Function,
});

const modalRecommend = ref<boolean>(false); //popup
const titleRecommend = ref<string>(""); //หัวข้อ Popup
const listFile = ref<any[]>([]); //รายการไฟล์
const type = ref<string>(""); //ประเภท
const sendStep = ref<number>(1);
const fileUpload = ref<any>(null); //ไฟล์
const document = ref<string>(""); //ดาวน์โหลดไฟล์

/**
 * function อัปโหลดไฟล์เจ้าหน้าที่
 * @param event file
 */
async function uploadFile(event: any) {
  const fileName = { fileName: event.name };
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const selectedFile = event;
      const formdata = new FormData();
      formdata.append("Document", selectedFile);
      http
        .post(
          config.API.subFile(
            "ระบบเงินเดือน",
            "เลื่อนเงินเดือน",
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          ),
          {
            replace: false, //อัพทับที่เดิมไหม
            fileList: fileName,
          }
        )
        .then(async (res) => {
          const foundKey: string | undefined = Object.keys(res.data).find(
            (key) =>
              res.data[key]?.fileName !== undefined &&
              res.data[key]?.fileName !== ""
          );
          foundKey &&
            (await uploadfile(res.data[foundKey]?.uploadUrl, fileUpload.value));
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

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

/**
 * fetch รายการไฟล์
 */
async function getListFile() {
  await http
    .get(
      config.API.subFile(
        "ระบบเงินเดือน",
        "เลื่อนเงินเดือน",
        props.periodId ? props.periodId : "",
        props.rootId ? props.rootId : ""
      )
    )
    .then((res) => {
      listFile.value = res.data;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 *  โหลดไฟล์
 * @param fileName  ชื่อไฟล์
 */
function downloadFile(fileName: string) {
  showLoader();
  http
    .get(
      config.API.subFileByFileName(
        "ระบบเงินเดือน",
        "เลื่อนเงินเดือน",
        props.periodId ? props.periodId : "",
        props.rootId ? props.rootId : "",
        fileName
      )
    )
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 *  ลบไฟล์
 * @param fileName  ชื่อไฟล์
 */
function deleteFile(fileName: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(
        config.API.subFileByFileName(
          "ระบบเงินเดือน",
          "เลื่อนเงินเดือน",
          props.periodId ? props.periodId : "",
          props.rootId ? props.rootId : "",
          fileName
        )
      )
      .then(() => {
        setTimeout(async () => {
          await getListFile();
          await success($q, "ลบไฟล์สำเร็จ");
          hideLoader();
        }, 2000);
      })
      .catch((e) => {
        messageError($q, e);
        hideLoader();
      });
  });
}

/**
 * ยืนยันการส่ง
 * @param msg ส่งเอกสารให้ ผอ. ตรวจสอบ,ยืนยันและส่งเอกสารให้,ยืนยันการตรวจสอบ
 * @param type officer, head,owner
 */
function sendToDirector(msg: string, type: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .get(
          config.API.salaryPeriodStatus(
            type,
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          )
        )
        .then(() => {
          props.getData?.();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการ" + msg,
    "ต้องการยืนยันการ" + msg + "หรือไม่?"
  );
}

/**
 * ส่งคำแนะนำให้ ผอ. ตรวจสอบ
 * @param title หัวข้อ
 * @param typeOrder ประเภทคำสั่ง
 */
function sendAndRecommend(title: string, typeOrder: string) {
  modalRecommend.value = true;
  titleRecommend.value = title;
  type.value = typeOrder;
}

/**
 * ยินยันการบันทึกคำแนะนำ
 * @param reason คำแนะนำ
 */
function saveReccommend(reason: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .put(
          config.API.salaryPeriodStatusComment(
            type.value,
            props.periodId ? props.periodId : "",
            props.rootId ? props.rootId : ""
          ),
          {
            titleRecommend: reason,
          }
        )
        .then(async () => {
          await props.getData?.();
          sendStep.value = sendStep.value + 1;
          modalRecommend.value = false;
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการ" + titleRecommend.value,
    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
  );
}

onMounted(() => {
  if (props.rootId) {
    getListFile();
  }
});
</script>

<template>
  <q-card class="col-12">
    <q-card-section>
      <q-toolbar
        class="q-pa-none"
        v-if="
          store.statusQuota == 'PENDING' &&
          checkPermission($route)?.attrIsUpdate
        "
      >
        <q-file
          bg-color="white"
          clearable
          outlined
          dense
          v-model="fileUpload"
          accept=".pdf"
          label="อัปโหลดไฟล์"
        >
          <template v-slot:prepend>
            <q-icon color="light-blue" name="attach_file" />
            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
          </template>
        </q-file>

        <q-btn
          dense
          flat
          round
          color="light-blue"
          icon="upload"
          @click="uploadFile(fileUpload)"
          v-if="fileUpload !== null"
        >
          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
        </q-btn>
        <div v-if="document">
          <q-btn
            dense
            color="primary"
            icon-right="mdi-download"
            label="ดาวน์โหลดไฟล์"
            outline
            :href="document"
            target="_blank"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
          >
        </div>

        <q-toolbar-title>
          <!-- Toolbar -->
        </q-toolbar-title>
      </q-toolbar>
      <div class="row">
        <div class="col-6" v-if="listFile.length !== 0">
          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
              รายการเอกสาร
            </div>
            <q-list bordered separator>
              <q-item clickable v-ripple v-for="item in listFile">
                <q-item-section>{{ item.fileName }}</q-item-section>
                <q-item-section avatar>
                  <div class="row">
                    <div>
                      <q-btn
                        v-if="checkPermission($route)?.attrIsGet"
                        dense
                        flat
                        round
                        color="blue"
                        icon="mdi-download"
                        @click="downloadFile(item.fileName)"
                      >
                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
                      </q-btn>
                    </div>
                    <div>
                      <q-btn
                        v-if="checkPermission($route)?.attrIsDelete"
                        dense
                        flat
                        round
                        color="red"
                        icon="delete"
                        @click="deleteFile(item.fileName)"
                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </div>
    </q-card-section>

    <q-separator />
    <q-card-actions align="right">
      <div>
        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
        <q-btn
          v-if="
            store.statusQuota == 'PENDING' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="public"
          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ', 'officer')"
        />

        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
        <q-btn
          v-if="
            store.statusQuota == 'WAITHEAD1' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="public"
          label="ยืนยันและส่งเอกสารให้ สกจ."
          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.', 'head')"
        />

        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
        <q-btn
          v-if="
            store.statusQuota == 'WAITOWNER1' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="green"
          label="ยืนยันการตรวจสอบ"
          @click="sendToDirector('ยืนยันการตรวจสอบ', 'owner')"
        />

        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
        <q-btn
          v-if="
            store.statusQuota == 'WAITOWNER1' &&
            checkPermission($route)?.attrIsUpdate
          "
          class="q-ml-sm"
          unelevated
          color="warning"
          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ', 'owner')"
        />

        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
        <q-btn
          v-if="
            store.statusQuota == 'WAITHEAD2' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="public"
          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
          @click="
            sendAndRecommend('ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน', 'head')
          "
        />

        <!-- ส่งไปออกคำสั่ง -->
        <q-btn
          v-if="
            store.statusQuota == 'WAITOFFICER2' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="public"
          label="ส่งไปออกคำสั่ง"
        />

        <!-- รอออกคำสั่ง -->
        <q-btn
          v-if="
            store.statusQuota == 'REPORT' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="public"
          disable
          label="รอออกคำสั่ง"
        />
      </div>
    </q-card-actions>
  </q-card>

  <DialogPopupReason
    v-model:modal="modalRecommend"
    :title="titleRecommend"
    label="คำแนะนำ"
    :savaForm="saveReccommend"
    textReport=""
  />
</template>

<style lang="scss" scoped></style>
