<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import axios from "axios";

import HeaderTop from "@/components/information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";

interface ArrayFileList {
  id: string;
  pathName: string;
  fileName: string;
}

const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const route = useRoute();
const {
  success,
  messageError,
  showLoader,
  dialogConfirm,
  hideLoader,
  dialogRemove,
} = mixin;

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true,
  },
  isEdit: {
    type: Boolean,
    required: false,
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log("not function"),
  },
  fetch: {
    type: Function,
    default: () => console.log("not function"),
  },
  datainformation: {
    type: Array,
  },
});
const emit = defineEmits(["update:statusEdit"]);

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

const profileId = ref<string>(
  route.params.personalId ? route.params.personalId.toString() : ""
);
const edit = ref<boolean>(false); //การแก้ไขข้อมูล
const uploader = ref<any>(); //
const file = ref<any>([]); //ไฟล์์
const name = ref<string>("");

const uploadData = async () => {
  if (profileId.value) {
    if (file.value.length > 0) {
      const blob = file.value.slice(0, file.value[0].size);
      const newFile = new File(blob, name.value, {
        type: file.value[0].type,
      });
      const formData = new FormData();
      formData.append("file", newFile);
      showLoader();
      await http
        .put(config.API.documentByid(profileId.value), formData)
        .then(() => {
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(async () => {
          await props.fetch();
          uploader.value.reset();
          name.value = "";
          edit.value = false;
          emit("update:statusEdit", false);
        });
    }
  }
};

const changeBtn = async () => {
  name.value = "";
  if (edit.value == true) {
    if (props.statusEdit === true) {
      edit.value = false;
      props.notiNoEdit();
    } else {
      emit("update:statusEdit", true);
    }
  } else {
    emit("update:statusEdit", false);
  }
};

/** ฟังชั่นใหม่ */
function clickUpload(file: any) {
  const fileName = { fileName: file.name };
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const selectedFile = file;
      const formdata = new FormData();
      formdata.append("file", selectedFile);
      await http
        .post(
          config.API.file(
            "ระบบบรรจุ แต่งตั้ง",
            "เอกสารหลักฐาน",
            profileId.value
          ),
          {
            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 uploadFileDoc(
              res.data[foundKey]?.uploadUrl,
              documentFile.value
            ));
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

/**
 * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
function uploadFileDoc(uploadUrl: string, file: any) {
  const Data = new FormData();
  Data.append("file", documentFile.value);
  showLoader();
  axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async () => {
      await getData();
      await success($q, "อัปโหลดไฟล์สำเร็จ");
      documentFile.value = null;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ดาวน์โหลดลิงก์ไฟล์
 * @param fileName file name
 */
function downloadFile(fileName: string) {
  showLoader();
  http
    .get(
      config.API.fileByFile(
        "ระบบบรรจุ แต่งตั้ง",
        "เอกสารหลักฐาน",
        profileId.value,
        fileName
      )
    )
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ลบไฟล์
 * @param fileName file name
 */
function deleteFile(fileName: string) {
  dialogRemove($q, async () => {
    showLoader();
    http
      .delete(
        config.API.fileByFile(
          "ระบบบรรจุ แต่งตั้ง",
          "เอกสารหลักฐาน",
          profileId.value,
          fileName
        )
      )
      .then(async () => {
        setTimeout(async () => {
          await getData();
          await success($q, `ลบไฟล์สำเร็จ`);
        }, 1500);
      })
      .catch((e) => {
        messageError($q, e);
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันดึงข้อมูลรายการไฟล์
 */
async function getData() {
  showLoader();
  await http
    .get(
      config.API.file("ระบบบรรจุ แต่งตั้ง", "เอกสารหลักฐาน", profileId.value)
    )
    .then((res) => {
      fileList.value = res.data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ทำงานเมื่อมีการเรียกใช้ Components
 */
onMounted(async () => {
  await getData();
});
</script>

<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md no-border">
    <HeaderTop
      v-model:edit="edit"
      header="เอกสารหลักฐาน"
      icon="mdi-file-document"
      :history="false"
      :changeBtn="changeBtn"
      :disable="statusEdit"
      :save="uploadData"
    />
    <q-card class="row col-12">
      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
        <div v-if="isEdit" class="col-12 row">
          <q-file
            for="inputFiles"
            class="col-12"
            outlined
            dense
            v-model="documentFile"
            label="ไฟล์เอกสารหลักฐาน"
            hide-bottom-space
            accept=".pdf,.xlsx,.docx,.png,.jpg"
            clearable
          >
            <template v-slot:prepend>
              <q-icon name="attach_file" color="primary" />
            </template>
            <template v-slot:after>
              <q-btn
                size="14px"
                v-if="documentFile"
                flat
                round
                dense
                color="primary"
                icon="mdi-upload"
                @click="clickUpload(documentFile)"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </template>
          </q-file>
        </div>

        <div v-if="fileList.length > 0" class="col-xs-12 row">
          <q-list class="full-width rounded-borders" bordered separator>
            <q-item
              clickable
              v-ripple
              v-for="data in fileList"
              :key="data.id"
              class="items-center"
            >
              <q-item-section>{{ data.fileName }}</q-item-section>
              <q-space />
              <div>
                <q-btn
                  size="12px"
                  flat
                  round
                  dense
                  color="blue"
                  icon="mdi-download"
                  @click="downloadFile(data.fileName)"
                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                >
                <q-btn
                  size="12px"
                  flat
                  round
                  dense
                  color="red"
                  class="q-ml-sm"
                  icon="mdi-delete"
                  @click="deleteFile(data.fileName)"
                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                >
              </div>
            </q-item>
          </q-list>
        </div>

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

<style lang="css"></style>
