<script setup lang="ts">
import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type { FormDataPost } from "@/modules/11_discipline/interface/request/director";

const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
const router = useRouter();

/**
 * บันทึกข้อมูลที่เเก้ไข
 * @param id ระบุ บุคคล
 */
function onSubmit(formData: FormDataPost) {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.director(), {
        personalId: formData.personalId ?? "",
        prefix: formData.prefix,
        firstName: formData.firstname,
        lastName: formData.lastname,
        position: formData.position,
        email: formData.email,
        phone: formData.phone,
        qualification: formData.qualification,
        rootDnaId: formData.rootDnaId,
      })
      .then(async () => {
        await success($q, "บันทึกข้อมูลสำเร็จ");
        await router.push(`/discipline/director`);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="$router.push(`/discipline/director`)"
      />
      เพิ่มรายชื่อกรรมการ
    </div>

    <Form :on-submit="onSubmit" />
  </div>
</template>
