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

import { useCounterMixin } from "@/stores/mixin";
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
import http from "@/plugins/http";
import config from "@/app.config";

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

/** importStore*/

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

/**porps*/
const modal = defineModel<boolean>("modal", { required: true });
const profileId = defineModel<string>("id", { required: true });
const props = defineProps({
  isPunish: { type: Boolean, required: true },
  isSuspension: { type: Boolean, required: true },
  isAbsent: { type: Boolean, required: true },
  isLeave: { type: Boolean, required: true },
  fetchData: {
    type: Function,
  },
});

const type = ref<string>("");

const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
const isSuspension = ref<boolean>(false); // สำรองหรือไม่
const isAbsent = ref<boolean>(false); // สำรองหรือไม่
const isLeave = ref<boolean>(false); // สำรองหรือไม่

/**
 * function ปิด Popup
 */
function close() {
  modal.value = false;
  type.value = "";
}

/**
 * function ยืนยันการบันทึกข้อมูล
 */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const body = {
      isPunish: isPunish.value,
      isSuspension: isSuspension.value,
      isAbsent: isAbsent.value,
      isLeave: isLeave.value,
    };
    await http
      .put(config.API.salaryPropertyEmp(profileId.value), body)
      .then(async () => {
        await props.fetchData?.();
        await success($q, "บันทึกข้อมูลสำเร็จ");
        close();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

watch(
  () => modal.value,
  () => {
    isPunish.value = props.isPunish ? props.isPunish : false;
    isSuspension.value = props.isSuspension ? props.isSuspension : false;
    isAbsent.value = props.isAbsent ? props.isAbsent : false;
    isLeave.value = props.isLeave ? props.isLeave : false;
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 20%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
        <q-separator />

        <q-card-section class="scroll" style="max-height: 70vh">
          <div class="q-gutter-y-sm column">
            <q-checkbox
              keep-color
              label="ไม่ถูกลงโทษทางวินัย"
              dense
              v-model="isPunish"
            />
            <q-checkbox
              keep-color
              label="ไม่ถูกพักราชการ"
              dense
              v-model="isSuspension"
            />
            <q-checkbox
              keep-color
              label="ไม่ขาดราชการ"
              dense
              v-model="isAbsent"
            />
            <q-checkbox
              keep-color
              label="วันลาไม่เกิน"
              dense
              v-model="isLeave"
            />
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn
            type="submit"
            for="#submitForm"
            color="secondary"
            label="บันทึก"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped></style>
