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

import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";

import type { DataLeave } from "@/modules/04_registryPerson/interface/index/leave";

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

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

const mixin = useCounterMixin();
const { date2Thai } = mixin;

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      leaveDate: null,
      leaveType: "",
      leaveReason: "",
      leaveCommandNo: "",
    }),
  },
});

const data = ref<DataLeave>({
  date: null,
  type: "",
  reson: "",
  document: "",
});

watch(modal, (val) => {
  if (val) {
    data.value = {
      date: props.data?.leaveDate,
      type: storeRegistry.convertTypeRetired(props.data?.leaveType),
      reson: props.data?.leaveReason,
      document: props.data?.leaveCommandNo,
    };
  } else {
    data.value = {
      date: null,
      type: "",
      reson: "",
      document: "",
    };
  }
});
</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>
