<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";

import { ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const route = useRoute();

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

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

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

function getData() {
  showLoader();
  http
    .get(config.API.profilePosition() + `/${profileId.value}`)
    .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">{{
              work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
            }}</span>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
