<script setup lang="ts">
import { ref, defineModel } from "vue";
import Header from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type { 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 modal = defineModel<boolean>("modal", { required: true });
const type = ref<string>("");
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai, messageError } = mixin;
const typeOp = ref<DataOption[]>([
  { id: "NONE", name: "ไม่ได้เลื่อน" },
  { id: "HAFT", name: "ครึ่งขั้น" },
  { id: "FULL", name: "1ขั้น" },
  { id: "FULLHAFT", name: "1.5ขั้น" },
]);

/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
  onSubmit();
}

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

function onSubmit() {
  dialogConfirm($q, () => {
    const body = {
      profileId: "????????????????????????????????????????????",
      type: type.value,
    };
    http
      .post(config.API.salaryPeriod() + `/change/type`, body)
      .then((res) => {
        modal.value = false;
        type.value = "";
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {});
  });
}

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

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 30%">
      <Header :tittle="`ย้ายขั้น`" :close="close" />
      <q-separator />

      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="q-gutter-y-sm">
          <q-select
            ref="periodRef"
            :class="inputEdit(isReadonly)"
            v-model="type"
            label="เลื่อนขั้น"
            dense
            outlined
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="typeOp"
            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
            lazy-rules
            hide-bottom-space
          />
        </div>
      </q-card-section>
      <q-separator />
      <form @submit.prevent="validateForm">
        <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></style>
