<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useQuasar } from "quasar";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";

/** importComponents*/
import Header from "@/components/DialogHeader.vue";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

/**use*/
const $q = useQuasar();
const { showLoader, hideLoader, messageError, success, dialogRemove } =
  useCounterMixin();

/**props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  typeAction: {
    type: String,
    required: true,
  },
  id: {
    type: String,
    defult: "",
  },
  isActive: {
    type: Boolean,
    defult: false,
  },
  fetchData: {
    type: Function,
    defult: () => {},
  },
});

const salaryId = ref<string>("");

const documentFile = ref<any>(null);
const itemsDocument = ref<any>([]);

/**
 * function fetch ข้อมูลรายการ ไฟล์
 * @param id ไฟล์
 */
async function fetchDocumentFile(id: string) {
  showLoader();
  await http
    .get(config.API.salaryChartFile(id))
    .then(async (res) => {
      const list = await res.data.map((e: any) => ({ name: e.fileName }));
      itemsDocument.value = list;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ปิด Dialog*
 */
function closeDialog() {
  modal.value = !modal.value;
  documentFile.value = null;
  itemsDocument.value = [];
}

/**
 * function เรียก path อัปโหลดไฟล์
 */
async function uploadDocumentFile() {
  showLoader();
  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
  const formData = new FormData();
  formData.append("file", documentFile.value);
  const body = {
    replace: false,
    fileList: {
      fileName: fileName,
    },
  };
  await http
    .post(config.API.salaryChartFile(salaryId.value), body)
    .then(async (res) => {
      const foundKey: any = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      const link = res.data[foundKey]?.uploadUrl;
      await fileUpLoad(link);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}
/**
 * function อัปโหลดไฟล์
 * @param url link อัปโหลด
 */
async function fileUpLoad(url: string) {
  axios
    .put(url, documentFile.value, {
      headers: { "Content-Type": documentFile.value?.type },
      onUploadProgress: (e) => console.log(e),
    })
    .then(async () => {
      await fetchDocumentFile(salaryId.value);
      await success($q, "อัปโหลดไฟล์สำเร็จ");
      documentFile.value = null;
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * function ลบข้อมูลรายการไฟล์
 * @param fileName ชื่่อไฟล์
 */
function onClickDeleteFile(fileName: string) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
      .then(async () => {
        setTimeout(async () => {
          await fetchDocumentFile(salaryId.value);
          await success($q, "ลบไฟล์สำเร็จ");
        }, 1500);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        setTimeout(() => {
          hideLoader();
        }, 2000);
      });
  });
}

/**
 * function โหลดข้อมูลไฟล์
 * @param fileName ชื่่อไฟล์
 */
function onClickDonwload(fileName: string) {
  showLoader();
  http
    .get(config.API.salaryChartDelFile(salaryId.value, fileName))
    .then(async (res) => {
      const data = res.data;
      await downloadFile(data.downloadUrl, data.fileType, fileName);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * function เรียกไฟล์ PDF
 * @param url  link PDF
 * @param type  ประเภทไฟล์
 * @param fileName  ชือไฟล์
 */
function downloadFile(url: string, type: string, fileName: string) {
  axios
    .get(url, {
      method: "GET",
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
      },
    })
    .then((res) => {
      const a = document.createElement("a");
      a.href = window.URL.createObjectURL(res.data);
      a.download = fileName;
      a.click();
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}

/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
watch(
  () => modal.value,
  () => {
    if (modal.value) {
      if (props.typeAction === "edit") {
        if (props.id) {
          salaryId.value = props.id;
          fetchDocumentFile(props.id);
        }
      }
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
      <q-separator />
      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="row col-12 q-col-gutter-sm">
          <div class="row col-12 q-col-gutter-y-sm">
            <div class="col-12 row">
              <div v-if="!props.isActive" class="full-width">
                <q-file
                  v-if="
                    props.typeAction === 'edit' &&
                    checkPermission($route)?.attrIsUpdate
                  "
                  class="col-12"
                  outlined
                  dense
                  v-model="documentFile"
                  label="เอกสารอ้างอิง"
                  hide-bottom-space
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" color="primary" />
                  </template>
                  <template v-slot:after>
                    <q-btn
                      v-if="documentFile"
                      size="14px"
                      flat
                      round
                      dense
                      color="primary"
                      icon="mdi-upload"
                      @click="uploadDocumentFile"
                      ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                    >
                  </template>
                </q-file>
              </div>
            </div>

            <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
              <q-list class="full-width rounded-borders" bordered separator>
                <q-item
                  v-for="file in itemsDocument"
                  :key="file.id"
                  clickable
                  v-ripple
                >
                  <q-item-section>{{ file.name }}</q-item-section>
                  <q-item-section avatar>
                    <div class="row q-col-gutter-md">
                      <div>
                        <q-btn
                          dense
                          flat
                          round
                          color="blue"
                          icon="mdi-download"
                          @click="onClickDonwload(file.name)"
                        >
                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                      <div
                        v-if="
                          !props.isActive &&
                          checkPermission($route)?.attrIsUpdate
                        "
                      >
                        <q-btn
                          dense
                          flat
                          round
                          color="red"
                          icon="delete"
                          @click="onClickDeleteFile(file.name)"
                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                        >
                      </div>
                    </div>
                  </q-item-section>
                </q-item>
              </q-list>
            </div>

            <div class="col-12" v-else>
              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
            </div>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

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