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

import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";

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

import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";

/**
 * use
 */
const $q = useQuasar();
const link = ref<string>("");
const store = useRequestEditStore();
const dataStore = useDataStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();

/**
 *  props
 */
const modalInfo = ref<boolean>(false);
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  fetchData: { type: Function, requied: true },
});

const isReadOnly = ref<boolean>(false);
const profileId = ref<string>("");
const formData = reactive({
  topic: "",
  detail: "",
  document: null,
});
const topicOption = ref<string[]>(store.optionTopic);

function closeDialog() {
  modal.value = false;
  formData.topic = "";
  formData.detail = "";
  formData.document = null;
}

/**
 * function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .post(config.API.requestsEditByType(link.value), {
          topic: formData.topic,
          detail: formData.detail,
          [dataStore.officerType === "OFFICER"
            ? "profileId"
            : "profileEmployeeId"]: profileId.value,
        })
        .then(async (res) => {
          if (formData.document) {
            createURLUpload(res.data.result, formData.document);
          } else {
            formData.document = null;
            await props.fetchData?.();
            await success($q, "บันทึกข้อมูลสำเร็จ");
            closeDialog();
            hideLoader();
          }
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการยื่นคำร้อง",
    "ต้องการยืนยันการยื่นคำร้องนี้ใช่หรือไม่?"
  );
}

/**
 * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
 */
function createURLUpload(id: string, file: any) {
  const fileName = { fileName: file.name };
  http
    .post(
      config.API.file(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id
      ),
      {
        replace: false,
        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 &&
        uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
function uploadFileDoc(uploadUrl: string, file: any) {
  showLoader();
  axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async (res) => {
      await props.fetchData?.();
      await success($q, "บันทึกข้อมูลสำเร็จ");
      closeDialog();
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * class input
 * @param val
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/**
 * function ค้นหาข้อมูลใน select
 * @param val คำค้นหา
 * @param update Function
 */
function filterOption(val: string, update: Function) {
  update(() => {
    topicOption.value = store.optionTopic.filter(
      (v: any) => v.indexOf(val) > -1
    );
  });
}

/**
 * function fetch profileId
 */
async function fetchProfile() {
  try {
    isReadOnly.value = dataStore.officerType === "OFFICER";
    const res = await http.get(config.API.profilePosition());
    return res.data.result.profileId;
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
}

/** popup รายละเอียดของ ขอปรับปรุงข้อมูลจากกรมการปกครอง */
function onInfo(val: string) {
  formData.document = null;
  if (val == "ขอปรับปรุงข้อมูลจากกรมการปกครอง") {
    modalInfo.value = true;
  }
}

watch(
  () => modal.value,
  async () => {
    profileId.value = dataStore.profileId
      ? dataStore.profileId
      : await fetchProfile();

    link.value = await dataStore.getProFileType();
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="ยื่นคำร้องขอแก้ไขข้อมูล" :close="closeDialog" />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-xs-12 col-md-12">
              <q-select
                :class="classInput(isReadOnly)"
                v-model="formData.topic"
                label="เรื่องที่ต้องการแก้ไข"
                dense
                outlined
                emit-value
                map-options
                :options="topicOption"
                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเรื่อง'}`]"
                lazy-rules
                hide-bottom-space
                use-input
                @update:model-value="onInfo(formData.topic)"
                @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)"
                v-model="formData.detail"
                label="รายละเอียด"
                dense
                outlined
                type="textarea"
                hide-bottom-space
              />
            </div>

            <div class="col-xs-12 col-md-12">
              <q-file
                :class="classInput(isReadOnly)"
                v-model="formData.document"
                :label="
                  formData.topic == 'ขอแก้ไขรูปภาพประจำตัว'
                    ? 'อัปโหลดรูปภาพประจำตัว'
                    : 'อัปโหลดเอกสารหลักฐาน'
                "
                flat
                dense
                outlined
                :accept="
                  formData.topic == 'ขอแก้ไขรูปภาพประจำตัว'
                    ? 'image/*'
                    : '.pdf,.xlsx,.docx'
                "
                hide-bottom-space
                :rules="formData.topic !== 'ขอปรับปรุงข้อมูลจากกรมการปกครอง' && 
                formData.topic !== 'ขอแก้ไขข้อมูล คู่สมรส' && 
                formData.topic !== 'ขอแก้ไขข้อมูล บิดา' && 
                formData.topic !== 'ขอแก้ไขข้อมูล มารดา' && 
                formData.topic !== 'ขอแก้ไขที่อยู่ปัจจุบัน'?[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]:''"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="ยื่นคำร้อง" color="secondary" type="submit"
            ><q-tooltip>ยื่นคำร้อง</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <!-- popup รายละเอียดของ ขอปรับปรุงข้อมูลจากกรมการปกครอง -->
  <q-dialog v-model="modalInfo">
    <q-card style="width: 700px; max-width: 80vw">
      <DialogHeader
        tittle="ฟิลด์ที่อ่าน/อัปเดตข้อมูลจากกรมการปกครองผ่านทาง Linkage Center"
        :close="() => (modalInfo = false)"
      />
      <q-separator />

      <q-card-section class="q-pa-none">
        <ul class="list-main">
          <li>เลขประจำตัวประชาชน (ไม่สามารถแก้ไขได้)</li>
          <li>คำนำหน้า</li>
          <li>ชื่อ</li>
          <li>นามสกุล</li>
          <li>วัน เดือน ปีเกิด</li>
          <li>เพศ</li>
          <li>
            สถานภาพ (ดึงจากข้อมูลประวัติการจดทะเบียนสมรส,
            ข้อมูลประวัติการจดทะเบียนหย่า)
          </li>
          <li>สัญชาติ</li>
          <li>
            ที่อยู่ตามทะเบียนบ้าน
            <ul>
              <li>ที่อยู่ (บ้านเลขที่ หมู่ ตรอก ซอย ถนน ใส่ในฟิลด์นี้)</li>
              <li>แขวง/ตำบล</li>
              <li>เขต/อำเภอ</li>
              <li>จังหวัด</li>
              <li>รหัสไปรษณีย์</li>
            </ul>
          </li>
        </ul>
      </q-card-section>
      <q-separator />

      <q-card-actions align="right">
        <q-btn
          label="ตกลง"
          color="secondary"
          type="submit"
          @click="() => (modalInfo = false)"
          ><q-tooltip>ตกลง</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
.list-main li::marker {
  color: $primary;
}
</style>
