<script setup lang="ts">
import { ref, computed, 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";

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

/**porps*/
const modal = defineModel<boolean>("modal", { required: true });
const profileId = defineModel<string>("profileId", { required: true });
const props = defineProps({
  typeLevel: { type: String, required: true },
  isReserve: { type: Boolean, required: true },
  remark: { type: String, required: true },
  fetchData: {
    type: Function,
  },
});

const type = ref<string>(""); //เลื่อนระดับ
const note = ref<string>(""); //หมายเหตุ
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
const isReserve = ref<boolean>(false); // สำรองหรือไม่
const typeRangeOps = computed(() => {
  return store.roundMainCode === "OCT"
    ? [
        { id: "NONE", name: "ไม่ได้เลื่อน" },
        { id: "HAFT", name: "0.5 ขั้น" },
        { id: "FULL", name: "1 ขั้น" },
        { id: "FULLHAFT", name: "1.5 ขั้น" },
      ]
    : store.roundMainCode === "APR"
    ? [
        { id: "NONE", name: "ไม่ได้เลื่อน" },
        { id: "HAFT", name: "0.5 ขั้น" },
        { id: "FULL", name: "1 ขั้น" },
      ]
    : [
        { id: "HAFT", name: "0.5 ขั้น" },
        { id: "FULL", name: "1 ขั้น" },
      ];
});

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

/**
 * function ยืนยันการบันทึกข้อมูล
 */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const body = {
      profileId: profileId.value,
      type: type.value,
      isReserve: isReserve.value,
      remark: type.value === "NONE" ? note.value : undefined,
    };
    await http
      .post(config.API.salaryPeriodEmp() + `/change/type`, body)
      .then(async () => {
        await props.fetchData?.();
        await success($q, "บันทึกข้อมูลสำเร็จ");
        close();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function เปลี่ยนระดับ
 */
function chengType() {
  note.value = props.typeLevel === "NONE" ? props.remark : "";
}

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

watch(
  () => modal.value,
  () => {
    type.value = props.typeLevel == "PENDING" ? "" : props.typeLevel;
    note.value = props.typeLevel === "NONE" ? props.remark : "";
    isReserve.value = props.isReserve;
    isChange.value = false;
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 30%">
      <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">
            <q-select
              ref="typeRef"
              :class="inputEdit(isReadonly)"
              v-model="type"
              label="เลื่อนขั้น"
              dense
              outlined
              emit-value
              map-options
              option-label="name"
              option-value="id"
              :options="typeRangeOps"
              :rules="[(val:string) => !!val || `${'กรุณาเลือก ขั้น'}`]"
              lazy-rules
              hide-bottom-space
              @update:model-value="(isChange = true), chengType()"
            />
            <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->

            <q-checkbox
              v-if="type === 'FULL'"
              keep-color
              label="สำรอง"
              dense
              v-model="isReserve"
              @update:model-value="isChange = true"
            />

            <q-input
              v-if="type === 'NONE'"
              :class="inputEdit(isReadonly)"
              outlined
              dense
              v-model="note"
              label="หมายเหตุ"
              type="textarea"
              @update:model-value="isChange = true"
            />
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn
            :disabled="!isChange"
            type="submit"
            for="#submitForm"
            color="secondary"
            label="บันทึก"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

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