<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

interface DetailData {
  id: string;
  sick: string;
  absence: string;
  late: string;
  government: string;
  study: string;
  year: number;
}
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
const myForm = ref<any>(); //form data input
const checkValidate = ref<boolean>(false);
const modal = defineModel<boolean>("modal", { required: true });
const edit = defineModel<boolean>("edit", { required: true });
const data = defineModel<Array<any>>("data", { required: true });

const clear = ref<boolean>(false);
const editForm = ref<boolean>(false);
const editForms = ref<boolean>(false);
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว

const formData = reactive<DetailData>({
  id: "",
  sick: "",
  absence: "",
  late: "",
  government: "",
  study: "",
  year: new Date().getFullYear(),
});

function close() {
  modal.value = false;
}

/**
 * ส่งค่า css ออกไปตามเงื่อนไข
 * @param val true/false
 */
function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer inputgreen ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

const validateData = async () => {
  checkValidate.value = true;
  await myForm.value.validate().then((result: boolean) => {
    if (result == false) {
      checkValidate.value = false;
    } else saveForm();
  });
};

function saveForm() {
  dialogConfirm($q, () => {
    console.log(formData);
    modal.value = false;
  });
}
function clearForm() {
  formData.sick = "";
  formData.absence = "";
  formData.late = "";
  formData.government = "";
  formData.study = "";
  editForm.value = false;
  editForms.value = false;
  clear.value = false;
}

function clickDelete() {}
watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      clearForm();
      if (edit.value == false) {
        clear.value = true
        const dataList: any = data.value;
        formData.id = dataList.id;
        formData.sick = dataList.sick == "-" ? "" : dataList.sick;
        formData.absence = dataList.absence == "-" ? "" : dataList.absence;
        formData.late = dataList.late == "-" ? "" : dataList.late;
        formData.government =
          dataList.government == "-" ? "" : dataList.government;
        formData.study = dataList.study == "-" ? "" : dataList.study;
        formData.year =
          dataList.year == "-" ? new Date().getFullYear() : dataList.year;
        editForm.value = true;
        console.log(dataList);
      }
    }
  }
);
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 30vw">
      <q-form ref="myForm">
        <DialogHeader :tittle="`การลา`" :close="close" />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="formData.year"
                class="col-2"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
                :readonly="!edit && !editForms"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    lazy-rules
                    hide-bottom-space
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
                    :class="inputEdit(isReadonly)"
                    :outlined="edit || editForms"
                    :borderless="!edit"
                    :readonly="!edit && !editForms"
                    :model-value="
                      formData.year === 0 ? null : Number(formData.year) + 543
                    "
                    :label="`${'ปี'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-if="formData.year && clear == false " v-slot:append>
                      <q-icon
                        name="cancel"
                        @click.stop.prevent="formData.year = 0"
                        class="cursor-pointer"
                      />
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-6">
              <q-input
                :class="inputEdit(isReadonly)"
                v-model="formData.sick"
                label="ลาป่วย"
                dense
                :outlined="edit || editForms"
                :borderless="!edit"
                :readonly="!edit && !editForms"
              />
            </div>
            <div class="col-6">
              <q-input
                :class="inputEdit(isReadonly)"
                v-model="formData.absence"
                label="ลากิจและพักผ่อน"
                dense
                :outlined="edit || editForms"
                :borderless="!edit"
                :readonly="!edit && !editForms"
              />
            </div>
            <div class="col-6">
              <q-input
                :class="inputEdit(isReadonly)"
                v-model="formData.late"
                label="มาสาย"
                dense
                :outlined="edit || editForms"
                :borderless="!edit"
                :readonly="!edit && !editForms"
              />
            </div>
            <div class="col-6">
              <q-input
                :class="inputEdit(isReadonly)"
                v-model="formData.government"
                label="ขาดราชการ"
                dense
                :outlined="edit || editForms"
                :borderless="!edit"
                :readonly="!edit && !editForms"
              />
            </div>
            <div class="col-6">
              <q-input
                :class="inputEdit(isReadonly)"
                v-model="formData.study"
                label="ลาศึกษาต่อ"
                dense
                :outlined="edit || editForms"
                :borderless="!edit"
                :readonly="!edit && !editForms"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="bg-white text-teal">
          <q-space />
          <q-btn
            v-if="editForm == true"
            flat
            round
            color="red"
            @click="clickDelete()"
            icon="mdi-delete"
          >
            <q-tooltip>ลบข้อมูล</q-tooltip>
          </q-btn>
          <q-btn
            v-if="editForms == true"
            icon="mdi-undo"
            color="red"
            flat
            round
            @click="() => {editForms = false; clear = true;}"
            ><q-tooltip>ยกเลิก</q-tooltip></q-btn
          >
          <q-btn
            v-if="editForm == true && editForms == false"
            @click="() => {editForms = true ; clear = false;}"
            flat
            round
            icon="mdi-pencil-outline"
            color="primary"
            ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
          >

          <q-btn
            v-if="edit || editForms"
            :label="`บันทึก`"
            color="public"
            @click="validateData()"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
