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

import config from "@/app.config";
import http from "@/plugins/http";
import { useCounterMixin } from "@/stores/mixin";

import type { FileObject } from "@/modules/06_evaluate/interface/main";
/** use*/
const $q = useQuasar();
const mixins = useCounterMixin();
const route = useRoute();
const { date2Thai, success, showLoader, hideLoader, messageError } = mixins;

/** id ประเมิน*/
const evaluateId = ref<string>(route.params.id.toString());

const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));
const statusFile = ref<boolean>(false);
const isLoading = ref<boolean>(false);

/** เอกสารประกาศผลการคัดเลือกบุคคล*/
const items = ref<FileObject[]>([
  {
    label: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    fileName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  },
  {
    label: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
    fileName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
  },
  {
    label: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
  {
    label:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
    fileName:
      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
  },
]);

/** fuinction เรียกข้อมูลลิงก์ดาวนฺโหลด*/
async function onClickfetchDocument(fileName: string, type: string) {
  if (evaluateId.value) {
    await http
      .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
      .then((res) => {
        const downloadUrl = res.data.downloadUrl;
        type === "COPPY" && coppyLink(downloadUrl);
        type === "CHECK" && (statusFile.value = true);
      })
      .catch(() => {});
  }
}

/** function คัดลอหลิงก์ดาวน์โหลด */
async function coppyLink(link: string) {
  const linkById = link;
  navigator.clipboard.writeText(linkById);
  success($q, "คัดลอกสำเร็จ");
}

/** function เรียกข้อมูลวันที่ประกาศ*/
async function fetchCheckDate() {
  isLoading.value = true;
  evaluateId.value &&
    (await http
      .get(config.API.evaluationCheckDate(evaluateId.value))
      .then((res) => {
        const data = res.data.result;
        dateStartAnnounce.value = date2Thai(data.dateStartAnnounce);
        const endDate = new Date(data.dateStartAnnounce);
        endDate.setDate(endDate.getDate() + 30);
        dateEndAnnounce.value = date2Thai(endDate);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        isLoading.value = false;
      }));
}

/** Hook lifecycle*/
onMounted(async () => {
  fetchCheckDate();
  await onClickfetchDocument("บันทึกแจ้งผลการประกาศคัดเลือก", "CHECK");
});
</script>
`

<template>
  <div class="row col-12 q-pa-sm">
    <q-skeleton v-if="isLoading" style="width: 100%; height: 300px" />
    <div v-else class="row col-12 q-col-gutter-sm">
      <div class="col-12 text-center">
        <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
          <div class="text-weight-bold">
            <q-icon name="info_outline" color="red-14" size="24px" />
            ประกาศเมื่อวันที่ {{ dateStartAnnounce }} ถึง {{ dateEndAnnounce }}
          </div>
        </q-banner>
      </div>

      <!-- เอกสารประกาศผลการคัดเลือกบุคคล -->
      <div class="col-12">
        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
            เอกสารประกาศผลการคัดเลือกบุคคล
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row q-pa-sm">
            <div class="col-12">
              <q-list>
                <q-item v-for="(item, index) in items" :key="index">
                  <q-item-section>
                    <q-item-label>{{ item.label }}</q-item-label>
                  </q-item-section>

                  <q-item-section side top>
                    <q-btn
                      flat
                      round
                      color="primary"
                      icon="mdi-clipboard-outline"
                      @click="onClickfetchDocument(item.fileName, 'COPPY')"
                    >
                      <q-tooltip>คัดลอกลิงก์</q-tooltip>
                    </q-btn>
                  </q-item-section>
                </q-item>
              </q-list>
            </div>
          </div>
        </q-card>
      </div>

      <!-- บันทึกแจ้งผลการประกาศคัดเลือก -->
      <div class="col-12" v-if="statusFile">
        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
            บันทึกแจ้งผลการประกาศคัดเลือก
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row q-pa-sm">
            <div class="col-12">
              <q-list dense>
                <q-item>
                  <q-item-section>
                    <q-item-label>บันทึกแจ้งผลการประกาศคัดเลือก</q-item-label>
                  </q-item-section>

                  <q-item-section side top>
                    <q-btn
                      flat
                      round
                      color="primary"
                      icon="mdi-clipboard-outline"
                      @click="
                        onClickfetchDocument(
                          'บันทึกแจ้งผลการประกาศคัดเลือก',
                          'COPPY'
                        )
                      "
                    >
                      <q-tooltip>คัดลอกลิงก์</q-tooltip>
                    </q-btn>
                  </q-item-section>
                </q-item>
              </q-list>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
