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

import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
import type {
  FormData,
  MyObjectRef,
} from "@/modules/11_discipline/interface/request/order";
// importStroe
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const $q = useQuasar();

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const next = () => props.next();
// Options ต่างๆ
const orderTypeOptions = ref<DataOption[]>([
  { id: "0", name: "ประเภทคำสั่ง 1" },
  { id: "1", name: "ประเภทคำสั่ง 2" },
  { id: "2", name: "ประเภทคำสั่ง 3" },
]);
const orderByOptions = ref<DataOption[]>([
  { id: "0", name: "คำสั่งโดย 1" },
  { id: "1", name: "คำสั่งโดย 2" },
  { id: "2", name: "คำสั่งโดย 3" },
]);
const listInvestigationOptions = ref<DataOption[]>([
  { id: "0", name: "รายการสอบสวนความผิดทางวินัย 1" },
  { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
  { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
]);
// ตัวแปรทั้งหมด
const formData = reactive<FormData>({
  orderType: "",
  orderBy: "",
  listInvestigation: "",
  authority: "",
  orderNumber: "",
  dateYear: 0,
  date: null,
  authorityPosition: "",
  subject: "",
  mistakeDetail: "",
});

// validateForm
const orderTypeRef = ref<Object | null>(null);
const orderByRef = ref<Object | null>(null);
const listInvestigationRef = ref<Object | null>(null);
const authorityRef = ref<Object | null>(null);
const orderNumberRef = ref<Object | null>(null);
const dateYearRef = ref<Object | null>(null);
const dateRef = ref<Object | null>(null);
const authorityPositionRef = ref<Object | null>(null);
const subjectRef = ref<Object | null>(null);
const mistakeDetailRef = ref<Object | null>(null);
const myObjectRef: MyObjectRef = {
  orderType: orderTypeRef,
  orderBy: orderByRef,
  listInvestigation: listInvestigationRef,
  authority: authorityRef,
  orderNumber: orderNumberRef,
  dateYear: dateYearRef,
  date: dateRef,
  authorityPosition: authorityPositionRef,
  subject: subjectRef,
  mistakeDetail: mistakeDetailRef,
};
function validateForm() {
  const hasError = [];
  for (const key in myObjectRef) {
    if (Object.prototype.hasOwnProperty.call(myObjectRef, key)) {
      const property = myObjectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
    console.log("ไม่ผ่าน ");
  }
}

function onSubmit() {
  console.log(formData);
  dialogConfirm(
    $q,
    async () => {
      next();
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่"
  );
}
</script>

<template>
  <form @submit.prevent.stop="validateForm">
    <div class="row col-12 q-pa-sm">
      <div class="row col-xs-12 col-sm-12 q-col-gutter-x-sm">
        <div class="col-xs-12 col-sm-6">
          ประเภทคำสั่ง
          <q-select
            for="selectOrderType"
            ref="orderTypeRef"
            dense
            outlined
            v-model="formData.orderType"
            :options="orderTypeOptions"
            option-value="id"
            option-label="name"
            emit-value
            map-options
            :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
            lazy-rules
            use-input
          />
        </div>
        <div class="col-xs-12 col-sm-6">
          คำสั่งโดย
          <q-select
            for="selectOrderBy"
            ref="orderByRef"
            dense
            outlined
            v-model="formData.orderBy"
            :options="orderByOptions"
            option-value="id"
            option-label="name"
            emit-value
            map-options
            :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
            lazy-rules
            use-input
          />
        </div>
        <div class="col-xs-12 col-sm-6">
          เลือกรายการสอบสวนความผิดทางวินัย
          <q-select
            for="selectListInvestigation"
            ref="listInvestigationRef"
            dense
            outlined
            v-model="formData.listInvestigation"
            :options="listInvestigationOptions"
            option-value="id"
            option-label="name"
            emit-value
            map-options
            :rules="[
              (val) => !!val || `${'กรุณาเลือกรายการสอบสวนความผิดทางวินัย'}`,
            ]"
            lazy-rules
            use-input
          />
        </div>
        <div class="col-xs-12 col-sm-6">
          ผู้มีอำนาจลงนาม
          <q-input
            for="inputAuthority"
            ref="authorityRef"
            dense
            outlined
            v-model="formData.authority"
            placeholder="กรอกผู้มีอำนาจลงนาม"
            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
            lazy-rules
          />
        </div>
        <div class="row col-xs-7 col-sm-3">
          <div class="col-6">
            คำสั่งที่
            <q-input
              for="inputOrderNumber"
              ref="orderNumberRef"
              outlined
              dense
              v-model="formData.orderNumber"
              hide-bottom-space
              :rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
              lazy-rules
            >
            </q-input>
          </div>
          <label class="col-1 flex justify-center items-center text-bold"
            >/</label
          >
          <div class="col-5">
            พศ
            <datepicker
              v-model="formData.dateYear"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  for="inputDateYear"
                  ref="dateYearRef"
                  :model-value="
                    formData.dateYear ? formData.dateYear + 543 : null
                  "
                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                  dense
                  outlined
                >
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>
        <div class="col-xs-5 col-sm-3">
          วันที่มีผลคำสั่ง
          <datepicker
            menu-class-name="modalfix"
            v-model="formData.date"
            :locale="'th'"
            autoApply
            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
                for="inputDate"
                ref="dateRef"
                outlined
                dense
                class="full-width datepicker"
                :model-value="
                  formData.date != null ? date2Thai(formData.date) : null
                "
                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่มีผลคำสั่ง'}`]"
              >
                <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-xs-12 col-sm-6">
          ตำแหน่งผู้มีอำนาจลงนาม
          <q-input
            for="inputAuthorityPosition"
            ref="authorityPositionRef"
            dense
            outlined
            v-model="formData.authorityPosition"
            placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
            lazy-rules
          />
        </div>
        <div class="col-xs-12 col-sm-6">
          คำสั่งเรื่อง
          <q-input
            for="inputSubject"
            ref="subjectRef"
            dense
            outlined
            v-model="formData.subject"
            placeholder="กรอกคำสั่งเรื่อง"
            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
            lazy-rules
          />
        </div>
        <div class="col-xs-12 col-sm-12">
          รายละเอียดการกระทำความผิด
          <q-input
            for="inputMistakeDetail"
            ref="mistakeDetailRef"
            dense
            outlined
            v-model="formData.mistakeDetail"
            placeholder="กรอกรายละเอียดการกระทำความผิด"
            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
            lazy-rules
            type="textarea"
            rows="5"
          />
        </div>
      </div>
    </div>

    <q-separator />
    <div class="row col-12 q-pa-sm">
      <q-space />
      <q-btn
        for="ButtonOnSubmit"
        id="formSubmit"
        color="secondary"
        label="บันทึก"
        type="submit"
        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
      >
    </div>
  </form>
</template>

<style scoped></style>
