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

import http from "@/plugins/http";
import config from "@/app.config";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";

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

const store = useKpiDataStore();

const $q = useQuasar();
const work = ref<boolean>(false);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

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

/** ปิด dialog */
function close() {
  modal.value = false;
}

/** ดึงข้อมูล */
function getData() {
  showLoader();
  http
    .get(config.API.orgPosition + `/${store.dataProfile.profileId}`)
    .then((res) => {
      const data = res.data.result.isProbation;
      work.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}
watch(
  () => modal.value,
  (n) => {
    if (n == true) {
      getData();
    }
  }
);
</script>

<template>
  <q-dialog persistent v-model="modal">
    <q-card bordered style="min-width: 20vw">
      <DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
      <q-separator />
      <q-card-section class="q-pa-sm">
        <div class="row">
          <div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
            <span class="text-weight-bold text-teal">{{
              isProbation ? `อยู่ระหว่างทดลองงาน` : "-"
            }}</span>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
