<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, success, showLoader, hideLoader } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const editCheck = defineModel<boolean>("edit");
const round = defineModel<string>("round", { required: true });
const idRound = defineModel<string>("id", { required: true });

const props = defineProps({
  getData: Function,
});
/** ปิด dialog */
function close() {
  modal.value = false;
  editCheck.value = false;
  round.value = "";
  idRound.value = "";
}

function onSubmit() {
//   dialogConfirm($q, () => {
//     const url = editCheck.value
//       ? config.API.
//       : config.API.;

//     http[editCheck.value ? "put" : "post"](url, {
//       id: editCheck.value ? idRound : undefined,
//       round: round.value,
//     }).then((res) => {
//       close();
//       success($q, "บันทึกข้อมูลสำเร็จ");
//       props.getData?.();
//     });
//   });
}
</script>

<template>
  <q-dialog persistent v-model="modal">
    <q-card bordered style="min-width: 40vh">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`${
            editCheck ? 'แก้ไข' : 'เพิ่ม'
          }รอบการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง`"
          :close="close"
        />
        <q-separator />
        <q-card-section>
          <div class="row">
            <div class="col-12">
              <q-input
                :model-value="round"
                outlined
                dense
                class="inputgreen"
                label="ชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง"
                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง'}`,]"
              ></q-input>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
