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

import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { OptionPeriod } from "@/modules/07_insignia/interface/index/Main";

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

/** use*/
const $q = useQuasar();
const {
  date2Thai,
  dateToISO,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  success,
} = useCounterMixin();

/**
 * props
 */
const modal = defineModel<boolean>("modal", { required: true });
const actionType = defineModel<string>("actionType", { required: true });
const roundId = defineModel<string>("roundId", { required: true });
const props = defineProps({
  fetchList: { type: Function, required: true },
});

//ชื่อ popup
const title = computed(() => {
  return actionType.value === "view"
    ? "รายละเอียดรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
    : actionType.value === "edit"
    ? "แก้ไขข้อมูล"
    : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์";
});
//อ่านอย่างเดียว
const readonly = computed(() => {
  return actionType.value === "view" ? true : false;
});

const roundInsig = ref<any>(); //รอบการเสนอขอพระราชทานเครื่องราชฯ
const yearly = ref<number>(new Date().getFullYear()); //ปีที่เสนอ
const dateStart = ref<Date | null>(null); //วันเริ่มต้น
const dateEnd = ref<Date | null>(null); //วันสิ้นสุด
const datelast = ref<number | null>(null); //จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด
const files = ref<any>(); //เอกสารประกอบ
const fileDocDataUpload = ref<File[]>([]); //รายการเอกสารประกอบ

//ตัวเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ
const options = ref<OptionPeriod[]>([
  { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 1", value: 1 },
  { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 2", value: 2 },
]);

/**
 * Function เรียกข้อมูลของรอบการเสนอขอ
 */
function fetchData() {
  showLoader();
  http
    .get(config.API.getRoundInsignia(roundId.value))
    .then(async (res) => {
      const data = await res.data.result;
      roundInsig.value =
        options.value.filter((r: OptionPeriod) => r.value == data.period_round)
          .length > 0
          ? options.value.filter(
              (r: OptionPeriod) => r.value == data.period_round
            )[0]
          : null;
      yearly.value = data.period_year;
      datelast.value = data.period_amount;
      dateStart.value = new Date(data.period_start);
      dateEnd.value = new Date(data.period_end);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * Function อัพเดทวันที่เริ่มต้น และ สิ้นสุด
 */
function updateDateRange() {
  if (roundInsig.value.value == 1) {
    dateStart.value = new Date(yearly.value, 9, 1);
    dateEnd.value = new Date(yearly.value + 1, 3, 29);
  } else if (roundInsig.value.value == 2) {
    dateStart.value = new Date(yearly.value + 1, 3, 29);
    dateEnd.value = new Date(yearly.value + 1, 4, 29);
  }
}

/**
 * Function อัพเดทปี
 * @param year รับค่าปี คศ
 */
function updateYear(year: number) {
  yearly.value = year;
  updateDateRange();
}

/**
 * Function อัพโหลดไฟล์
 * @param files ไฟล์
 */
function fileUploadDoc(files: any) {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
}

/**
 * Function บันทึกข้อมูล
 */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const formData = new FormData();
    const name = `รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ ${
      roundInsig.value.value
    }  ปี ${yearly.value + 543} `;
    formData.append("name", name);
    formData.append("year", yearly.value.toString());
    formData.append("amount", datelast.value ? datelast.value.toString() : "");
    formData.append("round", roundInsig.value.value);
    if (dateStart.value !== null) {
      formData.append("startDate", dateToISO(dateStart.value));
    }
    if (dateEnd.value !== null) {
      formData.append("endDate", dateToISO(dateEnd.value));
    }
    formData.append("file", files.value);
    const url =
      actionType.value !== "edit"
        ? config.API.listRoundInsignia()
        : config.API.editRoundInsignia(roundId.value);

    const httpMethod = actionType.value !== "edit" ? http.post : http.put;

    httpMethod(url, formData)
      .then(async () => {
        await props.fetchList();
        await success($q, "บันทึกข้อมูลสำเร็จ");
        onCloseDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function ปิด popup รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
 *
 * และกำหนดตัวแปรเป็นค่า Defult
 */
function onCloseDialog() {
  modal.value = false;
  roundInsig.value = "";
  yearly.value = new Date().getFullYear();
  dateStart.value = null;
  dateEnd.value = null;
  datelast.value = null;
  files.value = null;
  fileDocDataUpload.value = [];
}

/**
 *  function คืนค่าชื่อคลาสตามค่าที่กำหนด
 * @param val ค่ากำหนดว่าจะแสดงคลาสไหน
 * @returns ชื่อคลาส
 */
function classInput(val: boolean) {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
}

/**
 * ทำงานเมื่อ modal เป็น true  actionType เป็น view
 *
 *
 */
watch(
  () => modal.value,
  () => {
    if (modal.value) {
      if (actionType.value !== "") {
        fetchData();
      }
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 1200px; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader :tittle="title" :close="onCloseDialog" />
        <q-separator />

        <q-card-section>
          <div class="col-12 row q-col-gutter-md">
            <div class="col-md-10 col-xs-12">
              <q-select
                :class="classInput(!readonly)"
                :readonly="readonly"
                dense
                outlined
                v-model="roundInsig"
                :options="options"
                option-value="value"
                option-label="label"
                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
                @update:model-value="updateDateRange"
                :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบที่'}`]"
                hide-bottom-space
                lazy-rules
              />
            </div>
            <div class="col-md-2 col-xs-12">
              <datepicker
                :class="classInput(!readonly)"
                :readonly="readonly"
                menu-class-name="modalfix"
                v-model="yearly"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
                @update:modelValue="updateYear"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    :class="classInput(!readonly)"
                    :readonly="readonly"
                    dense
                    outlined
                    hide-bottom-space
                    :model-value="yearly + 543"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
                    :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-5 col-xs-12">
              <datepicker
                menu-class-name="modalfix"
                v-model="dateStart"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :class="classInput(!readonly)"
                :readonly="readonly"
                :max-date="dateEnd"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :class="classInput(!readonly)"
                    :readonly="readonly"
                    outlined
                    dense
                    :model-value="
                      dateStart != null ? date2Thai(dateStart) : null
                    "
                    :label="`${'วันเริ่มต้น'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
                    hide-bottom-space
                  >
                    <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-5 col-xs-12">
              <datepicker
                menu-class-name="modalfix"
                v-model="dateEnd"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :class="classInput(!readonly)"
                :readonly="readonly"
                :min-date="dateStart"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="col-xs-12 col-sm-4"
                    :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
                    :label="`${'วันสิ้นสุด'}`"
                    :rules="[
                      (val:string) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
                    ]"
                    :class="classInput(!readonly)"
                    :readonly="readonly"
                    hide-bottom-space
                  >
                    <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-2 col-xs-12">
              <q-input
                :class="classInput(!readonly)"
                :readonly="readonly"
                dense
                outlined
                v-model="datelast"
                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
                mask="###"
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณากรอกจำนวนวันแจ้งเตือนก่อนวันสิ้นสุด'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-md-12 col-xs-12">
              <q-file
                :class="classInput(!readonly)"
                :readonly="readonly"
                outlined
                dense
                v-model="files"
                @added="fileUploadDoc"
                label="อัปโหลดเอกสารประกอบ"
                hide-bottom-space
                lazy-rules
                accept=".pdf,.xlsx,.doc"
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right" v-if="actionType !== 'view'">
          <q-btn label="บันทึก" color="secondary" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
