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

import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";

import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useCommandDetail();
const {
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogMessageNotify,
  messageError,
} = useCounterMixin();

const step = defineModel<number>("step", { required: true }); //ขั้นตอนการลงนาม
const { fetchData } = defineProps({
  fetchData: { type: Function, require: true },
});

const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง

//แบบร่าง
const isDraft = defineModel<boolean>("isDraft", { required: true });
const isCheckDraft = ref<boolean>(false); //เช็คทำแบบร่างเสร็จสิ้น

// รอผู้มีอำนาจลงนามอนุมัติ
const isAuthority = defineModel<boolean>("isAuthority", { required: true }); //ผู้มีอำนาจลงนามอนุมัติแล้ว

const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
// const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
// const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย

const isLoad = ref<boolean>(true); //แสดงโหลด
const modalPerView = ref<boolean>(false);
// สมมติว่ามีรายชื่อ
const attachmentList = ref<any[]>([]);
const attachmentFiles = ref<Record<number, any>>({});

const isFileTailer = computed(() => {
  // จำนวนไฟล์ที่อัปโหลดครบทุกคน
  return (
    attachmentList.value.length > 0 &&
    attachmentList.value.every((person) => !!attachmentFiles.value[person.id])
  );
});

/**
 * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
 */
function onConfirmDraft() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(config.API.command + `/draft/${commandId.value}`, {
          sign: isDraft.value,
        })
        .then(async () => {
          // router.push(`/command/view/${commandId.value}`);
          await fetchData?.();
          isCheckDraft.value = true;
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ",
    "คุณต้องการยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติใช่หรือไม่?"
  );
}

/**
 * ฟังก์ชันเลือกผู้มีอำนาจลงนามอนุมัติแล้ว
 * @param val ค่าที่เลือก เป็น boolean
 */
