<script setup lang="ts">
import { reactive, watch } from "vue";
import { useQuasar } from "quasar";

import { useOrganizational } from "@/modules/02_organization/store/organizational";

/**
 * import type
 */
import type { FormDetailPosition } from "@/modules/02_organization/interface/index/organizational";

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

/**
 * use
 */
const $q = useQuasar();
const store = useOrganizational();

/**
 * Props
 */
const modal = defineModel<boolean>("positionDetail", { required: true });
const prosp = defineProps({
  dataDetailPos: { type: Object, require: true },
});

/** formData*/
const formData = reactive<FormDetailPosition>({
  positionNo: "", //*ตำแหน่งเลขที่
  positionType: "", //*ประเภทตำแหน่ง
  positionPathSide: "", //*ตำแหน่งในสายงาน
  positionLine: "", //*สายงาน
  positionSide: "", //*ด้าน/สาขา
  positionLevel: "", //*ระดับตำแหน่ง
  positionExecutive: "", //*ตำแหน่งทางการบริหาร
  positionExecutiveSide: "", //*ด้านทางการบริหาร
  status: "", //*สถานะตำแหน่ง
});

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

/**
 * callblack function ทำเมื่อเปิด popup set ตำแหน่งเลขที่ และสถานะตำแหน่ง
 */
watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      if (prosp.dataDetailPos) {
        formData.positionNo = prosp.dataDetailPos.posMasterNo;
        formData.status =
          store.typeOrganizational === "current"
            ? "ปกติ"
            : store.typeOrganizational === "draft"
            ? "แบบร่าง"
            : "ยุบเลิก";
        formData.positionType = prosp.dataDetailPos.posTypeName;
        formData.positionPathSide = prosp.dataDetailPos.positionName;
        formData.positionLine = prosp.dataDetailPos.positionField;
        formData.positionSide = prosp.dataDetailPos.positionArea
          ? prosp.dataDetailPos.positionArea
          : "-";
        formData.positionLevel = prosp.dataDetailPos.posLevelName;
        formData.positionExecutive = prosp.dataDetailPos.posExecutiveName
          ? prosp.dataDetailPos.posExecutiveName
          : "-";
        formData.positionExecutiveSide = prosp.dataDetailPos
          .positionExecutiveField
          ? prosp.dataDetailPos.positionExecutiveField
          : "-";
      }
    }
  }
);
</script>
<template>
  <template>
    <q-dialog v-model="modal" persistent>
      <q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 80vw'">
        <DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
        <q-separator />
        <q-card-section>
          <div class="q-px-md">
            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ตำแหน่งเลขที่</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionNo }}</p>
              </div>
            </div>
            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ประเภทตำแหน่ง</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionType }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ตำแหน่งในสายงาน</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionPathSide }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>สายงาน</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionLine }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ด้าน/สาขา</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionSide }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ระดับตำแหน่ง</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionLevel }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ตำแหน่งทางการบริหาร</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionExecutive }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ด้านทางการบริหาร</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionExecutiveSide }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>สถานะตำแหน่ง</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.status }}</p>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </template>
</template>
