<script setup lang="ts">
import { onMounted, ref, reactive, computed } 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 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.requestEdit + `${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.requestEdit + `${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 "";
  }
}

onMounted(async () => {
  await fetchDataRequest();
});
</script>

<template>
  <div class="row items-center">
    <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 }}
    </div>
    <q-space />
    <q-btn
      v-if="workflowRef?.permission.isUpdate"
      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 || !workflowRef?.permission.isUpdate
                      )
                    "
                    :readonly="isReadOnly || !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"
                    @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 || !workflowRef?.permission.isUpdate
                      )
                    "
                    :readonly="isReadOnly || !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"
                >
                  <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-model:is-check-data="isCheckData"
            ref="workflowRef"
            :id="requestId"
            sys-name="REGISTRY_PROFILE"
          />
        </div>
      </div>
    </q-card-section>
  </q-card>

  <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>