async function updateCheckboxAuthority(val: boolean) {
  showLoader();
  await http
    .put(config.API.command + `/pending-check/${commandId.value}`, {
      sign: val,
    })
    .then(() => {
      isAttachment.value && fetchLists();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันสร้าง URL อัปโหลดไฟล์
 * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
 */
function onUploadFile(group: string) {
  showLoader();
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
  // let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
  const fileName = { fileName: type };
  http
    .post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
      replace: true,
      fileList: fileName,
    })
    .then(async (res) => {
      const foundKey: string | undefined = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      foundKey &&
        (await uploadFileDoc(
          res.data[foundKey]?.uploadUrl,
          fileUploadOrder.value,
          group
        ));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชั่นสำหรับอัพโหลดไฟล์ "คำสั่ง","แนบท้าย"
 * @param uploadUrl URL อัปโหลดไฟล์
 * @param file ไฟล์ที่ต้องการอัปโหลด
 * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
 */
async function uploadFileDoc(
  uploadUrl: string,
  file: any,
  group: string,
  id?: string
) {
  const formData = new FormData();
  formData.append("file", file);
  showLoader();
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async () => {
      await fetchDoc(group);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      if (group === "order") {
        fileUploadOrder.value = null;
      } else {
        attachmentList.value.forEach((e) => {
          if (e.id === id) {
            e.file = null;
          }
        });
      }
      hideLoader();
    });
}

/**
 * ฟังก์ชันดึงข่อมูลไฟล์ "คำสั่ง","แนบท้าย"
 * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
 */
async function fetchDoc(group: string) {
  showLoader();
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
  if (group === "order") {
    await fetchDocOrder(type);
  } else {
    attachmentList.value.forEach(async (e) => {
      await fetchDocTailer(type, e.id);
    });
  }
}

async function fetchDocOrder(type: string) {
  await http
    .get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
    .then((res) => {
      const data = res.data[0];
      fileOrder.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

async function fetchDocTailer(type: string, id: string) {
  await http
    .get(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id))
    .then((res) => {
      const data = res.data[0];
      attachmentList.value.forEach((e) => {
        if (e.id === id) {
          attachmentFiles.value[e.id] = data;
        }
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

const dataFile = ref<DataFileDownload>();
/**
 * ดาวน์โหลดลิงก์ไฟล์
 * @param fileName file name
 */
function downloadFile(
  file: any,
  group: string,
  isView: boolean = false,
  id: string
) {
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";

  const pathApi =
    group === "order"
      ? config.API.fileByFile(
          "ระบบออกคำสั่ง",
          type,
          commandId.value,
          file.fileName
        )
      : config.API.subFileByFileName(
          "ระบบออกคำสั่ง",
          type,
          commandId.value,
          id,
          file.fileName
        );

  showLoader();
  http
    .get(pathApi)
    .then((res) => {
      const data = res.data;
      dataFile.value = data;
      if (isView) {
        modalPerView.value = true;
      } else {
        window.open(data.downloadUrl, "_blank");
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันยืนยันการส่งออกคำสั่ง
 */
function onConfirmOrder() {
  if (
    store?.dataCommand?.commandNo !== "" &&
    store?.dataCommand?.commandAffectDate !== null &&
    store?.dataCommand?.commandExcecuteDate !== null
  ) {
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        await http
          .put(config.API.command + `/pending/${commandId.value}`, {
            sign: isAuthority.value,
          })
          .then(async () => {
            await router.push(`/command/view/${commandId.value}`);
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(() => {
            hideLoader();
          });
      },
      "ยืนยันการส่งออกคำสั่ง",
      "คุณต้องการยืนยันการส่งออกคำสั่งใช่หรือไม่?"
    );
  } else {
    dialogMessageNotify(
      $q,
      "ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
    );
  }
}

/** ดึงข้อมูล บุคคล */
async function fetchLists() {
  await http
    .get(config.API.commandAction(commandId.value, "tab2"))
    .then(async (res) => {
      const data = await res.data.result;
      attachmentList.value = data.commandRecives.map((item: any) => ({
        id: item.citizenId,
        name: item.prefix + item.firstName + " " + item.lastName,
        file: null,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    });
}

function onUploadFileTailer(id: string, file: any) {
  const type = "แนบท้าย";
  const fileName = { fileName: type };

  http
    .post(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id), {
      replace: true,
      fileList: fileName,
    })
    .then(async (res) => {
      const foundKey: string | undefined = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      foundKey &&
        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, type, id));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  isCheckDraft.value = isDraft.value;
  isCheckAuthority.value = isAuthority.value;
  if (step.value !== 1) {
    isLoad.value = false;
    let promises = [fetchDoc("order")];
    if (isAttachment.value) {
      await fetchLists();
      promises.push(fetchDoc("tailer"));
    }
    await Promise.all(promises).finally(() => {
      isLoad.value = true;
    });
  }
});
</script>

<template>
  <div class="q-px-lg q-py-md" v-if="isLoad">
    <q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
      <!-- แบบร่าง -->
      <q-timeline-entry
        title="แบบร่าง"
        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : 'mdi-numeric-1'"
      >
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-checkbox
              v-model="isDraft"
              label="ทำแบบร่างเสร็จสิ้น: Print เอกสารเพื่อส่งเสนอผู้มีอำนาจลงนาม"
              :disable="isCheckDraft || store.readonly"
            />
          </div>

          <div class="col-12" v-if="!isCheckDraft">
            <q-btn
              v-if="!store.readonly"
              @click.prevent="onConfirmDraft"
              label="ส่งให้ผู้มีอำนาจลงนามอนุมัติ"
              :color="!isDraft ? 'grey-5' : 'public'"
              :disable="!isDraft"
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอผู้มีอำนาจลงนามอนุมัติ -->
      <q-timeline-entry
        title="รอผู้มีอำนาจลงนามอนุมัติ"
        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : 'mdi-numeric-2'"
        :color="step < 2 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckDraft">
          <div class="col-12">
            <q-checkbox
              @update:model-value="updateCheckboxAuthority"
              v-model="isAuthority"
              label="ผู้มีอำนาจลงนามอนุมัติแล้ว"
              :disable="step > 2 || isAuthority || store.readonly"
            />
          </div>

          <div class="row col-12" style="padding-left: 50px" v-if="isAuthority">
            <div class="col-12 text-header">
              อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
            </div>
            <div class="col-6 q-col-gutter-sm">
              <div class="col-6">
                <q-card
                  bordered
                  class="row col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                  >
                    คำสั่ง
                    <q-space />
                    <q-btn
                      v-if="fileOrder"
                      rounded
                      flat
                      dense
                      color="primary"
                      icon="mdi-eye"
                      @click.prevent="
                        downloadFile(fileOrder, 'order', true, '')
                      "
                    >
                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                    </q-btn>
                    <q-btn
                      v-if="fileOrder"
                      rounded
                      flat
                      dense
                      color="red"
                      icon="mdi-download"
                      @click.prevent="
                        downloadFile(fileOrder, 'order', false, '')
                      "
                    >
                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                    </q-btn>
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-12 q-pa-md" v-if="step === 2">
                    <q-file
                      outlined
                      dense
                      v-model="fileUploadOrder"
                      label="เลือกไฟล์คำสั่ง"
                      hide-bottom-space
                      accept=".pdf"
                      :readonly="store.readonly"
                    >
                      <template v-slot:prepend>
                        <q-icon name="attach_file" />
                      </template>

                      <template v-slot:after>
                        <q-btn
                          @click.prevent="onUploadFile('order')"
                          flat
                          round
                          icon="mdi-upload"
                          :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
                          :disable="fileUploadOrder == null"
                        />
                      </template>
                    </q-file>
                  </div>
                </q-card>
              </div>

              <div class="col-6" v-if="isAttachment">
                <q-card
                  bordered
                  class="row col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                  >
                    เอกสารแนบท้าย
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="row col-12 q-pa-md q-col-gutter-sm">
                    <div
                      v-for="(person, idx) in attachmentList"
                      :key="person.id"
                      class="col-12"
                    >
                      <q-card flat bordered class="q-pa-sm">
                        <div class="row items-center">
                          <div class="text-weight-medium">
                            {{ person.name }}
                          </div>
                          <q-space />
                          <q-btn
                            v-if="attachmentFiles[person.id]"
                            @click.prevent="
                              downloadFile(
                                attachmentFiles[person.id],
                                'tailer',
                                true,
                                person.id
                              )
                            "
                            flat
                            dense
                            color="primary"
                            icon="mdi-eye"
                            class="q-mr-xs"
                          >
                            <q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
                          </q-btn>
                          <q-btn
                            v-if="attachmentFiles[person.id]"
                            @click.prevent="
                              downloadFile(
                                attachmentFiles[person.id],
                                'tailer',
                                false,
                                person.id
                              )
                            "
                            flat
                            dense
                            color="red"
                            icon="mdi-download"
                          >
                            <q-tooltip>ดาวน์โหลดไฟล์เอกสารแนบท้าย</q-tooltip>
                          </q-btn>
                        </div>
                        <q-file
                          v-if="step === 2"
                          outlined
                          dense
                          v-model="person.file"
                          label="เลือกไฟล์เอกสารแนบท้าย"
                          hide-bottom-space
                          accept=".pdf"
                          :readonly="store.readonly"
                          class="full-width"
                        >
                          <template v-slot:prepend>
                            <q-icon name="attach_file" />
                          </template>
                          <template v-slot:after>
                            <q-btn
                              @click.prevent="
                                onUploadFileTailer(person.id, person.file)
                              "
                              flat
                              round
                              icon="mdi-upload"
                              :color="person.file == null ? 'grey-5' : 'blue-5'"
                              :disable="person.file == null"
                            />
                            <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
                          </template>
                        </q-file>
                      </q-card>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
          </div>

          <div
            class="col-12"
            v-if="
              step === 2 &&
              isAuthority &&
              fileOrder &&
              (!isAttachment || isFileTailer)
            "
          >
            <q-btn
              v-if="!store.readonly"
              @click.prevent="onConfirmOrder"
              label="ยืนยันออกคำสั่ง"
              :color="
                !isAuthority ||
                fileOrder === null ||
                (!isFileTailer && isAttachment)
                  ? 'grey-5'
                  : 'public'
              "
              :disable="
                !isAuthority ||
                fileOrder === null ||
                (!isFileTailer && isAttachment)
              "
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="รอออกคำสั่ง"
        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : 'mdi-numeric-3'"
        :color="step < 3 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
          <!-- <div class="col-12">รอออกคำสั่ง</div> -->
        </div>
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="ออกคำสั่งเสร็จสิ้น"
        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : 'mdi-numeric-4'"
        :color="step < 4 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm">
          <!-- <div class="col-12">รอออกคำสั่ง</div> -->
        </div>
      </q-timeline-entry>
    </q-timeline>
  </div>

  <div class="full-width row flex-center text-accent q-gutter-sm" v-else>
    <span
      ><div
        style="
          height: 50vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        "
        class="text-grey-5"
      >
        <q-spinner color="primary" size="3em" :thickness="10" />
      </div>
    </span>
  </div>

  <PerviewPDF
    v-model:modal="modalPerView"
    v-model:data-file="dataFile as DataFileDownload"
  />
</template>

<style lang="scss" scoped>
.text-header {
  color: #34373c;
  font-size: 1rem;
  font-weight: 300;
}
</style>
