<script setup lang="ts">
import { ref, onMounted, reactive, computed, onBeforeMount } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import router from "@/router";
import http from "@/plugins/http";
import config from "@/app.config";

/** importTyep*/
import type { FormData } from "@/modules/12_evaluatePersonal/interface/index/meeting";

/** importComponents*/
import Form from "@/modules/12_evaluatePersonal/components/Meeting/Form.vue";

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

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

const personalId = ref<string>(route.params.id as string);
const routeName = ref<string>(route.name as string);
const title = computed(() =>
  routeName.value === "evaluateMeetingdetail"
    ? "รายละเอียดการประชุม"
    : "แก้ไขการประชุม"
);

//ข้อมูลการประชุม
const data = reactive({
  rounded: "",
  dateMeeting: "",
  dateMeetingStart: Date,
  dateMeetingEnd: new Date(),
  consider: "",
  period: "",
  title: "",
  file: [],
});

const isLoad = ref<boolean>(false);

/** function fetch ข้อมูลการประชุม*/
async function fetchData() {
  isLoad.value = false;
  showLoader();
  await http
    .get(config.API.meetingById(personalId.value))
    .then(async (res) => {
      const dataApi = await res.data.result;
      data.title = dataApi.title;
      data.rounded = dataApi.round;
      data.consider = dataApi.result;
      data.period = dataApi.duration;
      data.dateMeetingStart = dataApi.dateStart;
      data.dateMeetingEnd = dataApi.dateEnd;
      data.file = dataApi.file;
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {
      isLoad.value = true;
    });
}

/**
 * บันทึกข้อมูลที่เเก้ไข
 * @param formData ข้อมูลการประชุม
 */
function onSubmit(formData: FormData) {
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.meetingById(personalId.value), {
        round: formData.rounded ?? "",
        title: formData.title,
        dateStart: formData.dateMeetingStart
          ? dateToISO(formData.dateMeetingStart)
          : null,
        dateEnd: formData.dateMeetingEnd
          ? dateToISO(formData.dateMeetingEnd)
          : null,
        result: formData.consider,
        duration: formData.period,
      })
      .then(() => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        router.push(`/evaluate/meeting`);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

onMounted(async () => {
  await fetchData();
});
</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(`/evaluate/meeting`)"
      />
      {{ title }}
    </div>

    <Form v-if="isLoad" :on-submit="onSubmit" :data="data" />
  </div>
</template>
