<script setup lang="ts">
import { ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";

import { useRoute } from "vue-router";

import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true });

const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  date2Thai,
  pathRegistryEmp,
  onSearchDataTable,
} = mixin;

const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const profileId = ref<string>(route.params.id.toString()); //id profile

const data = ref<{ date: Date; type: string; reson: string; document: string }>(
  {
    date: new Date(),
    type: "ออกจากราชการ",
    reson: "พ้นจากราชการด้วยสาเหตุ : ออกจากราชการ",
    document: "test",
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 30%">
      <DialogHeader
        tittle="ข้อมูลการพ้นจากราชการ"
        :close="() => (modal = false)"
      />
      <q-separator />
      <q-card-section>
        <div class="row">
          <div class="col-12 column justify-center no-wrap">
            <div class="row text-grey-6">
              <div class="col-6">วันเดือนปีที่พ้นจากราชการ</div>
              <div class="col-6">ประเภทการพ้นจากราชการ</div>
            </div>
            <div class="row">
              <div class="col-6">
                {{ data.date ? date2Thai(data.date) : "-" }}
              </div>
              <div class="col-6">{{ data.type ? data.type : "-" }}</div>
            </div>

            <div class="row q-mt-md text-grey-6">
              <div class="col-12">สาเหตุ /เหตุผล</div>
            </div>
            <div class="row">
              <div class="col-12">{{ data.reson ? data.reson : "-" }}</div>
            </div>

            <div class="row q-mt-md text-grey-6">
              <div class="col-12">คำสั่ง /เอกสารอ้างอิง</div>
            </div>
            <div class="row">
              <div class="col-12">
                {{ data.document ? data.document : "-" }}
              </div>
            </div>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
