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

import { useRouter, useRoute } from "vue-router";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";

import Workflow from "@/components/Workflow/Main.vue";
import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
import DialogUpdateFather from "@/modules/04_registryPerson/components/Dialog/04_Father.vue";
import DialogUpdateMother from "@/modules/04_registryPerson/components/Dialog/05_Mother.vue";
import DialogUpdateCouple from "@/modules/04_registryPerson/components/Dialog/06_Couple.vue";

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const typeEmp = ref<string>(
  route.name === "registryNewRequestEditEmpDetail" ? "employee" : ""
);
const store = useRequestEditStore();
const {
  dialogConfirm,
  date2Thai,
  showLoader,
  hideLoader,
  messageError,
  success,
} = useCounterMixin();

const modalUpdate = ref<boolean>(false);
const modalFather = ref<boolean>(false);
const modalMother = ref<boolean>(false);
const modalCouple = ref<boolean>(false);

const profileId = ref<string>("");
const citizenId = ref<string>("");
const requestId = ref<string>(route.params.id.toString());
const dataRequest = ref<DataRequest>({
  id: "",
  fullname: "",
  createdAt: "",
  topic: "",
  detail: "",
  status: "",
  citizenId: "",
});

//ฟอร์มสถานะคำร้อง
const formData = reactive({
  status: "", //สถานะ
  remark: "", //หมายเหตุ
});

