<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";

/** importComponents*/
import Header from "@/components/DialogHeader.vue";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

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

/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const activeType = defineModel<string>("activeType", { required: true });

const props = defineProps({
  isStatusEdit: { type: Boolean, required: true },
  data: { type: Object, required: true },
  fetchData: {
    type: Function,
    required: true,
  },
});

/** form บัญชีค่าจ้างลูกจ้างประจำ */
const formData = reactive<FormDataChar>({
  name: "", //ชื่อผังบัญชีอัตราค่าจ้าง
  group: "", //*กลุ่มของผังบัญชีอัตราค่าจ้าง
  isActive: false, //*สถานะการใช้งาน
  date: null, //ให้ไว้ ณ วันที่
  startDate: null, //วันที่มีผลบังคับใช้
  endDate: null, //วันที่สิ้นสุดบังคับใช้
  details: "", //คำอธิบาย
});

const isReadonly = ref<boolean>(false);

/**
 * function fetch ข้อมูล ผังบัญชีค่าจ้างลูกจ้างประจำ
 * @param id ผังบัญชีค่าจ้างลูกจ้างประจำ
 */
function fetchSalaryDetail(id: string) {
  showLoader();
  http
    .get(config.API.salaryEmployeeChartByid(id))
    .then((res) => {
      const data = res.data.result;
      formData.name = data.name;
      formData.group = data.group;
      formData.isActive = data.isActive;
      formData.date = data.date;
      formData.startDate = data.startDate;
      formData.endDate = data.endDate;
      formData.details = data.details;
      isReadonly.value = activeType.value === "view" ? true : data.isActive;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function บันทึกข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ*/
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    try {
      const url = !props.isStatusEdit
        ? config.API.salaryEmployeeChart
        : config.API.salaryEmployeeChartByid(props.data.id);
      await http[!props.isStatusEdit ? "post" : "put"](url, formData);
      await props.fetchData?.();
      success($q, "บันทีกข้อมูลสำเร็จ");
      closeDialog();
    } catch (err) {
      messageError($q, err);
    } finally {
      hideLoader();
    }
  });
}

/** function ปืด Dialog*/
function closeDialog() {
  modal.value = false;
  clearFormData();
}

/** function เคลียข้อมูล form*/
function clearFormData() {
  formData.name = "";
  formData.group = "";
  formData.isActive = false;
  formData.date = null;
  formData.startDate = null;
  formData.endDate = null;
  formData.details = "";
}

/** function checkEndDate*/
function checkEndDate() {
  if (formData.endDate !== null && formData.startDate !== null) {
    if (formData.endDate < formData.startDate) {
      formData.endDate = null;
    }
  }
}

/** callbaclFunction fetch ช้อมูลเมื่อแก้ไข*/
watch(
  () => modal.value,
  () => {
    if (modal.value && props.isStatusEdit) {
      fetchSalaryDetail(props.data.id);
    } else {
      isReadonly.value = false;
    }
  }
);

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 55%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <Header
          :tittle="
            props.isStatusEdit && activeType === 'view'
              ? 'รายละเอียด'
              : props.isStatusEdit
              ? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
              : 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
          "
          :close="closeDialog"
        />
        <q-separator />
        <q-card-section class="scroll" style="max-height: 70vh">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-xs-12 col-md-4">
              <q-input
                :readonly="isReadonly"
                :class="getClass(!isReadonly)"
                ref="nameRef"
                dense
                hide-bottom-space
                outlined
                v-model="formData.name"
                label="ชื่อผังบัญชีอัตราค่าจ้าง"
                :rules="[(val:string) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง']"
                lazy-rules
              />
            </div>

            <div class="col-xs-12 col-md-4">
              <q-input
                ref="groupRef"
                week-start="0"
                :readonly="isReadonly"
                :class="getClass(!isReadonly)"
                dense
                outlined
                v-model="formData.group"
                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                hide-bottom-space
                mask="#"
                reverse-fill-mask
                :rules="[
                  (val:string) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
                ]"
              />
            </div>

            <div
              class="col-xs-12 col-md-4"
              style="display: flex; justify-content: flex-start"
            >
              <q-toggle
                week-start="0"
                :disable="isReadonly"
                color="primary"
                label="สถานะการใช้งาน"
                v-model="formData.isActive"
              />
            </div>

            <div class="col-xs-12 col-md-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="formData.date"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :readonly="isReadonly"
                :class="getClass(!isReadonly)"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :readonly="isReadonly"
                    outlined
                    dense
                    hide-bottom-space
                    :model-value="
                      formData.date != null ? date2Thai(formData.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-xs-12 col-md-4">
              <datepicker
                :readonly="isReadonly"
                :class="getClass(!isReadonly)"
                menu-class-name="modalfix"
                v-model="formData.startDate"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                @update:model-value="checkEndDate"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :readonly="isReadonly"
                    outlined
                    dense
                    hide-bottom-space
                    :model-value="
                      formData.startDate != null
                        ? date2Thai(formData.startDate)
                        : 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-xs-12 col-md-4">
              <datepicker
                :readonly="isReadonly"
                :class="getClass(!isReadonly)"
                menu-class-name="modalfix"
                v-model="formData.endDate"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :min-date="formData.startDate"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :readonly="isReadonly"
                    outlined
                    dense
                    :model-value="
                      formData.endDate != null
                        ? date2Thai(formData.endDate)
                        : 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-12">
              <q-input
                :readonly="isReadonly"
                :class="getClass(!isReadonly)"
                v-model="formData.details"
                outlined
                dense
                type="textarea"
                label="คำอธิบาย"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" v-if="!isReadonly">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
