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

import http from "@/plugins/http";
import config from "@/app.config";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";

/**use*/
const $q = useQuasar();
const store = useEvaluateStore();
const mixin = useCounterMixin();
const route = useRoute();

const { showLoader, hideLoader, messageError, success } = mixin;

const evaluateId = ref<string>(route.params.id.toString());

const status = ref<string>("WAIT_CHECK_DOC_V2");

const fileEvaluationEdit = ref<File | null>();

const modalView = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
const evaluationResult = ref<string>("");
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}

/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}

/**
 * function เรียก Path อัปโหลดไฟล์
 * @param volume เล่ม
 * @param id  ประเมิน
 * @param type ชือไฟล์
 * @param file ไฟล์
 */
async function fetchPathUpload(
  volume: string,
  id: string | undefined,
  type: string,
  file: any
) {
  const body = {
    fileList: {
      fileName: type,
      metadata: {
        subject: subject.value,
        author: author.value,
        position: assignedPosition.value,
      },
    },
  };
  if (id && file) {
    showLoader();
    await http
      .post(config.API.loadPathDocument(volume, id), body)
      .then(async (res) => {
        const foundKey: string | undefined = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/**
 *
 * @param uploadUrl  ลิงก์อัปโหลด
 * @param file  ไฟล์
 */
async function uploadfile(uploadUrl: string, file: any) {
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(() => {
      success($q, "อัปโหลไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    });
}

const downloadUrl = ref<string>("");
const isLoadingFile = ref<boolean>(false);
/** function เช็คไฟล์อัปโหลด*/
async function checkDoc() {
  isLoadingFile.value = true;
  await http
    .get(
      config.API.loadFileDocument(
        "เล่ม 2",
        evaluateId.value,
        "2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
      )
    )
    .then((res: any) => {
      downloadUrl.value = res.data.downloadUrl;
    })
    .finally(() => {
      isLoadingFile.value = false;
    });
}

const author = ref<string>("");
const subject = ref<string>("");
const assignedPosition = ref<string>("");

/**
 * function เรียกข้อมูลผลงาน
 * @param id ประเมิน
 */
async function fetcheSigner(id: string) {
  await http
    .get(config.API.evaluationSignerDoc2(id))
    .then((res) => {
      const data = res.data.result;
      author.value = data.authorDoc2;
      subject.value = data.subjectDoc2;
      assignedPosition.value = data.assignedPosition;
      evaluationResult.value = data.evaluationResult;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** lifecycleHook*/
onMounted(async () => {
  try {
    await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
  } catch (error) {
    console.log(error);
  }
});
</script>

<template>
  <div class="col-12 q-pa-sm">
    <div class="row q-col-gutter-md">
      <div class="col-12 text-center">
        <q-badge
          v-if="status == 'WAIT_CHECK_DOC_V2'"
          outline
          color="orange-5"
          label="รอพิจารณาผลการประเมิน"
          class="q-pa-sm"
          style="font-size: 16px"
        />
      </div>

      <div
        class="col-12"
        v-if="
          (store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
        "
      >
        <q-skeleton
          :height="store.currentStep !== 8 ? '50px' : '100px'"
          v-if="isLoadingFile"
        />
        <q-card v-else class="shadow-0" bordered>
          <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
            <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
            <q-space />
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row">
            <div class="col-12 q-pa-sm">
              <div v-if="store.currentStep == 8" class="row col-12">
                <div class="col-12">
                  <q-file
                    v-model="fileEvaluationEdit"
                    class="col-12"
                    outlined
                    dense
                    hide-bottom-space
                    lazy-rules
                    accept=".pdf"
                    label="อัปโหลดไฟล์"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>
                    <template v-slot:after>
                      <q-btn
                        flat
                        round
                        dense
                        color="primary"
                        icon="mdi-upload"
                        @click="
                          fetchPathUpload(
                            'เล่ม 2',
                            evaluateId,
                            '2-เอกสารเล่ม 2 (ฉบับแก้ไข)',
                            fileEvaluationEdit
                          )
                        "
                        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                      >
                    </template>
                  </q-file>
                </div>
              </div>
              <div v-else>
                <div class="row col-12 q-px-sm q-py-xs items-center">
                  <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
                  <q-space />
                  <q-btn
                    v-if="downloadUrl != ''"
                    :href="downloadUrl"
                    target="_blank"
                    color="blue"
                    flat
                    dense
                    icon="visibility"
                  >
                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                  >
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
      <div
        v-if="evaluationResult !== 'PENDING'"
        align="right"
        class="full-width"
      >
        ผลการประเมิน:
        <span
          :class="
            evaluationResult == 'PASS'
              ? `full-width text-green`
              : `full-width text-red`
          "
        >
          {{ evaluationResult == "PASS" ? "ผ่าน" : "ไม่ผ่าน" }}
        </span>
      </div>
    </div>
  </div>

  <!-- Dialog Full Screen -->
  <q-dialog
    v-model="modalView"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-white">
      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
        <q-btn
          icon="close"
          unelevated
          round
          dense
          style="color: #ff8080; background-color: #ffdede"
          size="12px"
          v-close-popup
        />
      </div>
      <div class="q-pa-md">
        <div class="row items-start items-center">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
        <div class="row items- items-center">
          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
        </div>
        <div class="row items- items-end">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
