<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";

import http from "@/plugins/http";
import config from "@/app.config";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";

import type { FileFormType } from "@/modules/10_registry/interface/index/Main";

const fileList = ref<FileFormType[]>([]);
const store = useRegistryInFormationStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;

const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */

function onHistory() {
  modalHistory.value = true;
}

/** get data */
function getData() {
  showLoader();
  http
    .get(
      config.API.fileByFileUser(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐาน",
        store.profileId
      )
    )
    .then((res) => {
      const data = res.data;
      fileList.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 1500);
    });
}

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

onMounted(() => {
  getData();
});
</script>
<template>
  <!-- v-if="mode" -->
  <div class="col-12">
    <q-toolbar class="q-px-none q-mt-md">
      <span class="text-blue-6 text-weight-bold text-body1">เอกสารหลักฐาน</span>
    </q-toolbar>
    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
        ไฟล์เอกสารหลักฐาน
      </div>
      <div class="col-12"><q-separator /></div>
      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
        <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
                >
              </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>
</template>
<style scoped>
.absolute_button {
  position: absolute;
  right: 5px;
  top: -20px;
}

.fix_top {
  justify-content: start !important;
}
</style>
