<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
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";
import { useKpiDataStore } from "@/modules/08_KPI/store";

const store = useKpiDataStore();

const route = useRoute();
const router = useRouter();
const id = ref<string>(route.params.id as string);
const work = ref<boolean>(false);
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  success,
  showLoader,
  hideLoader,
  messageError,
  findPosMasterNoOld,
  findOrgNameOld,
  date2Thai,
} = mixin;

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

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>
