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

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

import dialogHeader from "@/components/DialogHeader.vue"; // หัวของ Popup

const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();

/** props*/
const data = defineModel<string>("data", {
  required: true,
});
const personalName = defineModel<string>("personalName"); //label input
const dialogStatus = defineModel<string>("dialogStatus"); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
const editId = defineModel<string>("editId"); // id ของข้อมูล
const dialog = defineModel<boolean>("dialog"); // modal
const educationRank = defineModel<number>("educationRank"); // ลำดับ
const zipCode = defineModel<string>("zipCode"); // รหัสไปรษณีย์
const props = defineProps({
  fetchData: {
    type: Function,
  },
  addData: {
    type: Function,
    default: () => {},
  },
  editData: {
    type: Function,
    default: () => {},
  },
});

/**
 * ยืนยันการบันทึกข้อมูล
 * - ถ้า dialogStatus เป็น "create", จะเรียกฟังก์ชัน props.addData()
 * - ถ้า dialogStatus เป็นค่าอื่น, จะเรียกฟังก์ชัน props.editData(editId.value)
 */
async function onSubmit() {
  if (data.value.length > 0) {
    dialogConfirm(
      $q,
      async () => {
        dialogStatus.value === "create"
          ? await props.addData()
          : await props.editData(editId.value);
        closeDialog();
        educationRank.value = undefined;
      },
      "ยืนยันการบันทึกข้อมูล",
      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
    );
  }
}

/**
 * ปืด popup
 */
function closeDialog() {
  dialog.value = false;
  data.value = "";
}
</script>

<template>
  <q-dialog v-model="dialog" class="dialog" persistent>
    <q-card style="min-width: 350px">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <dialog-header
          :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
          :close="closeDialog"
        />

        <q-separator />
        <q-card-section class="q-pa-none">
          <div class="col-12 q-ma-md">
            <q-input
              ref="dataRef"
              outlined
              v-model="data"
              :label="personalName"
              dense
              class="inputgreen"
              lazy-rules
              borderless
              :rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
              hide-bottom-space
            />
          </div>
        </q-card-section>
        <q-card-section
          class="q-pa-none"
          v-if="personalName === 'ระดับการศึกษา'"
        >
          <div class="col-12 q-ma-md">
            <q-input
              ref="educationRankRef"
              outlined
              v-model="educationRank"
              label="ลำดับ"
              dense
              type="number"
              lazy-rules
              borderless
              min="1"
              :rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
              hide-bottom-space
              class="inputgreen"
            />
          </div>
        </q-card-section>
        <q-card-section class="q-pa-none" v-if="personalName === 'แขวง/ตำบล'">
          <div class="col-12 q-ma-md">
            <q-input
              ref="zipCodeRef"
              outlined
              v-model="zipCode"
              label="รหัสไปรษณีย์"
              dense
              class="inputgreen"
              lazy-rules
              borderless
              :rules="[(val) => val.length > 0 || 'กรุณากรอกรหัสไปรษณีย์']"
              hide-bottom-space
              mask="#####"
            />
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