const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
const workflowRef = ref<any>(null);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
  store.optionStatus.filter((e) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

const isCheckData = computed(() => {
  if (isReadOnly.value === true) {
    return true;
  } else return false;
});

/** function fetch ข้อมูลคำร้องแก้ไข*/
async function fetchDataRequest() {
  showLoader();
  await http
    .get(
      config.API.requestEditByType(
        typeEmp.value == "employee" ? "-employee" : ""
      ) + `${requestId.value}`
    )
    .then((res) => {
      const data = res.data.result;
      dataRequest.value = data;

      formData.status = data.status;
      formData.remark = data.remark;

      if (data.status !== "PENDING") {
        isReadOnly.value = true;
      } else {
        isReadOnly.value = false;
      }

      onDownloadFile(requestId.value);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function บันทึกรายการคำร้อง*/
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .patch(
        config.API.requestEditByType(
          typeEmp.value === "employee" ? "-employee" : ""
        ) + `${requestId.value}`,
        {
          status: formData.status,
          remark: formData.remark,
        }
      )
      .then(async () => {
        await fetchDataRequest();
        await success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function ค้นหาคำใน select  สถานะคำร้อง
 * @param val คำค้น
 * @param update Function
 */
function filterOption(val: string, update: Function) {
  update(() => {
    statusOption.value = statusOptionMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
}

/**
 * class inpui
 * @param val ค่าสถานะ
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
const urlDownload = ref<string>(""); // url ไฟล์อัปโหลด
/**
 * function หาชื่อไฟล์
 * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
 */
function onDownloadFile(id: string) {
  http
    .get(
      config.API.file(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id
      )
    )
    .then(async (res) => {
      if (res.data.length !== 0) {
        await downloadUrl(id, res.data[0].fileName);
      } else {
        checkFile.value = false;
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * function  โหลดไฟล์
 * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
 * @param fileName  ชื่อไฟล์
 */
async function downloadUrl(id: string, fileName: string) {
  await http
    .get(
      config.API.fileByFile(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id,
        fileName
      )
    )
    .then((res) => {
      urlDownload.value = res.data.downloadUrl;
      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
        checkFile.value = "img";
      } else {
        checkFile.value = "doc";
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function onUpdate(data: DataRequest) {
  citizenId.value = data.citizenId as string;
  if (data.topic == "ขอปรับปรุงข้อมูลจากกรมการปกครอง") {
    modalUpdate.value = true;
  } else if (data.topic == "ขอแก้ไขข้อมูล บิดา") {
    modalFather.value = true;
  } else if (data.topic == "ขอแก้ไขข้อมูล มารดา") {
    modalMother.value = true;
  } else if (data.topic == "ขอแก้ไขข้อมูล คู่สมรส") {
    modalCouple.value = true;
  }
}

function topicConvert(type: string) {
  switch (type) {
    case "ขอแก้ไขข้อมูล บิดา":
      return "ขอปรับปรุงข้อมูลบิดาจากกรมการปกครอง";
    case "ขอแก้ไขข้อมูล มารดา":
      return "ขอปรับปรุงข้อมูลมารดาจากกรมการปกครอง";
    case "ขอแก้ไขข้อมูล คู่สมรส":
      return "ขอปรับปรุงข้อมูลคู่สมรสจากกรมการปกครอง";
    case "ขอปรับปรุงข้อมูลจากกรมการปกครอง":
      return "ปรับปรุงข้อมูลจากกรมการปกครอง";
    default:
      return "";
  }
}

const isStaff = ref<boolean>(false);
function fetchCheckIsofficer() {
  if (typeEmp.value === "employee") {
    http
      .get(config.API.workflowKeycloakSystem("REGISTRY_PROFILE_EMP"))
      .then((res) => {
        isStaff.value = res.data.result.isStaff;
      })
      .catch((err) => {
        messageError($q, err);
      });
  }
}

onMounted(async () => {
  await Promise.all([fetchDataRequest(), fetchCheckIsofficer()]);
});
</script>

<template>
  <div class="q-gutter-sm q-pa-sm">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติของ{{ dataRequest.fullname }}
      <q-space />
      <q-btn
        v-if="
          (typeEmp !== 'employee' &&
            workflowRef?.permission.isUpdate &&
            topicConvert(dataRequest.topic) !== '' &&
            !isReadOnly) ||
          (typeEmp === 'employee' &&
            isStaff &&
            topicConvert(dataRequest.topic) !== '' &&
            !isReadOnly)
        "
        color="public"
        :label="topicConvert(dataRequest.topic)"
        @click="onUpdate(dataRequest)"
      >
        <q-tooltip>{{ topicConvert(dataRequest.topic) }}</q-tooltip>
      </q-btn>
    </div>

    <q-card>
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <!-- รายละเอียดคำร้องขอแก้ไข -->
          <div class="col-12">
            <q-card bordered class="row col-12">
              <div class="bg-grey-1 q-pa-sm col-12 row items-center">
                <div class="q-pl-sm text-weight-bold text-dark">
                  รายละเอียดคำร้องขอแก้ไข
                </div>
              </div>
              <div class="col-12"><q-separator /></div>
              <q-card-section class="col-12">
                <div class="row q-col-gutter-sm">
                  <!-- วันที่ยื่นขอ -->
                  <div class="col-md-2 col-xs-12">
                    <datepicker
                      menu-class-name="modalfix"
                      v-model="dataRequest.createdAt"
                      :locale="'th'"
                      autoApply
                      readonly
                      borderless
                      :enableTimePicker="false"
                      week-start="0"
                    >
                      <template #year="{ year }">
                        {{ year + 543 }}
                      </template>
                      <template #year-overlay-value="{ value }">
                        {{ parseInt(value + 543) }}
                      </template>
                      <template #trigger>
                        <q-input
                          outlined
                          readonly
                          dense
                          hide-bottom-space
                          class="full-width"
                          :model-value="
                            dataRequest.createdAt != null
                              ? date2Thai(dataRequest.createdAt as Date)
                              : null
                          "
                          :label="`${'วันที่ยื่นขอ'}`"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>

                  <!-- เรื่อง -->
                  <div class="col-md-10 col-xs-12">
                    <q-input
                      :class="classInput(true)"
                      readonly
                      v-model="dataRequest.topic"
                      label="เรื่องที่ต้องการแก้ไข"
                      dense
                      outlined
                    />
                  </div>

                  <!-- รายละเอียด -->
                  <div class="col-12">
                    <q-input
                      :class="classInput(true)"
                      readonly
                      v-model="dataRequest.detail"
                      label="รายละเอียด"
                      dense
                      outlined
                      type="textarea"
                    />
                  </div>

                  <div v-if="checkFile != null && checkFile != false">
                    <div class="text-weight-bold text-dark col-12">
                      {{
                        checkFile == "img" ? "รูปภาพประจำตัว" : "เอกสารหลักฐาน"
                      }}
                    </div>
                    <div class="col-12">
                      <!-- เอกสารหลักฐาน -->
                      <q-btn
                        v-if="checkFile == 'doc'"
                        icon="mdi-download"
                        dense
                        flat
                        label="ดาวน์โหลดเอกสารหลักฐาน"
                        color="blue"
                        :href="urlDownload"
                        target="_blank"
                      />
                      <div
                        v-else-if="checkFile == 'img'"
                        class="q-pa-md q-gutter-sm"
                      >
                        <q-avatar size="120px" color="grey-4">
                          <img
                            :src="urlDownload"
                            class="bg-grey-3"
                            style="object-fit: cover"
                          />
                        </q-avatar>
                      </div>
                    </div>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>

          <!-- แก้ไขสถานะคำร้อง -->
          <q-form
            class="col-12"
            greedy
            @submit.prevent
            @validation-success="onSubmit"
          >
            <q-card bordered class="row col-12">
              <div class="bg-grey-1 q-pa-sm col-12 row items-center">
                <div class="q-pl-sm text-weight-bold text-dark">
                  แก้ไขสถานะคำร้อง
                </div>
              </div>
              <div class="col-12"><q-separator /></div>
              <q-card-section class="col-12">
                <div class="row q-col-gutter-sm">
                  <div class="col-xs-12 col-md-12">
                    <q-select
                      :class="
                        classInput(
                          isReadOnly ||
                            (typeEmp === 'employee' && !isStaff) ||
                            (typeEmp !== 'employee' &&
                              !workflowRef?.permission.isUpdate)
                        )
                      "
                      :readonly="
                        isReadOnly ||
                        (typeEmp === 'employee' && !isStaff) ||
                        (typeEmp !== 'employee' &&
                          !workflowRef?.permission.isUpdate)
                      "
                      v-model="formData.status"
                      label="สถานะ"
                      dense
                      outlined
                      emit-value
                      map-options
                      :options="statusOption"
                      :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
                      lazy-rules
                      hide-bottom-space
                      use-input
                      option-label="name"
                      option-value="id"
                      hide-selected
                      fill-input
                      @filter="(inputValue:string,
                            doneFn:Function) => filterOption(inputValue, doneFn
                            ) "
                    >
                      <template v-slot:no-option>
                        <q-item>
                          <q-item-section class="text-grey">
                            ไม่มีข้อมูล
                          </q-item-section>
                        </q-item>
                      </template>
                    </q-select>
                  </div>

                  <div class="col-xs-12 col-md-12">
                    <q-input
                      :class="
                        classInput(
                          isReadOnly ||
                            (typeEmp === 'employee' && !isStaff) ||
                            (typeEmp !== 'employee' &&
                              !workflowRef?.permission.isUpdate)
                        )
                      "
                      :readonly="
                        isReadOnly ||
                        (typeEmp === 'employee' && !isStaff) ||
                        (typeEmp !== 'employee' &&
                          !workflowRef?.permission.isUpdate)
                      "
                      v-model="formData.remark"
                      label="หมายเหตุ"
                      dense
                      outlined
                      type="textarea"
                      hide-bottom-space
                    />
                  </div>

                  <div
                    class="row col-12 justify-end"
                    v-if="
                      (!isReadOnly && workflowRef?.permission.isUpdate) ||
                      (typeEmp === 'employee' && isStaff && !isReadOnly)
                    "
                  >
                    <q-btn label="บันทึก" color="secondary" type="submit"
                      ><q-tooltip>บันทึก</q-tooltip></q-btn
                    >
                  </div>
                </div>
              </q-card-section>
              <q-separator />
            </q-card>
          </q-form>

          <div class="col-12">
            <Workflow
              v-if="typeEmp != 'employee'"
              v-model:is-check-data="isCheckData"
              ref="workflowRef"
              :id="requestId"
              sys-name="REGISTRY_PROFILE"
            />
          </div>
        </div>
      </q-card-section>
    </q-card>
  </div>

  <DialogUpdate
    v-model:modal="modalUpdate"
    v-model:id-card="dataRequest.citizenId"
    v-model:profile-id="profileId"
    :fetch-data="fetchDataRequest"
    :request-id="requestId"
  />

  <DialogUpdateFather
    v-model:modal="modalFather"
    v-model:id-card="dataRequest.citizenId"
    v-model:profile-id="profileId"
    :fetch-data="fetchDataRequest"
    :request-id="requestId"
  />

  <DialogUpdateMother
    v-model:modal="modalMother"
    v-model:id-card="dataRequest.citizenId"
    v-model:profile-id="profileId"
    :fetch-data="fetchDataRequest"
    :request-id="requestId"
  />

  <DialogUpdateCouple
    v-model:modal="modalCouple"
    v-model:id-card="dataRequest.citizenId"
    v-model:profile-id="profileId"
    :fetch-data="fetchDataRequest"
    :request-id="requestId"
  />
</template>

<style scoped></style>
