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

import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";

const $q = useQuasar();
const route = useRoute();
const store = useEvaluateStore();
const { showLoader, hideLoader, messageError, success } = useCounterMixin();

const formTemplates = ref<any[]>([
  {
    code: "EV1_005",
    templateName: "template-1",
    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
    downloadFile: "",
    file: null,
  },
  {
    code: "EV1_006",
    templateName: "template-2",
    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
    downloadFile: "",
    file: null,
  },
  {
    code: "EV1_008",
    templateName: "template-4",
    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
    downloadFile: "",
    file: null,
  },
  {
    code: "EV1_010",
    templateName: "template-6",
    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
    downloadFile: "",
    file: null,
  },
]);

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

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

/**
 * function
 * @param id  evaluate ID
 */
async function fetchCheckSpec(id: string) {
  await http
    .get(config.API.evaluationReportCheckspecByid(id))
    .then((res) => {
      const data = res.data.result;
      profile.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function fecth รายชื่อผู้เซ็นเอกสาร
 * @param id evaluate ID
 */
function fetcheSigner(id: string) {
  http
    .get(config.API.evaluationSignerDoc1(id))
    .then((res) => {
      const data = res.data.result;
      author.value = data.author;
      subject.value = data.subject;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * funcion ดาวน์โหลดไฟล์
 * @param tp templatname
 * @param templateName
 * @param fileName ชือ่ไฟล์
 */
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  const body = {
    template: tp,
    reportName: templateName,
    data: profile.value,
  };
  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
  hideLoader();
}

/**
 * function fetch ลิงก์อัปโหลดไฟล์
 * @param volume เล่ม
 * @param id  evaluate 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,
      },
    },
  };

  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));
        await downloadFile(type);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/**
 *  functoin อัปโหลดไฟล์
 * @param uploadUrl  link อัปโหลด
 * @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);
    });
}

/**
 * function ดาวน์โหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
async function downloadFile(fileName: string) {
  await http
    .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
    .then((res) => {
      const index = formTemplates.value.findIndex(
        (item) => item.fileName === fileName
      );
      if (index !== -1) {
        formTemplates.value[index].downloadFile = res.data.downloadUrl;
      }
    });
}

/**lifecycle Hooks*/
onMounted(async () => {
  try {
    showLoader();
    await Promise.all([
      fetcheSigner(evaluateId.value),
      fetchCheckSpec(evaluateId.value),
      formTemplates.value.forEach((e) => {
        downloadFile(e.fileName);
      }),
    ]);
  } catch (error) {
    console.log(error);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="col-12 row q-pa-md justify-center">
    <q-badge
      v-if="status == 'WAIT_CHECK_DOC_V1'"
      outline
      color="orange-5"
      label="รอตรวจสอบคุณสมบัติ"
      class="q-pa-sm"
      style="font-size: 16px"
    />
  </div>

  <div class="row q-col-gutter-sm q-pa-sm">
    <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
      <q-card
        bordered
        class="cardSp1"
        v-if="
          (store.currentStep !== 4 &&
            formTemplates.some((e) => e.downloadFile !== '')) ||
          store.currentStep == 4
        "
      >
        <div
          class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
        >
          <div>{{ item.title }}</div>
          <q-space />
          <!-- <div>
            <q-btn
              flat
              dense
              icon="download"
              color="indigo"
              @click="
                onClickDowloadFile(item.code, item.templateName, item.title)
              "
            >
              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
            >
          </div> -->
          <div>
            <q-btn
              v-if="item.downloadFile != ''"
              :href="item.downloadFile"
              target="_blank"
              class="q-ml-sm"
              color="blue"
              flat
              dense
              icon="visibility"
            >
              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
            >
          </div>
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row" v-if="store.currentStep === 4">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <q-file
                v-model="item.file"
                class="col-xs-12 col-sm-12"
                label="อัปโหลดไฟล์"
                outlined
                dense
                lazy-rules
                hide-bottom-space
                accept=".pdf"
                :rules="
                item.downloadFile === ''
                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
                    : []
                "
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
                <template v-slot:after>
                  <q-btn
                    :disable="!item.file"
                    flat
                    round
                    dense
                    color="primary"
                    icon="mdi-upload"
                    @click="
                      fetchPathUpload(
                        'เล่ม 1',
                        evaluateId,
                        item.fileName,
                        item.file
                      )
                    "
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </template>
              </q-file>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>
