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

import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";

import DialogHeader from "@/components/DialogHeader.vue";

/** uer*/
const store = useEvaluateDetailStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();

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

const checkBox = ref<string>("");
const evaluationResult = ref<string>("");
const id = ref<string>(route.params.id as string);
const modalConfirm = ref<boolean>(false);
const nameOfWork = ref<string>("");
const nameOfOwner = ref<string>("");
const position = ref<string>("");

const formTemplates = ref<any[]>([
  {
    code: "เอกสารแบบ ค",
    templateName: "template-4",
    title:
      " แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน(เอกสารแบบ ค)",
    fileName:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)",
    downloadFile: "",
    file: null,
  },
  {
    code: "เอกสารหมายเลข 15",
    templateName: "template-4",
    title: "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)",
    fileName: "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)",
    downloadFile: "",
    file: null,
  },
  {
    code: "เอกสารหมายเลข 16",
    templateName: "template-4",
    title: "  แบบประเมินผลงาน (เอกสารหมายเลข 16)",
    fileName: "แบบประเมินผลงาน (เอกสารหมายเลข 16)",
    downloadFile: "",
    file: null,
  },
  {
    code: "เอกสารหมายเลข 17",
    templateName: "template-4",
    title: "   แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)",
    fileName: "แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)",
    downloadFile: "",
    file: null,
  },

  {
    code: "เอกสารหมายเลข 18",
    templateName: "template-4",
    title: "  แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)",
    fileName: "แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)",
    downloadFile: "",
    file: null,
  },

  {
    code: "เอกสารแบบ ง",
    templateName: "template-4",
    title: "แบบสรุปผลการประเมิน (เอกสารแบบ ง)",
    fileName: "แบบสรุปผลการประเมิน (เอกสารแบบ ง)",
    downloadFile: "",
    file: null,
  },
]);

/** ติดต่อผู้ขอประเมิน*/
const messenger = ref<string>(""); //ข้อความ
const title = ref<string>(""); //หัวข้อ
const modalEvaluation = ref<boolean>(false); //แสดง popup ติดต่อผู้ขอประเมิน

