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

import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";

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

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true,
  },
  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 $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const route = useRoute();
const {
  success,
  messageError,
  showLoader,
  dialogConfirm,
  hideLoader,
  dialogRemove,
} = mixin;
const profileId = ref<string>(
  route.params.personalId ? route.params.personalId.toString() : ""
);
const edit = ref<boolean>(false);
const uploader = ref<any>();
const files = ref<any>([]);
const file = ref<any>([]);
const name = ref<string>("");
const dataMain = ref<any>([]);

// const getData = async () => {
//   if (props.datainformation) {
//     dataMain.value = props.datainformation;
//     files.value = dataMain.value.docs;
//   }

// โค้ดเก่ายังไม่ได้ใช้
// if (profileId.value) {
//   showLoader();
//   await http
//     .get(config.API.profilePaperId(profileId.value))
//     .then((res) => {
//       const data = res.data.result;
//       files.value = data;
//     })
//     .catch((e) => {
//       messageError($q, e);
//     })
//     .finally(() => {
//       hideLoader();
//     });
// }
// };

const deleteData = async (id: string) => {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .delete(config.API.documentDelid(profileId.value, id))
        .then(() => {
          success($q, "ลบไฟล์เอกสารสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(async () => {
          await props.fetch();
        });
    },
    "ยืนยันการลบเอกสารหลักฐาน",
    "ต้องการยืนยันการลบเอกสารหลักฐานนี้หรือไม่ ?"
  );
};

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);
      // formData.append("moss", "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);
        });
      // } else {
      //   // modalError(
      //   //   $q,
      //   //   "ไม่สามารถอัปโหลดไฟล์ได้",
      //   //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
      //   // );
      //   getData();
    }
  }
};

const fileAdd = async (val: any) => {
  name.value = val[0].name;
  file.value = val;
};

const downloadData = async (path: string) => {
  window.open(path);
};

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);
  }
};

/** ฟังชั่นใหม่ */
async function clickUpload(file: any) {
  const fileName = { fileName: file.name };

  dialogConfirm(
    $q,
    async () => {
      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 &&
            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
        })
        .catch((err) => {
          messageError($q, err);
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

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

/**
 * ดาวน์โหลดลิงค์ไฟล์
 * @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(async () => {
      hideLoader();
    });
}

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

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 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="add"
                icon="mdi-upload"
                @click="clickUpload(documentFile)"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </template>
          </q-file>

          <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
        </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-outline"
                  @click="deleteFile(data.fileName)"
                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                >
              </div>
            </q-item>
          </q-list>
        </div>

        <div class="col-12" v-else>
          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
        </div>
      </div>
    </q-card>
    <!-- โค้ดเก่า -->
    <!-- <div class="row col-12 q-pt-sm">
      <q-card bordered flat class="full-width">
        <q-list separator>
          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
            <q-item-section>
              <q-item-label class="full-width ellipsis">
                {{ file.fileName }}
              </q-item-label>

              <q-item-label caption> </q-item-label>
            </q-item-section>
            <q-item-section top side>
              <div class="row col-12">
                <q-btn
                  class="gt-xs"
                  size="12px"
                  flat
                  dense
                  round
                  color="blue"
                  icon="mdi-download-outline"
                  @click="downloadData(file.pathName)"
                >
                  <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
                </q-btn>
                <q-btn
                  class="gt-xs"
                  size="12px"
                  flat
                  dense
                  round
                  color="red"
                  icon="mdi-delete-outline"
                  v-show="edit"
                  @click="deleteData(file.docId)"
                >
                  <q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
                </q-btn>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
      <q-input
        v-if="edit"
        class="q-mt-sm col-12 q-pb-xs"
        outlined
        dense
        lazy-rules
        v-model="name"
        hide-bottom-space
        :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
        :label="`${'ชื่อเอกสาร'}`"
      />
      <q-uploader
        v-if="edit"
        color="gray"
        type="file"
        flat
        @factory="uploadData"
        ref="uploader"
        class="full-width"
        text-color="white"
        :max-size="10000000"
        accept=".jpg,.png,.pdf,.csv,.docx,.doc"
        bordered
        @added="fileAdd"
      >
        <template v-slot:header="scope">
          <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
            <q-btn
              v-if="scope.queuedFiles.length > 0"
              icon="clear_all"
              @click="scope.removeQueuedFiles"
              round
              dense
              flat
            >
              <q-tooltip>ลบทั้งหมด</q-tooltip>
            </q-btn>
            <q-btn
              v-if="scope.uploadedFiles.length > 0"
              icon="done_all"
              @click="scope.removeUploadedFiles"
              round
              dense
              flat
            >
              <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
            </q-btn>
            <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
            <div class="col">
              <div class="q-uploader__title">
                {{ "[ไฟล์ jpg,png,pdf,csv,docx ขนาดไม่เกิน 10MB]" }}
              </div>
              <div class="q-uploader__subtitle">
                {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
              </div>
            </div>
            <q-btn
              v-if="scope.canAddFiles"
              type="a"
              icon="add_box"
              @click="scope.pickFiles"
              round
              dense
              flat
            >
              <q-uploader-add-trigger />
              <q-tooltip>เลือกไฟล์</q-tooltip>
            </q-btn>
            <q-btn
              v-if="scope.isUploading"
              icon="clear"
              @click="scope.abort"
              round
              dense
              flat
            >
              <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
            </q-btn>
          </div>
        </template>
      </q-uploader>
    </div> -->
  </q-card>
</template>
