<script setup lang="ts">
import { ref, defineModel, defineProps, watch } from "vue";
import Header from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type {
  ObjectRef,
  DataOption,
} from "@/modules/13_salary/interface/response/Main";
import { useQuasar } from "quasar";
import http from "@/plugins/http";

import config from "@/app.config";

const $q = useQuasar();
const isActive = ref<boolean>(false);
const period = ref<string>("");
const modal = defineModel<boolean>("modal", { required: true });
const effective = defineModel<Date | null | string>("effective", {
  required: true,
});
const isRead = defineModel<boolean>("isRead", { required: true });
const year = defineModel<number | null | string>("year");
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai, messageError,success } = mixin;
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const effectiveDate = ref<Date | null>(null);
/** ตัวแปร validate */
const periodRef = ref<Object | null>(null);
const effectiveDateRef = ref<Object | null>(null);
const yearRef = ref<Object | null>(null);
const typeOptions = ref<DataOption[]>([
  { id: "SPECIAL", name: "รอบพิเศษ" },
  { id: "APR", name: "รอบเมษายน" },
  { id: "OCT", name: "รอบตุลาคม" },
]);
const objectForm: ObjectRef = {
  period: periodRef,
  effectiveDate: effectiveDateRef,
  year: yearRef,
};

const props = defineProps({
  getData: Function,
  edit: Boolean,
  idRound: String,
  period: String,
  effectiveDate: Date,
  isActive: Boolean,
  isRead: Boolean,
});
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectForm) {
    if (Object.prototype.hasOwnProperty.call(objectForm, key)) {
      const property = objectForm[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }

  if (hasError.every((result) => result === true)) {
    if (props.edit == true) {
      editSummit();
    } else {
      onSubmit();
    }
  }
}

function saveData() {}
function clearForm() {
  isActive.value = false;
  period.value = "";
  effective.value = null;
  year.value = 0;
  isRead.value = false;
}

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

function editSummit() {
  dialogConfirm($q, () => {
    const body = {
      period: period.value,
      isActive: isActive.value,
      effectiveDate: effective.value,
      year: year.value,
    };
    http
      .put(config.API.salaryPeriod() + `/${props.idRound}`, body)
      .then((res) => {
        modal.value = false;
        clearForm();
        props.getData?.();
        success($q,'บันทึกข้อมูลสำเร็จ')
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {});
  });
}

function onSubmit() {
  dialogConfirm($q, () => {
    const body = {
      period: period.value,
      isActive: isActive.value,
      effectiveDate: effective.value,
      year: year.value,
    };
    http
      .post(config.API.salaryPeriod(), body)
      .then((res) => {
        modal.value = false;
        clearForm();
        success($q,'บันทึกข้อมูลสำเร็จ')
        props.getData?.();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {});
  });
}

function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer inputgreen ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

watch(
  () => modal.value,
  () => {
    console.log(props.edit);
    if (props.edit == true) {
      period.value = props.period ? props.period : "";
      effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
      isActive.value = props.isActive;
    } else {
      year.value = 0;
      effective.value = null;
      period.value = "";
      isActive.value = false;
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 30%">
      <Header
        :tittle="`${ isRead == true ? `ข้อมูลรอบการขึ้นเงินเดือน`: props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน` }`"
        :close="close"
      />
      <q-separator />

      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="q-gutter-y-sm">
          <datepicker
            :readonly="isRead"
            menu-class-name="modalfix"
            v-model="year"
            class="col-2"
            :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
                :readonly="isRead"
                ref="yearRef"
                dense
                :class="inputEdit(isReadonly)"
                hide-bottom-space
                outlined
                :model-value="year === 0 ? null : Number(year) + 543"
                :label="`${'ปีงบประมาณ'}`"
                :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>

          <q-select
          :readonly="isRead"
            ref="periodRef"
            :class="inputEdit(isReadonly)"
            v-model="period"
            label="รอบการขึ้นเงินเดือน"
            dense
            outlined
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="typeOptions"
            lazy-rules
            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
            hide-bottom-space
          />
          <datepicker
          :readonly="isRead"
            menu-class-name="modalfix"
            v-model="effective"
            :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="effectiveDate"
                ref="effectiveDateRef"
                outlined
                dense
                :class="inputEdit(isReadonly)"
                :readonly="isRead"
                hide-bottom-space
                :model-value="
                  effective != null ? date2Thai(effective as Date) : null
                "
                label="วันที่มีผลบังคับใช้งาน"
                :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 class="col q-pa-sm bg-white border_custom text-weight-medium">
            <div class="row items-center q-my-sm justify-between">
              <p class="q-ma-none">สถานะการใช้งาน</p>
              <label :class="isRead == true ? 'toggle-control noClick':'toggle-control'">
                <input type="checkbox" v-model="isActive" :readonly="isRead"/>
                <span class="control"></span>
              </label>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator v-if="!isRead"/>
      <form @submit.prevent="validateForm" v-if="!isRead">
        <q-card-actions align="right" class="bg-white text-teal">
          <!-- <q-btn flat label="OK" v-close-popup /> -->
          <q-btn
            type="submit"
            for="#submitForm"
            unelevated
            dense
            class="q-px-md items-center"
            color="light-blue-10"
            label="บันทึก"
          />
        </q-card-actions>
      </form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.border_custom {
  border-radius: 6px !important;
  border: 1px solid #e1e1e1;
}

$toggle-background-color-on: #06884d;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 40px;
$toggle-height: 25px;
$toggle-gutter: 3px;
$toggle-radius: 50%;
$toggle-control-speed: 0.15s;
$toggle-control-ease: ease-in;

// These are our computed variables
// change at your own risk.
$toggle-radius: $toggle-height / 2;
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);

.toggle-control {
  display: block;
  position: relative;
  padding-left: $toggle-width;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  input:checked ~ .control {
    background-color: $toggle-background-color-on;

    &:after {
      left: $toggle-width - $toggle-control-size - $toggle-gutter;
    }
  }

  .control {
    position: absolute;
    top: -7px;
    left: -15px;
    height: $toggle-height;
    width: $toggle-width;
    border-radius: $toggle-radius;
    background-color: $toggle-background-color-off;
    transition: background-color $toggle-control-speed $toggle-control-ease;

    &:after {
      content: "";
      position: absolute;
      left: $toggle-gutter;
      top: $toggle-gutter;
      width: $toggle-control-size;
      height: $toggle-control-size;
      border-radius: $toggle-radius;
      background: $toggle-control-color;
      transition: left $toggle-control-speed $toggle-control-ease;
    }
  }
}
.noClick {
   pointer-events: none;
}
</style>
