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

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

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const route = useRoute();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  convertDateToAPI,
} = useCounterMixin();

const profileId = ref<string>(route.params.id.toString());

const modal = defineModel<boolean>("modal", { required: true });
const empType = defineModel<string>("empType", { required: true });

const props = defineProps({
  fetchData: { type: Function, required: true },
});

const remark = ref<string>("");

function onClickCloseDialog() {
  modal.value = false;
}

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .patch(config.API.salaryTemp + `/return-edit/${profileId.value}`, {
        detailForEdit: remark.value,
      })
      .then(async () => {
        await props.fetchData?.();
        success($q, "บันทึกข้อมูลสำเร็จ");
        onClickCloseDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

watch(modal, async (val) => {
  if (val) {
  } else {
    remark.value = "";
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 40%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader :tittle="'ตีกลับให้แก้ไข'" :close="onClickCloseDialog" />
        <q-separator />

        <q-card-section>
          <div class="row">
            <div class="col-12">
              <q-input
                class="inputgreen"
                outlined
                dense
                borderless
                v-model="remark"
                :label="`${'รายละเอียดการแก้ไข'}`"
                type="textarea"
              />
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