/** function ดาวน์โหลดไฟล์ต้นแบบ*/
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  await http
    .get(config.API.evaluateGetReport(id.value))
    .then(async (res) => {
      const data = res.data.result;
      const body = {
        template: tp,
        reportName: templateName,
        data: data,
      };
      await genReport(body, fileName);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function เรียก link อัปโหลด
 * @param name ชื่อไฟล์
 * @param file ไฟล์
 */
function upLoadFile(name: string, file: any) {
  if (file) {
    showLoader();
    http
      .post(config.API.evaluationFileListbyId("เล่ม 2", id.value), {
        fileList: {
          fileName: name,
          metadata: {
            tag: "value",
            author: author.value,
            subject: subject.value,
            assignedPosition: assignedPosition.value,
          },
        },
      })
      .then(async (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;
        await fileUpLoad(link, file);
        await downloadFileList(name);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/**
 * function อัปโหลดไฟล์
 * @param url link อัปโหลด
 * @param file ไฟล์
 */
async function fileUpLoad(url: string, file: any) {
  await axios
    .put(url, file, {
      headers: { "Content-Type": file?.type },
      onUploadProgress: (e) => console.log(e),
    })
    .then(() => {
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  if (formTemplates.value.some((e: any) => e.downloadFile === "")) {
    for (let i = 0; i < formTemplates.value.length; i++) {
      if (formTemplates.value[i].downloadFile === "") {
        formTemplates.value[i].file = null;
      }
    }
  } else {
    modalConfirm.value = true;
  }
}

/** function ยืนยันผลการพิจารณา */
async function confirmApprove() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const data = {
        metadata: {
          additionalProp1: nameOfWork.value,
          additionalProp2: nameOfOwner.value,
          additionalProp3: position.value,
        },
      };
      await http
        .patch(
          config.API.evaluationPatchData("เล่ม 2", id.value, "1-เอกสารเล่ม 2"),
          data
        )
        .then(async () => {
          await Promise.all([updateEvaluationResult(), nextStep()]);
          modalConfirm.value = false;
          store.step = 9;
          store.currentStep = 9;
          success($q, "ยืนยันผลการพิจารณาสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันผลการพิจารณา",
    "ต้องการยืนยันผลการพิจารณาใช่หรือไม่?"
  );
}

/**  function ยืนยันผลการพิจารณา*/
async function nextStep() {
  await http
    .put(config.API.evaluationNextFinish(id.value))
    .then(() => {})
    .catch((e) => {
      messageError($q, e);
    });
}

const downloadDocEditUrl = ref<string>("");

/** function ตรวจสอบไฟล์แก้ไข*/
async function checkDocEdit() {
  await http
    .get(
      config.API.evaluationPatchData(
        "เล่ม 2",
        id.value,
        "2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
      )
    )
    .then((res: any) => {
      downloadDocEditUrl.value = res.data.downloadUrl;
    });
}

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

const author = ref<string>(""); //เจ้าของผลงาน
const subject = ref<string>(""); //ชื่อผลงาน
const assignedPosition = ref<string>(""); //ตำแหน่ง
const assignedPosLevel = ref<string>(""); //ระดับตำแหน่ง

/** function เรียกข้อมูลผลงาน*/
async function fetchDataSigner() {
  await http
    .get(config.API.evaluationSigner(id.value, 2))
    .then((res) => {
      const data = res.data.result;
      if (data) {
        author.value = data.authorDoc2;
        subject.value = data.subjectDoc2;
        assignedPosition.value = data.assignedPosition;
        assignedPosLevel.value = data.assignedPosLevel;

        nameOfWork.value = data.subjectDoc2 ? data.subjectDoc2[0] : "";
        nameOfOwner.value = data.authorDoc2;
        position.value = data.assignedPosition;
        evaluationResult.value = data.evaluationResult;
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
}

async function updateEvaluationResult() {
  await http
    .put(config.API.updateEvaluationResult(id.value), {
      result: checkBox.value,
    })
    .then(() => {})
    .catch((e) => {
      messageError($q, e);
    });
}

/**  fiunction ส่งข้อความ*/
async function onSentMessenger() {
  showLoader();
  await http
    .put(config.API.evaluationSentToContact(id.value), {
      subject: title.value,
      body: messenger.value,
    })
    .then(() => {
      success($q, "ส่งข้อความสำเร็จ");
      title.value = "";
      messenger.value = "";
      modalEvaluation.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  try {
    showLoader();
    await Promise.all([
      fetchDataSigner(),
      Promise.all(
        formTemplates.value.map((e) => downloadFileList(e.fileName))
      ),
      checkDocEdit(),
    ]);
  } catch (error) {
    console.log(error);
  } finally {
    hideLoader();
  }
});

</script>

<template>
  <div class="row q-col-gutter-sm q-pa-sm">
    <q-form
      class="row q-col-gutter-sm"
      greedy
      @submit.prevent
      @validation-success="onSubmit"
    >
      <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">
            เอกสารที่เกี่ยวข้องกับการประเมิน
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-sm col-12">
              <div
                class="col-6"
                v-for="(item, index) in formTemplates"
                :key="index"
              >
                <q-card bordered style="border: 1px solid #d6dee1">
                  <div
                    class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
                  >
                    <div class="col-xs-12 col-sm-9">
                      {{ item.title }}
                    </div>
                    <q-space />
                    <div class="col-xs-12 col-sm-3 row justify-end">
                      <div v-if="store.currentStep == 8">
                        <q-btn
                          class="col-12"
                          flat
                          dense
                          icon="download"
                          color="indigo"
                          @click="
                            onClickDowloadFile(
                              item.code,
                              item.templateName,
                              item.code
                            )
                          "
                        >
                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                        >
                      </div>
                      <div>
                        <q-btn
                          v-if="item.downloadFile"
                          :href="item.downloadFile"
                          target="_blank"
                          class="col-12"
                          flat
                          dense
                          icon="visibility"
                          color="blue"
                        >
                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                        >
                      </div>
                    </div>
                  </div>
                  <div class="col-12" v-if="store.currentStep == 8">
                    <q-separator />
                  </div>
                  <div
                    class="row col-12 q-pa-sm"
                    v-if="
                      store.currentStep == 8 &&
                      checkPermission($route)?.attrIsUpdate
                    "
                  >
                    <div class="row col-12">
                      <q-file
                        v-model="item.file"
                        outlined
                        hide-bottom-space
                        lazy-rules
                        label="อัปโหลดไฟล์"
                        class="col-12"
                        dense
                        accept=".pdf"
                        :rules="
                      item.downloadFile === ''
                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                          : []
                      "
                      >
                        <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="upLoadFile(item.fileName, item.file)"
                            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                          >
                        </template>
                      </q-file>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
          </div>
        </q-card>
      </div>
      <div class="col-12" v-if="downloadDocEditUrl !== ''">
        <q-card bordered style="border: 1px solid #d6dee1">
          <div
            class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md"
          >
            <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
            <q-space />
            <div>
              <q-btn
                :href="downloadDocEditUrl"
                target="_blank"
                class="col-12"
                icon="visibility"
                color="blue"
                flat
                dense
              >
                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
              >
            </div>
          </div>
        </q-card>
      </div>

      <div
        v-if="store.currentStep == 8 && checkPermission($route)?.attrIsUpdate"
        class="col-12"
      >
        <!-- @click="modalConfirm = true" -->
        <div align="right">
          <q-btn
            class="q-mr-sm"
            label="ติดต่อผู้ขอประเมิน"
            color="info"
            @click="modalEvaluation = true"
          />
          <q-btn
            type="submit"
            unelevated
            label="ยืนยันผลการพิจารณา"
            color="public"
          />
        </div>
      </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>
    </q-form>
  </div>

  <!-- dialog ยืนยันผลการพิจารณา -->
  <q-dialog v-model="modalConfirm" persistent>
    <q-card style="min-width: 60vw">
      <DialogHeader
        tittle="ยืนยันผลการพิจารณา"
        :close="() => (modalConfirm = false)"
      />

      <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="nameOfWork"
              label="ชื่อผลงาน"
              outlined
              dense
              bg-color="white"
            />
          </div>
          <div class="col-6">
            <q-input
              v-model="nameOfOwner"
              label="ชื่อเจ้าของผลงาน"
              outlined
              dense
              bg-color="white"
            />
          </div>
          <div class="col-3">
            <q-input
              v-model="assignedPosition"
              label="ตำแหน่งที่ได้รับ"
              outlined
              dense
              bg-color="white"
            />
          </div>
          <div class="col-3">
            <q-input
              v-model="assignedPosLevel"
              label="ระดับตำแหน่งที่ได้รับ"
              outlined
              dense
              bg-color="white"
            />
          </div>
        </div>
        <div class="row q-gutter-x-sm q-pt-sm">
          <q-radio
            v-model="checkBox"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            size="sm"
            dense
            val="PASS"
            label="ผ่าน"
          />
          <q-radio
            v-model="checkBox"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            size="sm"
            dense
            val="NOTPASS"
            label="ไม่ผ่าน"
          />
        </div>
      </q-card-section>
      <q-separator />

      <div class="row justify-end q-px-md q-py-sm items-center">
        <q-btn
          :disable="checkBox == ''"
          dense
          color="public"
          class="q-px-md q-py-xs"
          label="ยืนยัน"
          @click="confirmApprove"
        >
        </q-btn>
      </div>
    </q-card>
  </q-dialog>

  <!--  popup ติดต่อผู้ขอประเมิน -->
  <q-dialog v-model="modalEvaluation" persistent>
    <q-card style="min-width: 60vw">
      <q-form greedy @submit.prevent @validation-success="onSentMessenger">
        <DialogHeader
          tittle="ติดต่อผู้ขอประเมิน"
          :close="
            () => ((modalEvaluation = false), (title = ''), (messenger = ''))
          "
        />
        <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"
                hide-bottom-space
                :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="messenger"
                label="ข้อความ"
                type="textarea"
                outlined
                dense
                bg-color="white"
                hide-bottom-space
                :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn color="public" type="submit" label="ส่งข้อความ" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
