<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import { useCounterMixin } from "@/stores/mixin";
import genReport from "@/plugins/genreport";
import { useQuasar } from "quasar";
import PopupReason from "@/components/Dialogs/PopupReason.vue";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

const $q = useQuasar();
const mixin = useCounterMixin();
const {
  date2Thai,
  showLoader,
  hideLoader,
  messageError,
  success,
  dialogConfirm,
} = mixin;
const store = useEvaluateDetailStore();

const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
const fullName = ref<string>(
  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
);
const messenger = ref<string>("");
const title = ref<string>("");
const modalEvaluation = ref<boolean>(false);
const fileEvaluationUpload = ref<any>();
const status = ref<string>("WAIT_CHECK_DOC_V1");
const files = [
  {
    id: "file1",
    fileName: "แบบพิจารณาคุณสมบัติบุคคล",
    pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
  },
  {
    id: "file2",
    fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
    pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
  },
  {
    id: "file3",
    fileName:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
    pathName:
      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
  },
  {
    id: "file4",
    fileName: "แบบประเมินคุณลักษณะบุคคล",
    pathName: "4-แบบประเมินคุณลักษณะบุคคล",
  },
  {
    id: "file5",
    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  },
  {
    id: "file6",
    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
];

async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  const data = Object.assign(
    { fullName: fullName.value },
    tp === "EV1_005" || tp === "EV1_007"
      ? { organizationName: "หน่วยงาน" }
      : null,
    tp === "EV1_007" ? { positionName: "ตำแหน่ง" } : null,
    tp === "EV1_007" ? { positionLeaveName: "ระดับ" } : null
  );
  const body = {
    template: tp,
    reportName: templateName,
    data: data,
  };
  await genReport(body, fileName);
}

/** ติดต่อผู้ขอประเมิน */
function openPopUp() {
  console.log("12");
  modalEvaluation.value = true;
}

function downloadFile(name: string) {
  showLoader();
  http
    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
    .then((res) => {
      const link = res.data.downloadUrl;
      const type = res.data.fileType;
      const fileName = res.data.fileName;
      getPDF(link, type, fileName);
    })
    .catch((e) => {})
    .finally(() => {
      hideLoader();
    });
}

function getPDF(url: string, type: string, fileName: string) {
  axios
    .get(url, {
      method: "GET",
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
      },
    })
    .then(async (res) => {
      console.log(res);
      const a = document.createElement("a");
      a.href = window.URL.createObjectURL(res.data);
      a.download = fileName;
      // a.download = res.data.fileName + `.${mime.getExtension(res.data.fileType)}`
      a.click();
    })
    .catch((e) => {})
    .finally(() => {});
}

/** ส่งไปประกาศบนเว็บไซต์ */
function onWebSite() {
  showLoader();
  http
    .put(config.API.evaluationApproveDoc1(id.value))
    .then((res) => {})
    .catch((e) => {})
    .finally(() => {
      success($q, "ส่งไปประกาศบนเว็บไซต์ สำเร็จ");
      getStep();
    });
}

function getStep() {
  showLoader();
  http
    .get(config.API.evaluateGetStep(id.value))
    .then((res: any) => {
      const data = res.data.result;

      let step =
        data.step === "CHECK_SPEC"
          ? 1
          : data.step === "PREPARE_DOC_V1"
          ? 2
          : data.step === "CHECK_DOC_V1"
          ? 3
          : data.step === "WAIT_CHECK_DOC_V1"
          ? 4
          : data.step === "ANNOUNCE_WEB"
          ? 5
          : data.step === "PREPARE_DOC_V2"
          ? 6
          : data.step === "CHECK_DOC_V2"
          ? 7
          : data.step === "WAIT_CHECK_DOC_V2"
          ? 8
          : data.step === "DONE"
          ? 9
          : 1;

      store.currentStep = step;
      store.step = step;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function upLoadFile() {
  showLoader();
  http
    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
      fileList: {
        fileName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
        metadata: {
          tag: "value",
        },
      },
    })
    .then((res) => {
      const foundKey: any = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      const link = res.data[foundKey]?.uploadUrl;
      fileUpLoad(link);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function fileUpLoad(url: string) {
  axios
    .put(url, fileEvaluationUpload.value, {
      headers: { "Content-Type": fileEvaluationUpload.value?.type },
      onUploadProgress: (e) => console.log(e),
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      fileEvaluationUpload.value = null;
      checkDoc10();
      success($q, "อัปโหลดไฟล์สำเร็จ");
    });
}

function sentMessenger() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.evaluationSentToContact(id.value), {
        subject: title.value,
        body: messenger.value,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        modalEvaluation.value = false;
        hideLoader();
      });
  });
}

const download10Url = ref<string>("");
function checkDoc10() {
  showLoader();
  http
    .get(
      config.API.evaluationPatchData(
        "เล่ม 1",
        id.value,
        "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
      )
    )
    .then((res: any) => {
      download10Url.value = res.data.downloadUrl;
    })
    // .catch((e) => {
    //   messageError($q, e);
    // })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  checkDoc10();
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เอกสารเล่มที่ 1
        </div>
        <div class="col-12"><q-separator /></div>

        <q-list
          v-for="file in files"
          :key="file.id"
          class="full-width"
          bordered
          separator
        >
          <q-item clickable v-ripple>
            <q-item-section>{{ file.fileName }}</q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    dense
                    flat
                    round
                    size="12px"
                    color="blue"
                    icon="mdi-download-outline"
                    @click="downloadFile(file.pathName)"
                  >
                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_008',
                      'template-4',
                      'แบบประเมินคุณลักษณะบุคคล'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="download10Url != ''"
                  :href="download10Url"
                  target="_blank"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluationUpload"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload "
                  @click="upLoadFile"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
    <div v-if="store.currentStep == 4" class="col-12">
      <div class="q-mt-xs q-gutter-md" align="right">
        <q-btn label="ติดต่อผู้ขอประเมิน" color="info" @click="openPopUp" />
        <q-btn
          unelevated
          label="ส่งไปประกาศบนเว็บไซต์"
          color="public"
          @click="onWebSite"
        />
      </div>
    </div>
  </div>

  <q-dialog v-model="modalEvaluation" persistent>
    <q-card style="min-width: 60vw">
      <q-toolbar>
        <q-toolbar-title class="text-subtitle2 text-bold">
          ติดต่อผู้ขอประเมิน
        </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="modalEvaluation = false"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />
      <q-card-section class="q-pa-md bg-grey-1">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-input
              v-model="title"
              label="หัวข้อ"
              outlined
              dense
              bg-color="white"
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="messenger"
              label="ข้อความ"
              type="textarea"
              outlined
              dense
              bg-color="white"
            />
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <div class="row justify-end q-px-md q-py-sm items-center">
        <q-btn
          dense
          color="public"
          id="onSubmit"
          class="q-px-md q-py-xs"
          label="ส่งข้อความ"
          @click="sentMessenger"
        >
        </q-btn>
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
